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

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() 好像没有我的记录。

这是我的 fiddle： 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：获取有关商店创建的商店数据

ExtJs: Get store data on store creation

javascript

events

extjs

store