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

如何水平对齐组件

1 个答案: