Extjs 如何将组件水平对齐

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

---

对于这种情况，您应该使用合适的布局，如hbox

请参阅此工作示例（）

顺便说一句：按钮有一个

处理程序

属性，它是包装的

单击事件。您可以直接向该方法提供函数，而无需向侦听器注册自己

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
    }
    ]
});