Question

Extjs panel怎么显示一行多列如下图所示

Answer 1

用extjs布局来实现这个样式。

给你讲下extjs的布局。

FormPanel有两种布局：form和column，form是纵向布局，column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单，最重要的是正确分割，分割结果直接决定布局能否顺利实现。

布局其实是由行和列组件成，分成由左往右和由上往下两个方向，由左往右叫column，由上往下叫form。 
整个大的表单是form布局。

好了 来讲你这个布局怎么实现。

整体是右上往下布局，是form布局，然后看每一行，里面都是两个元素，他就是column布局，colunm布局里面，每个都是一个元素，默认是form布局。

代码

  var form = new Ext.form.FormPanel({       
  title : "布局表单",       
  width : 650,       
  autoHeight : true,      
   frame : true,      
    renderTo : "a",       
    layout : "form", // 整个大的表单是form布局       
    labelWidth : 65,       
    labelAlign : "right",
    items : [{ // 行1          
    layout : "column",         
     items : [{             
     columnWidth : .5,             
     layout : "form",             
     items : [{                
     xtype : "textfield",               
      fieldLabel : "第1行第1个",               
       width : 220              
        }]            
        }, {            
         columnWidth : .5,            
          layout : "form",            
           items : [{                
           xtype : "textfield",               
            fieldLabel : "第1行第2个",             
               width : 220              
                }]          
                  }]       
                    },{            
                     columnWidth : .5,           
                     layout : "form",           
                     items : [{             
                            xtype : "textfield",              
                            fieldLabel : "第2行第1个",            
                            width : 220            
                              }]         
                            }, {          
                                columnWidth : .5,           
                                layout : "form",           
                                items : [{             
                                xtype : "textfield",  
                                fieldLabel : "第2行第2个",                
                                width : 220               
                                }]            
                                }]        
                                 }],       
                                 buttonAlign : "center",       
                                 buttons : [{          
                                 text : "提交"         
                                 }, {          
                                 text : "重置"         
                                 }]     
                                  });  
                                   });