使用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'
}

从Ext JS Combobox API文档(重点添加):

在queryMode:'remote'中,ComboBox根据用户交互动态加载其Store.

这通常用于"自动完成"类型输入,在用户完成输入后,将加载存储.

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