Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.08.2018, 23:17
Аспирант
Отправить личное сообщение для Ambassador Посмотреть профиль Найти все сообщения от Ambassador
 
Регистрация: 12.11.2015
Сообщений: 47

Создание зависимых гридов 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();

});
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2018, 14:28
Интересующийся
Отправить личное сообщение для Swat2k Посмотреть профиль Найти все сообщения от Swat2k
 
Регистрация: 15.08.2017
Сообщений: 16

https://fiddle.sencha.com/#view/editor&fiddle/2l1h , и старайтесь делать пример на fiddle
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2018, 19:31
Аспирант
Отправить личное сообщение для Ambassador Посмотреть профиль Найти все сообщения от Ambassador
 
Регистрация: 12.11.2015
Сообщений: 47

Сообщение от Swat2k Посмотреть сообщение
https://fiddle.sencha.com/#view/editor&fiddle/2l1h , и старайтесь делать пример на fiddle
Спасибо большое за помощь.
Я уже разобрался как реализовать зависимые гриды.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Утечки памяти в ExtJS alexey91 ExtJS 1 28.03.2016 22:02
Вакансия Javascript-программист (ExtJs разработчик) Nevskaya Работа 0 14.10.2015 01:13
Создание Ext.form.field.Text в extjs 4 zayats77 ExtJS 3 26.08.2011 11:26
Москва, ищу JavaScript программиста отлично знающего ExtJS, от 10 USD / час. maximgb Работа 3 03.08.2010 14:34
создание формы в extjs underW ExtJS 4 16.03.2010 12:22