是否可以从商店获取组合框参考? ExtJS 6

Is it possible to get a combox reference from a store? ExtJS 6

以下场景:

                          {
                                xtype: 'combo',
                                displayField: 'LANGTEXT',
                                valueField: 'KURZTEXT',
                                store: {
                                    remoteSort: false,
                                    autoLoad: false,
                                    pageSize: 999999,
                                    fields: [
                                        { name: 'KURZTEXT', type: 'string' },
                                        { name: 'LANGTEXT', type: 'string' }
                                    ],
                                    proxy: {
                                        type: 'ajax',
                                        url: 'callHandler.cfc',
                                        actionMethods: { read: 'POST' },
                                        reader: {
                                            type: 'json',
                                            rootProperty: 'DATA.ROWS',
                                            totalProperty: 'TOTALCOUNT'
                                        }
                                        
                                    },
                                    listeners: {
                                        load: function(store, records, successful, operation, eOpts ){
                                            //is something like this possible?
                                            var combo = store.getCombo()
                                            
                                        }
                                    }
                                }                      
                            }

是否可以使用类似以下内容从商店获取组合框引用:store.getCombo()?我知道通常您只能从组合框中获取商店参考。但我想如果商店是在组合框中创建的,也许它也可以反过来工作?

我能想到的唯一解决方案是编写自定义匹配器函数。

您可以通过覆盖 Ext.Component 并像这样添加匹配器函数来做到这一点:

    Ext.override(Ext.Component, {
        hasStoreId: function (storeId) {
            if (Ext.isFunction(this.getStore) && this.getStore().storeId) {
                return this.getStore().storeId === storeId;
            }
            return false;
        }
    });

现在您已经为每个组件提供了一个匹配器函数,您可以像这样搜索具有给定 storeId 的所有组件:

Ext.ComponentQuery.query("{hasStoreId('mystore')}");

您也可以更精确,只搜索符合条件的组合,如下所示:

Ext.ComponentQuery.query("combo{hasStoreId('mystore')}");

现在您已经拥有所有具有给定 storeId 的组合,您应该能够轻松地检索到您需要的组合。

这里是一个带有工作示例的 Sencha fiddle: example code

您可能需要检查组合框 afterQuery 模板方法。

这是组合框组件可用的配置,其工作方式与商店的加载事件几乎相似。在这里您可以访问组合框组件和商店。

我认为缺点是:只有在单击组合触发器或在组合的文本字段中键入值时才会调用它。如果您想在这些事件之后进行 post 处理,我相信这已经有所帮助。

{
    xtype: 'combo',
    displayField: 'LANGTEXT',
    valueField: 'KURZTEXT',
    store: {
        remoteSort: false,
        autoLoad: false,
        pageSize: 999999,
        fields: [
            { name: 'KURZTEXT', type: 'string' },
            { name: 'LANGTEXT', type: 'string' }
        ],
        proxy: {
            type: 'ajax',
            url: 'callHandler.cfc',
            actionMethods: { read: 'POST' },
            reader: {
                type: 'json',
                rootProperty: 'DATA.ROWS',
                totalProperty: 'TOTALCOUNT'
            }
            
        }
    },

    afterQuery: function (queryPlan) {
        var combo = queryPlan.combo; // I guess `var combo = this;`  should work too..
        var store = combo.getStore();


        // always return queryPlan
        return queryPlan;
    }
}

如果您有任何问题或疑问,请告诉我。