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

【问题标题】：Is it possible to get a combox reference from a store? ExtJS 6是否可以从商店获取组合框参考？ ExtJS 6
【发布时间】：2021-09-16 19:37:18
【问题描述】：

以下场景：

                          {
                                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()？我知道通常您只能从组合框中获取商店引用。但我想如果商店是在组合框中创建的，也许它也可以反过来工作？

【问题讨论】：

据我所知，我们无法从 store 中获取组件，因为单个 store 可以在多个组件中使用，并且每个组件中的所有这些 store 副本都是相同的。所以简而言之，这是不可能的。为什么要使用这个store.getCombo()？

标签： javascript extjs combobox store

【解决方案1】：

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

您可以通过覆盖 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

【讨论】：

【解决方案2】：

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

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

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

{
    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;
    }
}

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

【讨论】：