ExtJS 使用带有组合的 Roweditor 无法正常工作

Question

我有 ExtJS 网格。我正在使用带有组合框的 Roweditor 插件。当我单击 Grid 的任何一行时，我可以看到带有更新和取消按钮的编辑器。

现在我面临的问题是当我单击行并启用行编辑器时，如果当前显示的值与组合存储匹配，那么它应该显示为选中，但它没有显示。如果我同时使用 valueField 和 displayField 的值，那么我可以看到它被选中。

我想我不能发布图片，所以我在这里给你代码：

如果我在 Combo 的商店中同时使用 valueField 和 displayField 的值，那么我可以看到选定的值。

editor: {
    allowBlank: true,
    selectOnFocus:true,
    editable:true,
    xtype:'combobox',
    valueField:'id',
    displayField:'status',
    triggerAction:'all',
    queryMode: 'local',
    store:[['NOT_STARTED','NOT_STARTED'],
           ['IN_PROGRESS','IN_PROGRESS'],
           ['COMPLETED','COMPLETED']
    ],
    value:0,
    lazyRender: true
}

当我在 Combo 的商店中以不同方式分配 displayField 和 valueField 时，这是理想的情况，它不会向我显示所选内容。

editor: {
    allowBlank: true,
    selectOnFocus:true,
    editable:true,
    xtype:'combobox',
    valueField:'id',
    displayField:'status',
    triggerAction:'all',
    queryMode: 'local',
    store:[['1','NOT_STARTED'],
           ['2','IN_PROGRESS'],
           ['3','COMPLETED']
    ],
    value:0,
    lazyRender: true
}

请告诉我这里出了什么问题。

---

您好，感谢您的回复，我已按照您的建议进行了更改，但不知何故对我不起作用。这是代码。我的店铺是

 var data = {
            root: [
                                                {
                                                    "objectType":"com.yagna.common.domain.Project",
                                                    "objectId":"3072",
                                                    "expectedEndDate":"",
                                                    "startDate":"2011-06-27 13:06:00.0",
                                                    "name":"Milestone-11",
                                                    "actualEndDate":"",
                                                    "id":"4376",
                                                    "Status":"NOT_STARTED"
                                                }] };  

                                                                                     my Column is 

{id: 'Status',width: 20,text: 'Status',dataIndex: 'Status',filter: {type: 'combobox'},sortable: true, groupable: false,
        editor:{
                allowBlank: true,
                xtype:'combobox',
                valueField:'field1',
                displayField:'field2',
                triggerAction:'all',
                mode: 'local',
                store: [['0','NOT_STARTED'],['1','IN_PROGRESS'],['2','COMPLETED']],
                value:0,
                lazyRender: true
            } },   

                                                   Please suggest what is missing here

Answer 1

"如果当前显示的值与组合存储匹配，则 它应该显示为选中，但它没有显示"

组合框与displayField 值不匹配，它与valueField 值匹配。

像您这样硬编码的组合框数据存储将自动将第一项（例如“1”）作为valueField，将第二项（例如“NOT_STARTED”）作为displayField。

因为没有一个“数字”值（'1'、'2'、'3'）与该列中的值（“NOT_STARTED”、“IN_PROGRESS”、“COMPLETED”）匹配，它不会显示任何内容。

除非我理解错误，否则网格本身的数据存储区似乎包含此“状态”列数据（或您称之为该列的任何内容）作为字符串而不是数字（即“NOT_STARTED”、“IN_PROGRESS”、 “已完成”而不是 1、2、3)。

你可以做两种不同的事情：

最简单：只需将值字段保留为字符串，不要将其设为数字​​。

更难：如果您出于某些（未说明的）原因确实需要将其作为数字：

1. 您更改 grid 数据存储中的数据，以便 all 数据 因为此列是数字 (1,2,3) 而不是字符串。
2. 将renderer 配置添加到此列以将数字显示为 当一行没有被编辑时，适当的字符串。
3. 然后，按照您尝试将数据存储设置为的方式进行操作 [number - string] 对象。此外，如果出现以下情况，请从商店中的报价中取出数字 你会这样做的。

当然，如果您已经在此列中使用renderer 配置，问题可能只是因为您在引号中加上了数字。

希望这一切都有意义。

编辑：

这是代码。

首先，将状态元素放在单独的存储中 - 如下所示：

var statusStore = Ext.create('Ext.data.SimpleStore', {
    fields: ['id', 'status'],
    data : [
        ['0', 'NOT_STARTED'],
        ['1', 'IN_PROGRESS'],
        ['2', 'COMPLETED']
    ]
});

其次，将“status”的值改为你想要的数字字符串（“0”）

var data = {
    root: [{
        "objectType":"com.yagna.common.domain.Project",
        "objectId":"3072",
        "expectedEndDate":"",
        "startDate":"2011-06-27 13:06:00.0",
        "name":"Milestone-11",
        "actualEndDate":"",
        "id":"4376",
        "Status":"0"
    }]
};  

第三，将渲染器添加到您的列配置并将编辑器中指定的存储更改为我们在上面创建的存储（statusStore）。

{
    id: 'Status',
    width: 20,
    text: 'Status',
    dataIndex: 'Status',
    filter: {type: 'combobox'},
    sortable: true, 
    groupable: false,
    // add this renderer
    renderer: function(value) {
        var idx = statusStore.find('id', value)
        var rec = statusStore.getAt(idx);
        return rec.get('status');                    
    },
    editor:{
        allowBlank: true,
        xtype:'combobox',
        valueField:'field1',
        displayField:'field2',
        triggerAction:'all',
        mode: 'local',
        // change this store to refer to the one we created
        store: statusStore,
        value:0,
        lazyRender: true
    }
},       

如果你成功了，别忘了在左边标记答案。