时间戳

首页 > 解决方案 > 创建依赖的 extjs 网格

javascript - 创建依赖的 extjs 网格

问题描述

我刚开始研究extjs 6。当主显示来自表的数据时，如何实现依赖网格，当点击时，在第二个网格中显示来自第二个表的依赖条目。

我现在意识到：我创建了一个网格，我从“操作”表中获取记录，我使用 CRUD 调用它。在“操作”表中，所有条目都与代码字段中的第二个表（numoperation）相关联。

我需要在按下已经创建的主网格的记录时，从第二个网格中的表 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=';

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


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();
            }
        },
        '-'
    ]
};

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


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


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

});

标签： javascriptdjangouser-interfaceextjs

解决方案

您可能想要做的是在监听事件的主网格上添加一个监听器：select。 https://docs.sencha.com/extjs/6.5.3/modern/Ext.grid.Grid.html#event-select

listeners: {
    select: "onSelectMainGrid",
},

那么你想要一个名为 onSelectMainGrid 或类似的函数

var onSelectMainGrid : function(grid, selectedItem) {
. . . 
}

在这个函数中，你想从依赖网格中获取存储，并且你想在它们上调用 .load() 函数。对于依赖网格的存储代理，请使用配置extraParams：{} https://docs.sencha.com/extjs/6.5.3/modern/Ext.data.Connection.html#cfg-extraParams并绑定主选项网格到依赖网格的 extraParams。然后在依赖网格的存储上调用方法 .load() 。您的依赖网格的存储看起来像

var dependentGridStore = Ext.create('Ext.data.Store', {
model: 'OperationDependent',
pageSize: 10,
proxy: {
     type: 'jsonp',
    noCache: false,
    extraParams: {          // <==THIS IS NEW
      valueFromMainGrid: '{selectedValueFromMainGrid}'
    }
    api: {
        create:     urlRoot + 'Create',
        read:       urlRoot + 'Read',
        update:     urlRoot + 'Update',
        destroy:    urlRoot + 'Destroy'
    },
    reader: {
        type: 'json',
     . . .
     . . .
});

我注意到您将所有代码都放在同一个文件中。强烈建议您将代码分成视图、视图模型和视图控制器。

最后一件事，如果你不使用 viewModel 进行数据绑定，或者在 onSelectMainGrid 函数中，因为你传递了 selectedItem 参数，你可以只获取依赖网格，然后获取它的存储，然后获取它的代理，然后然后将 extraParams 设置为作为参数传递给函数的 selectedItem。

如果您需要任何澄清，请告诉我。

推荐阅读