如何水平对齐组件答案

【问题标题】：How to align Components horizontal如何水平对齐组件
【发布时间】：2013-02-01 18:28:46
【问题描述】：

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

【问题讨论】：

标签： extjs extjs4

【解决方案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 事件。您可以直接向该方法提供函数，而无需将自己注册到侦听器。

【讨论】：