ExtJS 4.0 远程查询ComboBox下拉选项显示空白问题排查求助

核心问题根因 #

• displayField、valueField配置不匹配：你当前ComboBox配置的displayField: 'displayField'、valueField: 'valueField'为不存在的字段名，你的Model定义和接口返回的展示字段是f_description，值字段是f_value，Ext找不到对应展示内容就会渲染空白项。
• Store配置存在语法错误：代码中存在多余的闭合括号，且Ext4不需要手动实例化JsonReader，直接传配置对象即可。
• 布尔配置类型错误：forceSelection: 'true'传了字符串类型，Ext4规范要求传原生布尔值。

修复步骤 #

1. 修正ComboBox配置 #

{
    xtype: 'combobox',
    hiddenName: 'status',
    fieldLabel: 'Status',
    store: autoCompleteStore,
    queryMode: 'remote',
    forceSelection: true, // 改为原生布尔值
    triggerAction: 'all',
    displayField: 'f_description', // 替换为实际返回的展示字段
    fireEventOnSetValue: false,
    valueField: 'f_value', // 替换为实际返回的值字段
    emptyText: 'Select one'
}

2. 修正Store配置 #

var autoCompleteStore = new Ext.data.JsonStore({
    model: "test.Tickler",
    proxy: {
        type: 'ajax',
        url: '../medit_2_public/fc.php?_C_A=TicklerReport.getListOfTicklerReasons',
        reader: {
            type: 'json',
            root: 'results.rows',
            metaProperty: 'metaData'
        }
    }
});

验证排查（可选） #

如果修改后仍有问题，可以在控制台监听Store的load事件，打印加载后的数据确认解析是否正常：

autoCompleteStore.on('load', function(store, records) {
    console.log('加载到的数据：', records); // 查看每条record的data属性是否包含正确的f_description、f_value字段
})

内容的提问来源于stack exchange，提问作者Markus W