ExtJs：在商店创建时获取商店数据答案

【问题标题】：ExtJs: Get store data on store creationExtJs：在商店创建时获取商店数据
【发布时间】：2016-09-29 21:37:53
【问题描述】：

我有一个在线商店，它位于一个简单的组合框内。这个商店有一些默认的内联数据。现在我正在寻找一个在商店创建后触发的事件，并且该事件需要向我提供商店中的数据。

我试过这样：

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

【问题讨论】：

将您的 load() 函数中的代码更改为 store.getData().items 以接收您的记录。
它返回一个空数组，过了一会儿这个空数组突然包含了 3 个构造函数。什么？ fiddle.sencha.com/?fiddle=v7#fiddle/1h74（当调试器断点被命中时，数组为空。恢复执行后，它包含一个构造函数数组。）
如果要迭代存储记录，请使用store.each。同样getField 返回一个字段配置，你可能想要get。
我什么也没得到：fiddle.sencha.com/?fiddle=v7#fiddle/1h79

标签： javascript events extjs store

【解决方案1】：

现在使用这个存储显示控制台数据：

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();
        }
    },
});

【讨论】：

【解决方案2】：

我终于设法通过在呈现组合框后访问商店来解决问题： 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'))
            })
        }
    },
});

【讨论】：

【解决方案3】：

您可以通过创建组合框的 store afterrender 并将 store 设置为组合框来轻松做到这一点。

Ext.create('Ext.form.ComboBox', { fieldLabel：'选择'，查询模式：'本地'，值字段：'名称'，显示字段：'名称'， renderTo: Ext.getBody(), 听众：{ 后渲染：功能（我）{ var store = Ext.create('Ext.data.Store', { 自动加载：真，字段：[ {名称：'名称'，类型：'字符串'} ], 数据： [ {"name":"TestName_A"}, {"name":"TestName_B"}, {"name":"TestName_C"}, ], 听众：{ 加载：函数（存储）{ ext.each(store.data.items,function(rec){ 控制台.log(rec.data.name); }); } } }); 我.setStore（商店）； } }, });

【讨论】：

那行不通。没有任何东西打印到控制台。
那是因为当您使用代理时，存储负载正在工作。在您的情况下，存储数据是静态的。这就是不调用 load 函数的原因。
只评论 autoLoad:true;并在 me.setStore(store); 之后添加 store.load();