Проблемы с загрузкой хранилища в рендере для поля со списком

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

Я не совсем уверен, почему вам нужно использовать хранилище для заполнения значения в ячейке сетки, потому что вы всегда можете просто отправить текстовое значение через хранилище сетки, в отличие от идентификатора.

У вас, вероятно, есть веская причина для этого, поэтому я пересмотрел скрипку и применил ее соответствующим образом.Вы должны быть в состоянии проверить это здесь

Изменения

.. / app / store / ContrAgents.js

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

.. / app / store / ListViewStore.js

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

.. / app / view / ListView.js

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

Data / List.json

"data" : [
    {"id": 1, "contragent": "2"},
    {"id": 2, "contragent": "3"},
    {"id": 3, "contragent": "4"} 
]

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 Grid

Я нашел хороший пример того, чего вы пытаетесь достичь с помощью выпадающего списка в сетке с удаленным магазином, посмотрите этот пост (возможно, вам придется зарегистрироваться бесплатно, но решение того стоит иЗдесь я не буду заниматься плагиатом)

Сетка с комбинированным виджетом редактирования с привязкой

Возможно, это может помочь ...

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