Question

我的字段如下：

...

{
            xtype: 'gridcolumn',
            text: 'MyField',
            dataIndex: 'contragent',
            editor: {
                xtype: 'combobox',
                allowBlank: false,
                displayField:'name',
                valueField:'id',
                queryMode:'remote',
                store: Ext.data.StoreManager.get('ContrAgents')
            },
            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                store_ca = Ext.data.StoreManager.get('ContrAgents');             
                if (record.data.contragent != ''){
                    store_ca.load();
                    var contr = store_ca.getById(record.data.contragent);
                    //indexInStore = store_ca.findExact('id', value);
                    console.log(contr);
                    return contr.data.name;
                }
            }
        },

...

存储“ ContrAgents”看起来像这样：

Ext.define('BookApp.store.ContrAgents', {
    extend: 'Ext.data.Store',
    model: 'BookApp.model.ContrAgents',
    autoLoad: true, 
    proxy: {
            type: 'ajax',            
            url: 'app/data/Contragents.json'            
        }
});

问题在于未返回必填字段的名称（contr.data.name），contr为空。

显然商店没有时间加载，在这种情况下，我需要加载它，但是store_ca.load ()不会带来结果。如何正确加载商店以使用

store_ca.getById (record.data.contragent);返回字段名称？

Answer 1

我不确定您为什么需要使用商店来填充网格单元格中的值，因为您始终可以通过网格商店（而不是ID）发送文本值。

您可能有这样做的充分理由，因此我重新审视了小提琴并相应地实现了它。您应该可以检出here

更改

../ app / store / ContrAgents.js

<20 new auto-negotiating client connection
20: Client using the ascii protocol
<20 set :1:1/graph 1 3600 130678 
>20 STORED
<20 delete :1:2/graph
>20 NOT_FOUND
<20 delete :1:3/graph
>20 NOT_FOUND

../ app / store / ListViewStore.js

Ext.define('Fiddle.store.ContrAgents', {
    extend: 'Ext.data.Store',
    model: 'Fiddle.model.ContrAgents',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'Contragents.json'
    }
});

../ app / view / ListView.js

Ext.define('Fiddle.store.ListViewStore', {
    extend: 'Ext.data.Store',
    model: 'Fiddle.model.ListViewModel',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'List.json'
    }
});

Data / List.json

Ext.define('Fiddle.view.ListView' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.booklist',
    itemId: 'BookList',
    store: 'ListViewStore',
    xtype: 'listview',
    plugins: 'gridfilters',

    initComponent: function() {
        var me = this;

        // Pin an instance of the store on this grid
        me.myContrAgents = Ext.data.StoreManager.lookup('ContrAgents');

        // Manually load the 'ContrAgents' first
        me.myContrAgents.load(function(records, operation, success) {
            // Now load the 'ListViewStore' store
            me.getStore().load();
        });

        me.columns = [
            {
                header: 'ID',
                dataIndex: 'id',
                sortable: true,
                width: 35
            },
            {
                text: 'Контрагент',
                dataIndex: 'contragent',
                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                    if (value > 0) {
                        if (rec = me.myContrAgents.findRecord('id', value)) {
                            return rec.get('name');
                        }
                    }
                    return '';
                }
            }
        ];
        me.callParent(arguments);
    }
});

Answer 2

您正在尝试在实际填充数据之前查询商店。您希望避免每次触发渲染器事件时都加载商店。

Ext.data.Store-> load函数是异步的

请参见docs

store.load({
    scope: this,
    callback: function(records, operation, success) {
        // the operation object
        // contains all of the details of the load operation
        console.log(records);
    }
});

将您的实现更改为此，并测试其是否有效

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    store_ca = Ext.data.StoreManager.get('ContrAgents');             
    if (record.data.contragent != ''){
        store_ca.load(function(records, operation, success) {
            console.log('loaded records');
            var contr = store_ca.getById(record.data.contragent);
            indexInStore = store_ca.findExact('id', value);
            console.log({
                contr: contr,
                indexInStore: indexInStore
            });
        });

        // Not sure what you are trying to return here
        // return contr.data.name;
    }
}

ExtJS网格示例中的远程组合

我找到了一个很好的例子，说明了您要在此处完成的一项工作，可以在带有远程存储的网格中使用组合下拉菜单，查看this post（您可能必须免费注册，但是解决方案值得这样做，我不会在这里窃它）

带有带有绑定的组合编辑小部件的网格

也许这可以帮助...

Ext.define('Fiddle.view.ListView' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.booklist',
    itemId: 'BookList',
    store: 'ListViewStore',
    xtype: 'listview',
    plugins: ['cellediting','gridfilters'],


    initComponent: function() {
        this.columns = [
            {
                header: 'ID',
                dataIndex: 'id',
                sortable: true,
                width: 35
            },
            {
                text: 'Контрагент',
                width: 150,
                xtype: 'widgetcolumn',
                dataIndex: 'contragent',
                widget: {
                    xtype: 'combo',
                    bind: '{record.contragent}',
                    allowBlank: false,
                    displayField: 'name',
                    valueField: 'id',
                    store: Ext.data.StoreManager.lookup('ContrAgents')
                }
            }
        ];

        this.callParent(arguments);
    }
});

在组合框字段的渲染器中加载存储时出现问题

2 个答案: