Question

我有一个简单的组合框内的在线商店。这个商店有一些默认的内联数据。现在我正在寻找一个在创建商店后被解雇的事件，而这个事件需要为我提供商店中的数据。

我试过这样：

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    store: {
        autoLoad: true,
        fields: [
            {name: 'name', type: 'string'}
        ],
        data : [
            {"name":"TestName_A"},
            {"name":"TestName_B"},
            {"name":"TestName_C"},
        ],
        listeners: {
            load: function(store) {
                let records = store.getData()
                records.forEach(record => {
                    console.log(record.getField('name'))
                })
            }
        }
    },
    queryMode: 'local',
    valueField: 'name',
    displayField: 'name',
    renderTo: Ext.getBody()
});

但它不起作用。 store.getData()似乎不包含我的记录。

我的小提琴： https://fiddle.sencha.com/?fiddle=v7#fiddle/1h53

Answer 1

我终于设法通过在呈现组合框之后访问商店来解决问题： https://fiddle.sencha.com/?fiddle=v7#fiddle/1h7c

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    store: {
        autoLoad: true,
        fields: [
            {name: 'name', type: 'string'}
        ],
        data : [
            {"name":"TestName_A"},
            {"name":"TestName_B"},
            {"name":"TestName_C"},
        ],
    },
    queryMode: 'local',
    valueField: 'name',
    displayField: 'name',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function(me) {
            let store = me.getStore()
            console.log("Event fired!")
            store.each(record => {
                console.log(record.get('name'))
            })
        }
    },
});

Answer 2

您可以通过创建组合框的商店后整理并将商店设置为组合框来轻松完成此操作。

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    queryMode: 'local',
    valueField: 'name',
    displayField: 'name',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function(me) {

            var store = Ext.create('Ext.data.Store', {
                autoLoad: true,
                fields: [
                    {name: 'name', type: 'string'}
                ],
                data : [
                    {"name":"TestName_A"},
                    {"name":"TestName_B"},
                    {"name":"TestName_C"},
                ],
                listeners: {
                    load: function(store) {
                        Ext.each(store.data.items,function(rec){
                           console.log(rec.data.name); 
                        });
                    }
                }
            });
            me.setStore(store);
        }
    },
});

Answer 3

现在使用此商店显示控制台数据：

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    queryMode: 'local',
    valueField: 'name',
    displayField: 'name',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function(me) {

            var store = Ext.create('Ext.data.Store', {
                //autoLoad: true,
                fields: [
                    {name: 'name', type: 'string'}
                ],
                data : [
                    {"name":"TestName_A"},
                    {"name":"TestName_B"},
                    {"name":"TestName_C"},
                ],
                listeners: {
                    datachanged : function(store) {
                        Ext.each(store.data.items,function(rec){
                           console.log(rec.data.name); 
                        });
                    }
                }
            });
            me.setStore(store);
            store.load();
        }
    },
});

ExtJs：获取商店创建的商店数据

3 个答案: