Let me preface this by saying that I've been working with ExtJS for all of a week and half, so please pardon the noobishness.
I'm building a form inside of a tab panel, and I was testing different ways to lay out two comboboxes side by side instead of stacked on top of each other. My first attempt was with a fieldset, but I abandoned that for a container with a column layout.
Which led me to the following code:
Ext.onReady( function() {
var tabs = new Ext.TabPanel({
renderTo: 'myForm',
activeTab: 0,
autoHeight: true,
header: true,
title: "Test Title",
border: false,
defaults: {
height: 256,
tabCls: 'order-tab'
},
items: [
{
title: 'Tab 1',
contentEl: 'tab1',
}
]
});
// Account Dropdown
var accountField = new Ext.form.ComboBox({
fieldLabel: 'Account',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'accountId',
'displayText'
],
data: [[1, 'Account 1'], [2, 'Account 2']]
}),
displayField: 'displayText',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select an account',
selectOnFocus:true,
boxMaxWidth: 170
});
//Type dropdown
var accountTypeFi开发者_开发问答eld = new Ext.form.ComboBox({
fieldLabel: 'Type',
store: new Ext.data.ArrayStore({
id: 1,
fields: [
'accountTypeId',
'displayText'
],
data: [[0, 'Type1'], [1, 'Type2']]
}),
displayField: 'displayText',
typeAhead: false,
editable: false,
mode: 'local',
triggerAction: 'all',
value: 'Type1',
selectOnFocus:true,
boxMaxWidth: 109
});
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Container({
autoEl: 'div',
layout: 'column',
cls: 'account-info',
defaults: {
xtype: 'container',
autoEl: 'div',
columnWidth: 1,
anchor: '-20',
},
"items":[
{
"layout":"column",
"items":[
{
"columnWidth":0.6,
"layout":"form",
"labelWidth": 50,
"items":[
accountField
]
},
{
"columnWidth":0.4,
"layout":"form",
"labelWidth": 30,
"anchor":-20,
"items":[
accountTypeField
]
}
]
}
]
});
this.form= new Ext.FormPanel({
applyTo: 'tab1',
border:false,
defaults:{xtype:'textfield'},
items:[
accountInfoGroup,
]
});
});
This looked the way I wanted it to, so I started going back to clean up the unused fieldset code.
Which brings me to the goofy part. When I strip out this section:
//Account info fieldset (account dropdown + type dropdown)
var accountInfo = new Ext.form.FieldSet({
defaults: {
anchor: '-20'
},
items :[
accountTypeField
]
});
...the maxBoxWidth declaration on accountTypeField suddenly gets ignored and the layout goes all wonky. Just to be clear, there was more code in the fieldset snippet originally, but I could take all of it out and have the maxBoxWidth work fine UNTIL I tried to take out those two remaining pieces (defaults > anchor and items > accountTypeField).
So my question is, what is going on? Why does removing that fieldset affect the width of the combobox when it's not even being used? Is it a config issue?
I'm stumped and frustrated and looking for any help!
You are mixing properties for objects that you're not using... Try removing all the anchor properties. These only apply when you're using an anchor layout as your container. I would remove any absolute height and widths that you're setting for widgets and layouts. You can't mix columnWidth and width for instance when you're using a column layout. It's best to stay as consistent as possible with how you're handling widths for column and table layouts...
also: Use Ext.Panel instead of Container
//Account info (account dropdown + type dropdown)
var accountInfoGroup = new Ext.Panel({
autoEl: 'div',
精彩评论