阅读量:0
ExtJS EditorGridPanel中，ComboBox列的显示问题通常是由于列宽不足或者ComboBox的宽度设置不正确导致的。请检查并调整列宽和ComboBox的宽度设置。
在Extjs的EditorGridPanel中，ComboBox列的显示问题通常表现为选择后显示的是值域（valueField）的值，而非显示域（displayField）的值，为了解决这一问题，可以采取以下几种方法：
使用renderer属性配置
1、通过Combobox设置：
在定义带Combobox的列时，需要配置其renderer属性。
示例代码如下：
```javascript
{
text: '改扩建类型',
name:'Upgrading_Type',
align:"center",
flex:1,
dataIndex: 'Upgrading_Type',
editor:combo,
defaultValue:'1',
renderer:Ext.util.Format.comboRenderer(combo)
}
```
Ext.util.Format.comboRenderer(combo)函数用于根据Combobox的valueField查找对应的displayField并返回。
2、通过Store对象获取record来设置：
另一种方法是通过Store对象来获取record来设置。
示例代码如下：
```javascript
var index = typeStore.find(Ext.getCmp('cb').valueField, value);
var record = typeStore.getAt(index);
var displayText = "";
if (record == null) {
displayText = value;
} else {
displayText = record.data.Config_Name;
}
return displayText;
```
3、自定义renderer函数：
如果上述方法不适用，可以尝试自定义一个简单的renderer函数。
示例代码如下：
```javascript
renderer:function(value){
return value == '1' ? '扩建' : '工艺提升';
}
```
相关问题与解答
1、如何在Extjs EditorGridPanel中动态加载ComboBox数据？
可以通过监听GridPanel的select事件或者编辑事件，动态加载ComboBox的数据，具体做法是在事件处理函数中，根据当前选中的行或者编辑的字段，向后台发送请求获取相应的数据，然后更新ComboBox的store。
2、如何在Extjs EditorGridPanel中实现ComboBox的级联选择？
要实现ComboBox的级联选择，可以在第一个ComboBox的选择事件中，根据选中的值，动态加载第二个ComboBox的数据，具体做法是，在第一个ComboBox的选择事件处理函数中，向后台发送请求获取相应的数据，然后更新第二个ComboBox的store，需要将第二个ComboBox设置为只读状态，直到第一个ComboBox的选择事件触发后再解除只读状态。
小伙伴们，上文介绍了“Extjs EditorGridPanel中ComboBox列的显示问题-extjs”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
