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();
    },


})