PDA

View Full Version : how to adjust extjs combo box width



ragendu
17 Apr 2012, 7:39 PM
Hi,
I have a panel which has a couple of combo box and buttons. The first combo box is aligned to the left. I want to align that similar to those below. The button should also be adjacent to the combo. Below is the code.
I have attached the screen shot of the current panel.
Could some one please help me...

Thanks in advance...

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

mitchellsimoens
18 Apr 2012, 11:34 AM
If you want multiple components in a row you can use the fieldcontainer.