Question

我定义了一个窗口，包括一个表单和一些字段和组合框。例如

    Ext.define('Ext.example.ABC', {
        extend: 'Ext.window.Window',   
        items:{
            xtype:'form',
            items:[
            {
            xtype: 'combo',
            id: 'example',
            name: 'ax',
            triggerAction:  'all',
            forceSelection: true,
            editable:       false,
            allowBlank: false,
            fieldLabel:     'example',
            mode: 'remote',
            displayField:'name',
            valueField: 'id',
            store: Ext.create('Ext.data.Store', {
                            fields: [
                                {name: 'id'},
                                {name: 'name'}
                            ],
                            autoLoad: true,
                            proxy: {
                                type: 'ajax',
                                url: 'example.php',
                                reader: {
                                    type: 'json',
                                    root: 'rows'
                                }
                            }
                }
            })
            }]
         }
         ,load: function(a) {
              // do some thing
         }
});

我在网格面板中有一个按钮

tbar:[
        {    
            text:'create',
            handler:function(){
                         var x = new Ext.example.ABC();
                 x.load(0);

            }
        }

但是为什么当我刚刚启动gridpanel然后combo也加载而我没有点击按钮创建。
我有很多组合框，这使我的网格面板加载缓慢:(
我如何解决这个问题

Answer 1

我猜你需要为你的组合框autoLoad: false设置store配置选项。

关于你的评论 - 我已经创建了一个例子。您可以在jsFiddle上查看它是在ExtJs 3.4上创建的，但我认为对于4.x它将没有太大差异。

var arrTestData = [
    ['AL', 'Alabama', 'The Heart of Dixie'],
    ['AK', 'Alaska', 'The Land of the Midnight Sun'],
    ['AZ', 'Arizona', 'The Grand Canyon State'],
    ['AR', 'Arkansas', 'The Natural State'],
    ['CA', 'California', 'The Golden State']
];

var combosCount = 5;
var arrItems = [];
for (var i = 0; i < combosCount; i++) {
    var comboId = Ext.id();

    // simple array store
    var store = new Ext.data.ArrayStore({
        parentCombo: comboId,
        fields: ['abbr', 'state', 'nick'],
        data : []
    });

    store.on('load', function() {
        var combo = Ext.getCmp(this.parentCombo);
        combo.setValue(combo.defaultValue);
    });

    var combo = new Ext.form.ComboBox({
        id: comboId,
        fieldLabel: 'Combobox #' + (i + 1),
        store: store,
        displayField:'state',
        valueField:'abbr',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a state...',
        defaultValue: arrTestData[i][0],
        selectOnFocus:true
    });
    arrItems.push(combo);
}

var formPanel = new Ext.form.FormPanel({
    bodyStyle: 'padding:5px;',
    items: arrItems,
    renderTo: 'combos-container'
});


new Ext.Button({
    text: 'Do all cool things',
    renderTo: 'combos-btn',
    handler: function() {
        var arrCombos = formPanel.findByType('combo');
        Ext.each(arrCombos, function(combo){
            combo.getStore().loadData(arrTestData);
        });
    }
});

那我们在那里做什么：
1.对于每个商店，我们将保存父组合框ID - 这是识别相关组合框所必需的 2.对于每个组合框，我们保存自己的参数 - defaultValue。这是我们想要在加载商店后设置为默认值 3.倾听“加载”＃39; event并设置组合的默认值。

我希望这是你在等待的东西：）

Answer 2

拥有autoLoad:false并手动加载商店以获取默认值。当你真的想要加载商店时，你可以做到

store.load()

会将商店加载为默认值。

Extjs Combo - 为什么组合正在加载，而我还没有创建表单包括组合

2 个答案: