如何調整extjs組合框的寬度

Question

我有一個面板，其中有幾個組合框和按鈕。第一個組合框與左側對齊。我想要調整類似於下面的內容。該按鈕也應該與組合相鄰。 請幫忙。下面是代碼

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

Answer 1

嗯......第一組合框有250的寬度你儘量使其等於其他人（200）？如果你不能將按鈕移動到左邊，我會用CSS代替它。 如果你給一個按鈕ID「爲myButton」，下面的CSS應該做的伎倆：

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

不要害怕編輯ExtJS的班，cuz它會進行更改，只此按鈕。我一直這樣做，結果如預期。