布局 -列布局 column

var form = new Ext.form.FormPanel({
       
       labelAlign:'right',
       title:'布局',
       labelWidth:50,
       buttonAlign:'center',
       frame:true,
       width:600,
       
       items:[{
        layout:'column',
        items:[
        {
         columnWidth:.33,
         layout:'form',
         defaultType:'textfield',
         items:[
          {fieldLabel:'俩字'},
          {fieldLabel:'俩字'}
          ]
        },
        {
         columnWidth:.33,
         layout:'form',
         defaultType:'textfield',
         items:[
          {fieldLabel:'三个字'},
          {fieldLabel:'三个字'},
          {fieldLabel:'三个字'}
         ]
        },
        {
         columnWidth:.33,
         layout:'form',
         defaultType:'textfield',
         items:[
          {fieldLabel:'四个字'},
          {fieldLabel:'四个字'},
          {fieldLabel:'四个字'},
          {fieldLabel:'四个字'}
         ]
        }]
        },{
         width:345,
         height:100,
         xtype:'textarea',                     ---- 文本域是在column 那层的item之后,进行配置的,默认平铺
         fieldLabel:'文本域'
        },{
         buttons:[{
          text:'按钮',
          handler:function(){}
         }]
        }],
//         buttons:[{
//           text:'按钮',
//           handler:function(){}
//          }]
      });
      form.render("form");

 

布局 -列布局 column_第1张图片

你可能感兴趣的:(布局 -列布局 column)