extjs多列显示

var detailForm = new Ext.FormPanel({   
        id:"detail",   
        layout:"form",   
        labelWidth: 60,   
        labelAlign:"right",   
        border:false,   
        frame:true,   
        width: 600,//宽度设置要合理,如果FormPanel的宽度小于控件的宽度,column布局时控件不能正常显示   
        height:400,   
//      autoHeight:true,   
//      defaultType: 'textfield',//column布局时不能设置该属性,否则不能正常显示   
        items: [{//第一行   
            layout:"column",   
            items:[{   
                columnWidth:.3,//第一列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同编号',   
                    name: 'contractId',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第二列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同名称',   
                    name: 'contractId1',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第三列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同',   
                    name: 'contractId2',   
                    width:100   
                    }]   
            }]},//第一行结束   
            {//第一行   
            layout:"column",   
            items:[{   
                columnWidth:.3,//第一列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同编号',   
                    name: 'contractId',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第二列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同名称',   
                    name: 'contractId1',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第三列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同',   
                    name: 'contractId2',   
                    width:100   
                    }]   
            }]},//第一行结束   
            {//第一行   
            layout:"column",   
            items:[{   
                columnWidth:.3,//第一列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同编号',   
                    name: 'contractId',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第二列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同名称',   
                    name: 'contractId1',   
                    width:100   
                    }]   
            },{   
                columnWidth:.3,//第三列   
                layout:"form",   
                items:[{   
                    xtype:"textfield",   
                    fieldLabel: '合同',   
                    name: 'contractId2',   
                    width:100   
                    }]   
            }]}//第一行结束   
           ]   
      });

 

你可能感兴趣的:(extjs多列显示)