如何从 ExtJS Grid 显示具有不同 Store 的嵌套对象

如何解决如何从 ExtJS Grid 显示具有不同 Store 的嵌套对象

我想对 Ext Grid 上父对象的子对象进行 REST 操作。我需要使用 rowExpander 而不是 rowWidget，因为我使用的是现代工具包。

这是我的 API 中的示例 JSON 数据：

{
  "pagination": {
    "page": 1,"limit": 20,"total": 1,"hasPrevIoUsPage": false,"hasNextPage": false
  },"data": [
    {
      "id": 2,"customer": "Mark","dateRented": "2021-02-09T21:18:40.667","movieRentals": [
        {
          "id": 5,"rentalDetailDtoId": 2,"movie": "Shingeki no Kyojin","dateReturned": null
        },{
          "id": 6,"movie": "Insidous 2","dateReturned": null
        }
      ]
    },{
      "id": 1,"customer": "Samuel","dateRented": "2021-02-09T21:17:18.403","movieRentals": [
        {
          "id": 3,"rentalDetailDtoId": 1,"movie": "Home Alone",{
          "id": 4,"movie": "Neighbors","dateReturned": null
        }
      ]
    }
  ]
}

我想按客户显示它，并且我在 movieRentals 对象上有一个 POST REST 操作。我想使用 RowExpander，但我不确定如何使其工作。

这是我当前的 ExtJS 网格代码：

Ext.define('Vidly.view.rental.displayRentalsView',{
    extend: 'Ext.grid.Grid',xtype: 'displayrentalsview',reference: 'rentallist',title: 'Rental List',controller: 'displayrentalsviewcontroller',viewmodel: 'rentalsviewmodel',reference:'displayrentalsviewgrid',selType: 'rowmodel',selModel:
    {
        mode: 'SINGLE'
    },viewConfig:
    {
        stripeRows: true
    },listeners: {
        selectionchange: 'onSelectionChange',show: 'onShow',},bind: {
        store: '{RentalListStore}'
    },itemConfig: {
        viewmodel: true 
    },plugins: {
        pagingtoolbar: true
    },items: [
        {
            xtype: 'container',docked: 'top',items: [
                {
                    docked: 'left',xtype: 'button',ui: 'decline',itemId: 'returnRental',text: 'Return Rental',reference: 'btnReturnRental',handler: 'onReturnClick',disabled: true,}
            ]
        },],columns: [
        {
            text: "Customer",flex: 1,dataIndex: 'customer',editor:
            {
                allowBlank: false
            },{
            text: "Movie",dataIndex: 'movieRental',{
            text: "Date Rented",dataIndex: 'dateRented',renderer: function (value,MetaData,record) {
                if (value != null && value != "") {
                    var dateRented = new Date(Date.parse(value))
                    return Ext.Date.format(dateRented,'m/d/Y')
                }
                else {
                    return "";
                }
            }
        },{
            text: "Date Returned",dataIndex: 'dateReturned','m/d/Y')
                }
                else {
                    return "";
                }
            }
        }
    ],});

解决方法

当你在 ExtJs 中询问一些东西时提供一个小提琴总是好的

我在这里提供了一个小提琴，希望对您有所帮助

https://fiddle.sencha.com/#view/editor&fiddle/3bpk

Ext.application({
    name: 'Fiddle',launch: function () {
        const store = Ext.create('Ext.data.Store',{
            data: [{
                "id": 2,"customer": "Mark","dateRented": "2021-02-09T21:18:40.667","movieRentals": [{
                    "id": 5,"rentalDetailDtoId": 2,"movie": "Shingeki no Kyojin","dateReturned": null
                },{
                    "id": 6,"movie": "Insidous 2","dateReturned": null
                }]
            },{
                "id": 1,"customer": "Samuel","dateRented": "2021-02-09T21:17:18.403","movieRentals": [{
                    "id": 3,"rentalDetailDtoId": 1,"movie": "Home Alone",{
                    "id": 4,"movie": "Neighbors","dateReturned": null
                }]
            }]
        });

        Ext.create('Ext.grid.Grid',{
            store: store,plugins: {
                rowexpander: true
            },height: 500,width: '100%',itemConfig: {
                body: {
                    tpl: '<ul>' +
                        '<tpl foreach="movieRentals">' +
                        '<li>Movie: {movie}</li>' +
                        '</tpl>' +
                        '</ul>'
                }
            },columns: [{
                text: 'Name',dataIndex: 'customer',width: 200
            },{
                text: 'dateRented',dataIndex: 'dateRented',width: 250
            }],layout: 'fit',fullscreen: true
        });
    }
});

顺便说一下，将这些渲染器移动到您的 viewController 中。重复的代码总是丑陋的 :-)

,

好的，您应该深入了解一下 https://docs.sencha.com/extjs/7.3.1/modern/Ext.grid.Row.html#events

itemConfig: {
  body: {
    tpl: '<p>Hello World</p>',listeners: {
      beforeshow: sender => {
        console.log(sender);
        // Here you can tell your record to fetch data
      }
    }
  }
}

随意演奏小提琴 https://fiddle.sencha.com/#fiddle/3bq5&view/editor