Ext.js5（关联数据插件）（SubTable）(23)

view

/**
 * This example uses the `Ext.grid.plugin.SubTable` plugin to display associated records
 * 使用Ext.grid.plugin.SubTable插件来显示关联数据
 * in tabular form below grid rows. The plugin is configured with an `association` property
 * which specifies which associated record collection to display and a `columns` property
 * specifying which fields from the associated records should be displayed.
 */
Ext.define('KitchenSink.view.grid.CustomerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customer-grid',

    requires: [
        'Ext.ux.grid.SubTable',
        'KitchenSink.model.Order',
        'KitchenSink.model.Customer'
    ],

    title: 'Customers',
    width: 700,
    height: 400,


    constructor: function(config) {
        config = Ext.apply({
            plugins: {
                ptype: "subtable",
                association: 'orders',// 指定记录集合和列属性
                headerWidth: 24,
                columns: [{
                    text: 'Order Id',
                    dataIndex: 'id',
                    width: 100
                },{
                    xtype: 'datecolumn',
                    format: 'Y-m-d',
                    width: 120,
                    text: 'Date',
                    dataIndex: 'date'
                }]
            }
        }, config);
        this.callParent([config]);
    },

    initComponent: function() {
        Ext.apply(this, {
            store: {
                autoLoad: true,
                proxy: {
                    type: 'memory',
                    data: [{
                        "id": 1,
                        "name": "Bread Barn",
                        "phone": "8436-365-256",
                        "orders": [{
                            "id": 1,
                            "date": "2010-08-13",
                            "customerId": 1
                        }, {
                            "id": 2,
                            "date": "2010-07-14",
                            "customerId": 1
                        }]
                    }, {
                        "id": 2,
                        "name": "Icecream Island",
                        "phone": "8452-389-719",
                        "orders": [{
                            "id": 3,
                            "date": "2010-01-22",
                            "customerId": 2
                        }, {
                            "id": 4,
                            "date": "2010-11-06",
                            "customerId": 2
                        }]
                    }, {
                        "id": 3,
                        "name": "Pizza Palace",
                        "phone": "9378-255-743",
                        "orders": [{
                            "id": 5,
                            "date": "2010-12-29",
                            "customerId": 3
                        }, {
                            "id": 6,
                            "date": "2010-03-03",
                            "customerId": 3
                        }]
                    }]
                },
                model: 'KitchenSink.model.Customer'
            },
            columns: [{
                text: 'Id',
                dataIndex: 'id'
            },{
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                hideable: false
            }, {
                width: 140,
                text: 'Phone',
                dataIndex: 'phone'
            }]
        });
        this.callParent();
    }
});

model

Ext.define('KitchenSink.model.Order', {
    extend: 'KitchenSink.model.Base',

    fields: [
        { name: 'date', type: 'date', dateFormat: 'Y-m-d' },
        'shipped',
        { 
            name: 'customerId',
            reference: {
                parent: 'Customer'
            }
        }
    ],

    proxy: {
        type: 'rest',
        url: '/KitchenSink/Order'
    }
});

model

Ext.define('KitchenSink.model.Customer', {
    extend: 'KitchenSink.model.Base',
    requires: [
        "KitchenSink.model.field.PhoneNumber"
    ],

    fields: [
        'name',
        { name: 'phone', type: 'phonenumber' }
    ],

    proxy: {
        type: 'rest',
        url: '/KitchenSink/Customer'
    },

    validators: {
        name: 'presence'
    }
});