Ext form 2列布局-table

Ext.define('Tools.view.CsForm', {    alias: 'widget.csform',    extend: 'TxExt.TxFormPanel',//这里直接继承Ext.form.Panel即可    fieldDefaults: {        labelWidth: 80,        width: 280    },    constructor: function (par){        var jsons = Ext.decode(par.record.data.ruleJson);//这是表格当前行的数据        var columns = [{            xtype: 'actioncolumn',            name: 'del',            text: '删除',            align: 'center',            icon: G.TxExt + '/Img/Icon/Floder/folder_delete.png',            handler: function (grid, rowIndex) {                jsons.rule.splice(rowIndex,1);                var strJson = JSON.stringify(jsons);                document.getElementsByName('ruleJson')[0].value = strJson;                debugger;                grid.getStore().removeAt(rowIndex);                debugger;            }        }];        var storms = jsons['rule'];        var fields = [];        for (var key in jsons) {            if (key != 'rule') {                var column = {                    header: jsons[key], dataIndex: key, editor: {                        xtype: 'textfield',                    }                };                columns.push(column);                fields.push(key);            }        }        this.items = [{            //此处2列布局核心            layout: {                type: 'table',                columns: 2            },            items: [{                xtype: 'combo',                fieldLabel: '分权重',                name: 'classType',                displayField: 'className',                valueField: 'classId',                emptyText: par.record.data.className,                store: Ext.create('Ext.data.Store', {                    fields: ['classId', 'className'],                    autoLoad: true,                    proxy: {                        type: 'ajax',                        url: '/Agent/Page/SalesSortMchPage.ashx/GetParents',                        reader: {                            type: 'json',                            root: 'root'                        },                        extraParams: { 'parentId': par.record.data.parentId}                    }                })            }, {                xtype: 'textfield',                fieldLabel: '权重比例',                name: 'ratioNum'            },{                xtype: 'hidden',                name: 'ruleJson'            }],        }, {//form内创建表格，注意这里已经不再2列布局范围内            items: [Ext.create('Ext.grid.Panel', {                title: 'Action Column Demo',                width: 520,                //这里是添加表格可编辑属性 已经编辑的事件监听                plugins: [Ext.create('Ext.grid.plugin.CellEditing', {                    clicksToEdit: 1,                    listeners: {                        'edit': function (editor, ctx) {                            var index = ctx.rowIdx;                            var id = ctx.field;                            var value = ctx.value;                            var newJson = jsons;                            newJson.rule[index][id] = value;                            var strJson = JSON.stringify(newJson);                            document.getElementsByName('ruleJson')[0].value = strJson;                            debugger;                        }                    },                })],                //表格列数据                store: Ext.create('Ext.data.Store', {                    fields: fields,                    data: storms,                }),                columns: columns,//表格列                //表格内顶部添加按钮                tbar: [{                    text: 'Add',                    handler: function () {                        var newRaw = this.up('grid').getStore().data.items[0].data;                        this.up('grid').getStore().insert(0, newRaw);                        jsons.rule.unshift(newRaw);                        var strJson = JSON.stringify(jsons);                        document.getElementsByName('ruleJson')[0].value = strJson;                        debugger;                    }                }],            })]        }];        this.callParent();    },})