ExtJS + EditGrid 显示相关问题

简介：
在Grid中集成一个ComboBox组件，通过在每个表格单元格中添加ComboBox组件，用户可以选择其显示的值。这种设计显著提升了用户体验，并有效减少了用户的数据录入量，并显著提高了工作效率。但是学习Ext开发初期阶段时，常会碰到一个具体问题：如何使输入设置的数据项以某种形式在grid中呈现？问题来源：具体表现为向grids中的每一个单元格嵌入一个comboBox控件，在接收到来自valueField的数据后，该comboBox会将相应的值传递到grids中对应的单元格，并将其显示在界面上。 1 男 2 女上面是一个下拉列表的值，1和2是ID，这些ID 应该等同于 comboBox 的 valueField 属性。name 为男性或女性的部分则应与 comboBox 的 displayField 等同。值得注意的是，在 ext 中的 comboBox 与其在 html 中的行为有所不同。具体来说，在 ext 的 comboBox 中，valueField 对应 html.select 的 value属性，而 displayField 则对应 innerHTML。从逻辑上讲，应该是这样的设计。然而由于comboBox放置在grid中会导致出现以下现象：当用户点击comboBox时可能出现的情况是例如女。此时comboBox赋值于grid的位置应对应其id号码2因此grid将正确地显示该id号码客户自然不想在grid中显示的数据是他不理解的。问题来了：如何让comboBox选择之后返回到grid中的值是displayField的值而不是valueField呢？解决办法：通过引入renderer实现...以下是具体的代码实现：其中包含的主要步骤有初始化变量、数据处理核心逻辑以及结果输出三个阶段。const colM = new \Ext.grid.ColumnModel([\n\n{\n header: 编号,\ dataIndex: deal_id,\ sortable: true,\ width: 100\n},\n\n{\n header: 工序,\ dataIndex: process_name,\ sortable: true,\ width: 200,\ editor:\n new \Ext.form.ComboBox(\n id: combo_process,\ store: store_process,\ valueField: process_id,\ displayField: process_name,\ forceSelection: true,\ typeAhead: true,\ triggerAction: all,\ selectOnFocus: true\n)\n}\n\n, renderer:\n function(value, cellmeta, record) {\n从id为combo_process的comboBox中获取选中的值。通过store_process库查找指定字段的值，find(getComponent(combo_process).valueField, value)；然后获取对应位置的对象记录。初始化displayText变量为空；如果没有对下拉列表进行任何选择操作，则返回传入的参数value；其中该值即来自grid表中对应列deal_with_name的数据。如果record为null，则直接返回value。设置为默认值的返回操作是该方法与其他常见解决方案不同的关键点。经过仔细研究发现，这种方案是经过验证的正确选择。通过长时间的研究和思考，我才认识到这一本质特点。displayText = value； } else { displayText = record.data.process_name;获取record中的数据集中的process_name字段的值 } return displayText; } },}]);查看这段代码时，请务必仔细核对。网络上的实例存在诸多错误。这些在线示例在record为null或为空的情况下缺乏处理措施，从而使返回给grid的内容成为一个空字符串。这种情况下，当初始化grid时添加了combobox字段后，该字段的数据无法正确展示。if (record == null) { 当记录等于null时，则执行相应的处理。}设置为默认值，这一做法不同于当前普遍采用的方案。该方法是经过深入研究后确定的最佳选择。在反复思考和验证之后才意识到这一点。 }该段代码具有解决方案的能力。问题的出现原因是什么？经分析发现，修改renderer后，返回的数据来源于comboBox。在初始化阶段时，comboBox未被指定具体数值。换言之，它处于未赋值状态。因此renderer将返回一个空白数据。导致grid中的数据显示为空，或者直接呈现无内容的状态。当comboBox返回为空时，我将返回的空值设为传入的value。即是我们数据库中的数据。为了解决问题，我花费了两天时间。希望能帮助那些学习ExtJS的朋友们。在网络上充斥着大量复制粘贴的内容，一旦出现错误就会导致全篇内容出错。这确实让人感到沮丧。真正能够理解并纠正这种问题的人却非常之少。