EXTJS面板中的項目對齊問題

團隊我面臨兩個問題，在ext js面板中的項目對齊。我正在使用extjs 3.4版。EXTJS面板中的項目對齊問題

基本上我想在每一行水平對齊面板文本框兩個，但截至目前，每行只有一個。

此外，面板和第一個文本框之間似乎沒有空間。有沒有什麼辦法，我們可以做到這一點在EXTJS 3.4

代碼：

<html> 
<head> 
<title>Hello World Window</title> 
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script> 
</head> 

<body> 
<script type="text/javascript"> 


    Ext.onReady(function(){ 
     var tab2 = new Ext.FormPanel({ 
      labelAlign: 'left', 
      labelStyle: 'font-weight:bold;', 
      labelWidth: 85, 
      title: 'formname', 
      bodyStyle:'padding:5px', 
      scrollable:'true', 
      border:'true', 
      width: 1200, 
      height:600, 
      items: [{ 
       xtype:'panel', 
       height:200, 
       autoScroll:true,    
       defaults: {flex: 1, layout: 'form', border: false}, 
       layout:'hbox', 
       items:[{ 
       title:'Personal Details', 
       defaultType: 'textfield', 
        items: [ 

         { 
          fieldLabel: 'First Name', 
          name: 'first', 
          width:200, 
          allowBlank:false, 
          value: 'Jack' 
         },{ 
          fieldLabel: 'Last Name', 
          name: 'last', 
          width:200, 
          value: 'Slocum' 

         },{ 
          xtype:'combo', 
          fieldLabel: 'Company', 
          name: 'company', 
          width:200, 
          value: 'Ext JS' 
         }, { 
          fieldLabel: 'Email', 
          name: 'email', 
          width:200, 
          vtype:'email' 
         }] 

       }] 
       }], 
      buttons: [{ 
      text: 'Save' 
      },{ 
      text: 'Cancel' 
      }] 
     }); 

    tab2.render(document.body); 


}); 
</script> 

</div> 
</body> 
</html>

來源

2012-12-22 user1913742

IMO最簡單的方法是使用FormLayout和CSS修改的定位。 FormLayout中的每個字段都包含在div.x-form-item中，因此您可以爲其設置float: left樣式。如果字段的寬度根據面板的寬度進行調整，則只需要這樣做。 Othwerwise，你將不得不在每個seconond字段上設置clear: left。

工作樣本：http://jsfiddle.net/wC5hZ/2/

您還可以使用TableLayout但它會更多的代碼。

來源

2012-12-24 09:06:50 Krzysztof

EXTJS面板中的項目對齊問題

回答

相關問題