如何在extJS子表中插入复选框列

时间:2018-10-07 15:35:41

标签: javascript extjs

我在网格中使用了一个子表。我想要的是子表中的复选框列,但是没有发生。 这是我的提琴手和代码。在这里,我正在创建一个使用插件和使用子表的网格。当我单击扩展按钮时,我的子目录正在打开,并且记录正在显示。我要在第一个专题讨论会之前打勾

Ext.define('SubTable.model.Base', {
    extend: 'Ext.data.Model',
    schema: {
        namespace: 'SubTable.model'
    }
});

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

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

Ext.define('SubTable.model.Customer', {
    extend: 'SubTable.model.Base',

    fields: [
        'name'
    ]
});


Ext.define('SubTable.view.grid.CustomerGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.customer-grid',

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

    title: 'Customers',
    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",
                        "orders": [{
                            "id": 1,
                            "date": "2010-08-13",
                            "customerId": 1
                        }, {
                            "id": 2,
                            "date": "2010-07-14",
                            "customerId": 1
                        }]
                    }, {
                        "id": 2,
                        "name": "Icecream Island",
                        "orders": [{
                            "id": 3,
                            "date": "2010-01-22",
                            "customerId": 2
                        }, {
                            "id": 4,
                            "date": "2010-11-06",
                            "customerId": 2
                        }]
                    }, {
                        "id": 3,
                        "name": "Pizza Palace",
                        "orders": [{
                            "id": 5,
                            "date": "2010-12-29",
                            "customerId": 3
                        }, {
                            "id": 6,
                            "date": "2010-03-03",
                            "customerId": 3
                        }]
                    }, {
                        "id": 4,
                        "name": "Example X",
                        "orders": [{
                            "id": 7,
                            "date": "2014-06-05",
                            "customerId": 4
                        }, {
                            "id": 8,
                            "date": "2014-06-05",
                            "customerId": 4
                        }]                        
                    },{
                        "id": 5,
                        "name": "Example X",
                        "orders": [{
                            "id": 9,
                            "date": "2014-06-05",
                            "customerId": 5
                        }, {
                            "id": 10,
                            "date": "2014-06-05",
                            "customerId": 5
                        }]

                    }]
                },
                model: 'SubTable.model.Customer'
            },
            columns: [{
                text: 'Id',
                dataIndex: 'id'
            },{
                text: 'Name',
                dataIndex: 'name',
                flex: 1,
                hideable: false
            }]
        });
        this.callParent();
    }
});

Ext.define('SubTable.view.main.Main', {
    extend: 'Ext.container.Viewport',

    requires: [ 'SubTable.view.grid.CustomerGrid'],

    items: [
        {
            region: 'center',
            xtype: 'customer-grid',
            width: 400,
            height: 400
        }
    ]
});

Ext.application({
    name: 'SubTable',

    autoCreateViewport: 'SubTable.view.main.Main'
});

这是我要在ptype: "subtable"的第一列中添加复选框的内容,

var cb = document.createElement('input');
    cb.type = 'checkbox';
    cbh.appendChild(cb);
    cb.name = val;

我想将此Cb用作ptype的第一列。有人可以帮我弥补吗。

0 个答案:

没有答案