面板內的對齊問題

我正面臨一個問題，我無法在窗體面板內對齊文本框。基本上我想要內部面板內的2列布局

基本上我創建一個formpanel和裏面，我打算創建3個面板，但文本框總是在換行。

以下代碼。

<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: 'top', 
      title: 'formname', 
      bodyStyle:'padding:5px', 
      width: 1200, 
      height:600, 
      items: [{ 
       xtype:'panel', 
       plain:true, 
       border:false, 
       activeTab: 0, 
       height:50, 
       autoScroll:true, 
       items:[{ 
       title:'Personal Details', 
       defaults: {width: 230}, 
       layout:'form', 
       defaultType: 'textfield', 
        items: [ 

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

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

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

    tab2.render(document.body); 


}); 
</script> 

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

來源

2012-12-21 user1913742

隨着ExtJS的4你不需要使用表單佈局管理字段標籤：您可以使用每一個佈局容器佈局中的字段的形式（檢查這個http://docs.sencha.com/ext-js/4-0/#!/guide/upgrade）。所以儘量使用列布局的FormPanel中，然後加入2子容器，每個容器用VBOX佈局管理所需的列：

new Ext.FormPanel({ 
     layout: 'column', 
     items: [ 
     { 
      xtype:'container', 
      columnWidth: .5, 
      layout: 'vbox', 
      items: [ 
      put here left column items 
      ] 
     }, 
     { 
      xtype:'container', 
      layout: 'vbox', 
      columnWidth: .5, 
      items: [ 
      put here right column items 
      ] 
     } 
    });

來源

2012-12-21 16:20:08 Damiano

我使用EXT JS 3.4對不起，最初沒有更新它。我們可以在3.4中做什麼？ – user1913742

對於ExtJS4，不建議使用'new'來實例化（在大多數情況下） – sra

有沒有辦法在EXTJS中實現這一點3 – user1913742

這是工作一的TabPanel裏面有ExtJS的3.4：

// p is the tabPanel 
t = p.add ({ 
    xtype: 'form', 
    layout: 'column', 
    items: [ 
     { 
      xtype:'container', 
      columnWidth: .5, 
      frame: false, 
      items: new Ext.Panel ({ 
       frame: false, 
       bodyCssClass: 'x-panel-mc', 
       bodyStyle: 'background-color: white', 
       layout: 'form', 
       items: formPart 
      }), 
     }, { 
      xtype:'container', 
      columnWidth: .5, 
      items: buttonPart, 
     } 
    ], 
});

來源

2016-02-24 08:29:55 luca76

面板內的對齊問題

回答

相關問題