使用EXTjs预先加载组合框的项目

Question

我有一个从商店加载组合框的项目，但是当要显示组合框项目列表时会发生这种情况，因为用户点击了“展开它”，它必须“重新加载”数据来自商店代理。这会导致列表闪烁并变为未选中状态，迫使用户再次单击下拉列表。

第1步（在页面加载时）：

单击单元格进行编辑：

单击组合框中的向下箭头。同样，此ajax调用强制组合框自动关闭，强制用户重新单击向下箭头。

查看

Ext.define('AM.view.card.BacklogList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.backlogcardlist',

    title: 'Backlog',
    store: 'BacklogCards',

    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],

    columns: [
        { header: 'ID', dataIndex: 'id' },
        { header: 'Name', dataIndex: 'name', field: 'textfield' },
        {
            header: 'Priority',
            dataIndex: 'priority_id',
            renderer: function(value){
                if (value==3)
                {
                    return "L";
                }
                else if (value==2)
                {
                    return "M";
                }
                else
                {
                    return "H";
                }
            },
            width: 130,
            field: {
                xtype: 'combobox',
                typeAhead: true,
                store: 'Priorities',
                displayField: 'name',
                valueField: 'id',
                listClass: 'x-combo-list-small'
            }
        }
    ]

});

商店：

Ext.define('AM.store.Priorities', {
    extend: 'Ext.data.Store',
    model: 'AM.model.Priority',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'app/data/priorities.json',
            update: 'app/data/updateUsers.json'
        },
        reader: {
            type: 'json',
            root: 'priorities',
            successProperty: 'success'
        }
    }
});

priorities.json

{
    success: true,
    priorities: [
        {
            id              : 1, 
            name            : "High",
            short_name      : "H"
        },
        {
            id              : 2, 
            name            : "Medium",
            short_name      : "M"
        },
            {
            id              : 3, 
            name            : "Low",
            short_name      : "L"
        }
    ]
}

Answer 1

我相信你需要做的是在组合框字段配置上设置queryMode：“local”。

field: {  
xtype: 'combobox',  
queryMode: 'local',  
typeAhead: true,  
store: 'Priorities',  
displayField: 'name',  
valueField: 'id',  
listClass: 'x-combo-list-small'
}

来自the Ext JS Combobox API documentation (emphasis added)：

  

在queryMode：'remote'中，ComboBox根据用户交互动态加载其Store。

  这通常用于“自动填充”类型输入，在用户完成输入后，加载商店。

您将商店的autoLoad设置为true，这意味着您不应该遇到queryModel是本地的问题，因为您的数据应该在创建时已经存储在商店中。我会说我没有去挖掘足以解释这种行为，也许其他人可以详细说明组合框的错综复杂。