как настроить extjs combo box width

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. Если вы даете кнопку идентификатор «MyButton», следующий CSS должен сделать трюк:

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

И не бойтесь редактировать классы ExtJS, Потому что это будет внести изменения только эту кнопку. Я делаю это все время, и результаты ожидаются.