如何对齐组件水平

Question

我使用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'); 

Answer 1

对于这种情况，您应该使用适当的布局，如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事件。您可以直接向该方法提供函数，而无需向监听器注册自己。