2

コンボボックスとボタンがいくつかあるパネルがあります。最初のコンボボックスは左揃えになっています。以下のように調整したいと思います。ボタンもコンボに隣接している必要があります。助けてください。以下はコードです

filterPanel = new Ext.Panel({
        renderTo: document.body,
        bodyStyle: 'padding-top: 6px;',
        title: 'Filters',
        collapsible: true,
        collapsed: true,
        width: 450,
        frame: true,
        floating: true,
        layout: 'form',
        labelWidth: 150,
        buttonAlign: 'center',

        items: [
            {
                layout:'column',
                items:[
                {
                    columnWidth:.9 ,
                    layout: 'form',
                    items: [{
                        xtype:'combo',
                        id: 'xFilterEmail',
                        width: 250,
                        listWidth: 200,
                        fieldLabel: 'Filter by Owner',
                        store: emailStore,
                        displayField:'emailDisplay',
                        valueField:'emailValue',
                        triggerAction: 'all',
                        value: '<cfoutput>#trim(filterEmail)#</cfoutput>',
                        selectOnFocus:false
                    }]
                },{
                columnWidth:.1,
                layout: 'form',
                items: [{
                    xtype: 'button',
                    text:   'ME',
                    listeners: {
                        click: function(){
                    }
                }]
            }]
        },{
                xtype: 'combo',
                id: 'xFilterStatus',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Filter by Status',
                store: statusStore,
                displayField:'statusDisplay',
                valueField:'statusValue',
                triggerAction: 'all',
                value: '<cfoutput>#trim(filterStatus)#</cfoutput>'
            },{
                xtype: 'combo',
                id: 'xFilterCategory',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Filter by Category',
                store: categoryStore,
                displayField:'categoryDisplay',
                valueField:'categoryValue',
                triggerAction: 'all',
                value: '<cfoutput>#trim(filterCategory)#</cfoutput>'
            },{
                xtype: 'combo',
                id: 'xFilterSubjectArea',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Filter by Subject Area',
                store: subjectAreaStore,
                displayField:'subjectAreaDisplay',
                valueField:'subjectAreaValue',
                triggerAction: 'all',
                value: '<cfoutput>#trim(filterSubjectArea)#</cfoutput>'
            },{
                xtype: 'combo',
                id: 'xPageSize',
                width: 200,
                listWidth: 200,
                fieldLabel: 'Number of Requests Shown',
                store: pageSizeStore,
                displayField:'pageSizeDisplay',
                valueField:'pageSizeValue',
                triggerAction: 'all',
                value: '<cfoutput>#thePageSize#</cfoutput>'
            },{
                xtype: 'textfield',
                id: 'xSearch',
                width: 217,
                fieldLabel: 'PID/Description Search',
                value: '<cfoutput>#theSearchField#</cfoutput>'
            },{
                xtype: 'checkbox',
                id: 'xIncTemp',
                fieldLabel: 'Include Temporary Jobs',
                checked: document.getElementById('incTemp').checked
            }
        ],
        buttons: [
            {
                text: 'Clear',
                listeners: {
                    click: function(){

                    }
                }
            },{
                text: 'Apply',
                id: 'filterSubmitBtn',
                listeners: {
                    click: function(){

                        document.getElementById('sortForm').submit();
                    }
                }
            }
        ]
    });

出力パネル

4

1 に答える 1

1

ええと...最初のコンボボックスの幅は250です。他のコンボボックスと同じにするようにしましたか（200）？また、ボタンを左に移動できない場合は、代わりにCSSを使用します。ボタンにID「myButton」を指定すると、次のCSSでうまくいくはずです。

#myButton .x-btn {
    margin-left:-20px !important;
}

また、ExtJSクラスを編集することを恐れないでください。これにより、このボタンのみが変更されます。私はいつもこれをしていて、結果は期待通りです。

于 2012-10-19T12:39:26.763 に答える