如何對齊組件水平

我使用ExtJS作爲gridview，現在我需要網格上方的搜索選項。所以我創建了一個面板並添加了諸如文本框和兩個按鈕等項目。除佈局之外，它一切正常。我需要將文本框和兩個按鈕水平對齊而不是垂直對齊。我已經嘗試過注入像html樣式的元素而沒有任何成功。如何對齊組件水平

如何在容器內水平對齊組件？

var formPanel=Ext.create('Ext.form.Panel', { 
     title: 'Catalog Search', 
     width:300, 
     bodyPadding: 10, 
     submitOnAction: true, 
     activeItem: 1, 
     items: [{ 
      xtype: 'textfield', 
      name: 'Job Name', 
      id:'JobName', 
      fieldLabel: 'Job Name', 
      allowBlank: false, 

      }, { 
      xtype: 'button', 
      name: 'search', 
      fieldLabel: 'Catalog Search', 
      text: 'Search', 
      html:'style=float:left', 
      width:100, 

      listeners:{ 
       click:function(){ 
        var searchText=Ext.getCmp('JobName').getValue(); 
        store.proxy.extraParams={ 
         id: searchText 
        }; 
        store.load(); 
       } 
      } 
     }, 
     { 
      xtype: 'button', 
      name: 'clear', 
      fieldLabel: 'Clear', 
      text: 'Clear', 
      width:100, 

      listeners:{ 
       click:function(){ 
        Ext.getCmp('JobName').reset(); 
        var searchText=''; 
        store.proxy.extraParams={ 
         id: searchText 

        }; 
        store.load(); 
       } 
      } 
     } 
     ] 


    }); 
    formPanel.render('paging-grid');

來源

2013-02-01 thilo

對於這種情況，您應該使用適當的佈局，如hbox。

參見此工作示例（JSFiddle）

var formPanel=Ext.create('Ext.form.Panel', { 
    title: 'Catalog Search', 
    width:500, 
    bodyPadding: 10, 
    renderTo: 'paging-grid', 
    submitOnAction: true, 
    layout: 'hbox', 

    items: [{ 
     xtype: 'textfield', 
     name: 'Job Name', 
     id:'JobName', 
     fieldLabel: 'Job Name', 
     allowBlank: false, 
     flex: 1 
     }, { 
     xtype: 'button', 
     name: 'search', 
     fieldLabel: 'Catalog Search', 
     text: 'Search', 
     style: 'margin-left: 10px', 
     width: 70 
    }, 
    { 
     xtype: 'button', 
     name: 'clear', 
     fieldLabel: 'Clear', 
     text: 'Clear', 
     style: 'margin-left: 10px', 
     width: 70 
    } 
    ] 
});

順便說一下：一個按鈕有一個handler屬性是被包裹的click事件。您可以直接向該方法提供函數，而無需向監聽器註冊自己。

來源

2013-02-01 10:15:58 sra

如何對齊組件水平

回答

相關問題