如何调整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它会进行更改，只此按钮。我一直这样做，结果如预期。