Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Создание зависимых гридов extjs (https://javascript.ru/forum/extjs/75025-sozdanie-zavisimykh-gridov-extjs.html)

Ambassador 26.08.2018 22:17

Создание зависимых гридов extjs
 
Здравствуйте.
Коллеги, только начал изучать extjs 6.
Подскажите,пож-та, каким образом реализовать зависимые гриды когда основной выводит данные из таблицы, при нажатии на которые, во втором гриде отображаются зависимые записи из второй таблицы.
Что мною реализовано на данный момент:
Создал грид, получаю записи из таблицы Operation, к бд обращаюсь при помощи CRUD.
В таблице Operation, все записи связаны со второй таблицей (numoperation) по полю code.
Мне требуется что бы при нажатии на запись основного грида, который уже создан, получать зависимые записи из таблицы numoperation во втором гриде.
Как в общем это можно реализовать?
Буду рад если поделитесь полезными ссылками, советами или примерами.
Заранее спасибо.
Ниже приводу код клиентской части приложения:

Ext.onReady(function () {
    // Придумаем простую модель данных
    Ext.define('Operation', {
        extend: 'Ext.data.Model',
        idProperty: 'id',
        fields: [
            { name: 'id', type: 'int' },
            'date_op',
            'code',
            'status',
            'type'
        ]
    });

    var urlRoot = 'data?model=Operation&method=';
    // Хранилище для данных таблицы Operation
    var registrStore = Ext.create('Ext.data.Store', {
        model: 'Operation',
        pageSize: 10,
        proxy: {
             type: 'jsonp',
            noCache: false,
            api: {
                create:     urlRoot + 'Create',
                read:       urlRoot + 'Read',
                update:     urlRoot + 'Update',
                destroy:    urlRoot + 'Destroy'
            },
            reader: {
                type: 'json',
                metaProperty: 'meta',
                root: 'data',
                idProperty: 'id',
                totalProperty: 'meta.total',
                successProperty: 'meta.success'
            },
            writer: {
                type: 'json',
                encode: true,
                writeAllFields: true,
                root: 'data',
                allowSingle: false,
            }
        }
    });

    // Ввод и редактирование строки, определение параметров для Get запроса
    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 2,
        autoCancel: false,
        listeners: {
            edit: function (editor, context) {
                var emp = registrStore.getProxy();
                var con = context.record;
                emp.setExtraParam("id",                     con.data['id']);
                emp.setExtraParam("date_operation",         con.data['date_operation']);
                emp.setExtraParam("code",                   con.data['code']);
                emp.setExtraParam("status",                 con.data['status']);
                emp.setExtraParam("type",                   con.data['type']);               
            }
        }
    });

    // Настройка типа полей для столбцов
    var textField = {
        xtype: 'textfield'
       
    };

    // Определение столбцов
    var columns = [
        {
            header: 'ID',
            dataIndex: 'id',
            sortable: true,
            width: 35
        },
        {

            header: 'Дата',
            dataIndex: 'date_op',
            sortable: true,
            editor: textField
           
        },
        {
             header: 'Код',
             dataIndex: 'code',
             sortable: true,
             editor: textField
        },
        {
            header: 'Статус',
            dataIndex: 'status',
            sortable: true,
            editor: textField
        },
        {
            header: 'Тип',
            dataIndex: 'type',
            sortable: true,
            editor: textField
        }
    ];
    // Определение нижней панели управления
    var pagingToolbar = {
        xtype: 'pagingtoolbar',
        store: registrStore,
        displayInfo: true,
        items: [
            '-',
            {
                text: 'Save Changes',
                handler: function () {
                registrStore.sync();
                }
            },
            '-',
            {
                text: 'Reject Changes',
                handler: function () {
                    // Отмена изменений в stoe
                    registrStore.rejectChanges();
                }
            },
            '-'
        ]
    };
    // Удаление записей в grid
    var onDelete = function () {
        var selected = grid.selModel.getSelection();
        Ext.MessageBox.confirm(
                'Confirm delete',
                'Are you sure?',
                function (btn) {
                    if (btn == 'yes') {
                        var nn = selected[0].get('id')
                        var emp = registrStore.getProxy();
                        emp.setExtraParam("id", nn)
                        grid.store.remove(selected);
                        grid.store.sync();
                    }
                }
        );
    };

    // Вставка записей в Grid
    var onInsertRecord = function () {
        var selected = grid.selModel.getSelection();
        rowEditing.cancelEdit();
       var newEmployee = Ext.create("Operation");
       registrStore.insert(selected[0].index, newEmployee);
       rowEditing.startEdit(selected[0].index, 0);

    };
    // Контекстное меню
    var doRowCtxMenu = function (view, record, item, index, e) {
        e.stopEvent();
        if (!grid.rowCtxMenu) {
            grid.rowCtxMenu = new Ext.menu.Menu({
                items: [
                    {
                        text: 'Insert Operation',
                        handler: onInsertRecord

                    },
                    {
                        text: 'Delete Operation',
                        handler: onDelete
                    }
                ]
            });
        }
        grid.selModel.select(record);
        grid.rowCtxMenu.showAt(e.getXY());
    };

    // Grid панель
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Таблица операций',
        items: grid,
        columns: columns,
        store: registrStore,
        loadMask: true,
        bbar: pagingToolbar,
        plugins: [rowEditing],
        stripeRows: true,
        selType: 'rowmodel',
        viewConfig: {
            forceFit: true
        },
        listeners: {
            itemcontextmenu: doRowCtxMenu,
            destroy: function (thisGrid) {
                if (thisGrid.rowCtxMenu) {
                    thisGrid.rowCtxMenu.destroy();
                }
            }
        },
        renderTo: Ext.getBody()

    });
    registrStore.load();

});

Swat2k 03.09.2018 13:28

https://fiddle.sencha.com/#view/editor&fiddle/2l1h , и старайтесь делать пример на fiddle

Ambassador 05.09.2018 18:31

Цитата:

Сообщение от Swat2k (Сообщение 493862)
https://fiddle.sencha.com/#view/editor&fiddle/2l1h , и старайтесь делать пример на fiddle

Спасибо большое за помощь.
Я уже разобрался как реализовать зависимые гриды.


Часовой пояс GMT +3, время: 07:40.