ext fieldset column 布局(任意布局)

Ext.onReady(function(){
 // Fix 2.1 bug
 /*
     Ext.override(Ext.layout.FormLayout, { 
                 getAnchorViewSize : function(ct, target) { 
                     return (ct.body || ct.el).getStyleSize(); 
                 } 
             });
             */
   var cc = new Ext.form.FormPanel({
        title:"form",
        width:600,
        renderTo:Ext.getBody(),
        height:300,
        frame:true,
        autoHeight:true,
        defaultType : "textfield",
        items:[
            {
              xtype:"fieldset", //定义类别为fieldset
              title:"fieldset",
              layout:'column',
              autoHeight:true,             
              items:[
                              {
                                 columnWidth:.3, 
                                 layout:"form",   
                                 labelWidth:50,
                                 items:[{
                                     xtype:"textfield",
                                     fieldLabel:"textfield1",
                                     width:80
                                 }]
                        } ,  {
                                 columnWidth:.3,
                                 layout:"form",   
                                 labelWidth:50,
                                 items:[{
                                     xtype:"textfield",
                                     fieldLabel:"textfield1",
                                     width:80
                                 }]
                        }, {
                                 columnWidth:.4,
                                 layout:"form",       
                                 labelWidth:50,
                                 items:[{
                                     xtype:"textfield",
                                     fieldLabel:"textfield1",
                                     width:80
                                 }]
                        },
                        {
                                 columnWidth:.5,
                                 layout:"form",       
                                 labelWidth:50,
                                 items:[{
                                     xtype:"textfield",
                                     fieldLabel:"textfield1",
                                     width:80
                                 }]
                        },
                        {
                                 columnWidth:.5,
                                 layout:"form",       
                                 labelWidth:50,
                                 items:[{
                                     xtype:"textfield",
                                     fieldLabel:"textfield1",
                                     width:80
                                 }]
                        }
                    ]
              },{
              xtype:"fieldset",  //第二种方式，适合radio，不一定适合其他的元素
              title:"fieldfd",
              layout:"table",
              autoHeight:true,
              items:[{
                         xtype:'radio', 
                         name:'xh', 
                         boxLabel:'一位', 
                         id:'radioxh1' 
                      },{xtype:'radio', 
                         name:'xh', 
                         boxLabel:'两位', 
                         id:'radioxh2' 
                      },{xtype:'radio', 
                         name:'xh', 
                        boxLabel:'三位', 
                       id:'radioxh3' 
                      }
              ]
              }
        ]
  });
});

 

效果即:fieldset中任意布局，可以一行填充随意咯元素

例外：在tabpanel插入formpanel时，formpanel中的fieldset可能会有元素不显示，这时只要设置tabpanel的layoutOnTabChange:true, 即可。

 

关 于ExtJS TabPanel中column布局不显示问题

    今天在做用ExtJS做页面设计时，发现一个很奇怪的问题：在打开的TabPanel中放置一个Panel，然后再在这个Panel上放一个 FormPanel，当FormPanel上的控件使用column布局时，那些控件总是不显示，如果改变窗口的大小时（例如改变浏览器窗口的大小）又可 以显示了，弄了很久都是这样，相当郁闷。
    上网查了一下资料，才知道在新建TabPanel时，将其属性layoutOnTabChange设置为true即可：

    layoutOnTabChange:true