extjs - 如何水平对齐组件

Question

我将 ExtJS 用于网格视图，现在我需要网格上方的搜索选项。所以我创建了一个面板并向其中添加了诸如文本框和两个按钮之类的项目。除了布局之外，一切都很好。我需要文本框和两个按钮水平对齐而不是垂直对齐。我已经尝试注入 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事件。您可以直接向该方法提供一个函数，而无需将自己注册到侦听器。