Question

我刚刚开始学习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();

}）;

Answer 1

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

letsencrypt

然后您想要一个名为onSelectMainGrid或类似功能的函数

label1: WHILE income <= 3000 DO
SET income = income + starting_value;
END WHILE label1;

，在此函数中，您要从相关网格中获取存储，并要在它们上调用.load（）函数。对于依赖网格的商店的代理，请使用配置 extraParams：{} https://docs.sencha.com/extjs/6.5.3/modern/Ext.data.Connection.html#cfg-extraParams并将从主网格中选择的内容绑定到从属网格的extraParams上。然后在依赖网格的存储上调用方法.load（）。您依赖的网格的存储将类似于

listeners: {
    select: "onSelectMainGrid",
},

我注意到您在同一文件中拥有所有代码。强烈建议您将代码分为视图，viewModels和viewControllers。

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

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

Answer 2

我这样做了（缩短了代码以更好地理解）：

<td app-addBin></td>

当我单击网格中的一行时，浏览器控制台显示错误： GET http://127.0.0.1:8000/hello_extjs/data?model=Tovary&method=Read&code_tv=&page=1&start=0&limit=10&callback=Ext.data.JsonP.callback2 500（内部服务器错误）

此错误的原因是什么？是否正确理解我现在需要推断出第二个Ext.grid.Panel，其中显示的是“ Tovary”模型的数据？

创建依赖的extjs网格

2 个答案: