结合组合体使用Roweditor的ExtJS不能正常工作

Question

我有ExtJS网格。我用的是Roweditor插件和combobox。当我单击网格的任何一行时，我可以看到“编辑器与更新”和“取消”按钮。

现在，我面临的问题是，当我单击Row并启用行编辑器时，如果当前显示的值与组合式存储匹配，那么它应该显示为selected，但它没有显示。如果我同时使用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。

因为"number“值('1‘、'2’、'3')与本专栏中的值("NOT_STARTED”、"IN_PROGRESS“、"COMPLETED")都不匹配，所以不会显示任何内容。

除非我错误地理解了这一点，否则它听起来就像是网格本身的数据存储以字符串而不是数字的形式包含这个“状态”列数据(或您称之为此列的任何内容)。"NOT_STARTED"，"IN_PROGRESS"，"COMPLETED“，而不是1，2，3)。

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

最简单：只是将value字段保留为字符串，而不是使其成为数字。

HARDER:如果您确实需要将其作为一个数字，原因如下(未说明)：

edited.

• Then，

1. 您可以更改网格数据存储中的数据，以便将该列的数据改为数字(1,2,3)，而不是字符串。
2. 向该列添加了一个renderer配置，以便在某一行不是时将数字显示为适当的字符串，就像您试图将数据存储设置为[number - string]对象时一样。另外，如果你要这样做的话，把你商店里的报价中的数字取出来。

当然，如果您已经在本专栏中使用了renderer配置，那么问题可能只是引号中有数字。

希望这一切都有意义。

编辑：

这是密码。

首先，将status元素放在单独的存储区中，如下所示：

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
    }
},       

如果这对你有利，别忘了给左边的答案打上记号。