我有一个面板,它有几个组合框和按钮。第一个组合框与左侧对齐。我希望将其与下面的那些类似。该按钮也应该与组合相邻。 请帮忙。以下是代码
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();
}
}
}
]
});
答案 0 :(得分:1)
嗯......第一个组合框的宽度为250.你试着让它等于其他组合(200)吗?如果您无法将按钮移动到左侧,我会用CSS代替。 如果你给按钮一个ID“myButton”,下面的CSS应该可以解决这个问题:
#myButton .x-btn {
margin-left:-20px !important;
}
并且不要害怕编辑ExtJS类,因为它只会对此按钮进行更改。我一直这样做,结果如预期。