extjs多列显示

最新推荐文章于 2017-12-04 22:44:35 发布

叫我老刘

最新推荐文章于 2017-12-04 22:44:35 发布

阅读量262

点赞数

分类专栏： Extjs 文章标签： extjs多列显示

本文链接：https://blog.csdn.net/shnsvyu/article/details/84515516

版权

Extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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   
                    }]   
            }]}//第一行结束   
           ]   
      });