PDA

View Full Version : Combo may dislocation when browser's width isn't wide enough.



symbio
25 Aug 2010, 8:13 PM
I wrote a formpanel with column layout just like below.

When I view it in IE browser and the brower's width is less than 700px, the combo field display at next row.

Location: __________________________________________
Level : Type : Age:_________
_________ ___________ <-- just like that

If I resize the window or click the page then, it'll come back to the place it should be normally.
and when I reduce the browser in width quickly, it may happen again.

Please give me some solutions, thanks.

var form = new Ext.form.FormPanel({
layout:'column',
renderTo:'document.body',
frame:true,
items:[
{columnWidth:1,layout:'form',items:[
{xtype:'textfield',fieldLabel: 'Location',name: 'location',anchor:'98.6%',allowBlank: false,id:'locationAt'}]
},
{columnWidth:.33,layout: 'form',items: [
{fieldLabel: 'Level',name: 'level',xtype: 'combo',
store:['1','2','3','4','5','6','7','8','9'],typeAhead:true,editable:false,
triggerAction:'all',mode:'local',anchor:'96%',lazyInit:false,lazyRender:false,allowBlank: false
}]
},
{columnWidth:.33,layout:'form',items:[
{fieldLabel: 'Type',name: 'btype',xtype: 'combo',
store:['Commerce','Industry'], typeAhead: true,editable:false,
triggerAction: 'all',mode: 'local',anchor:'96%',lazyInit:false,lazyRender:false
}]
},
{columnWidth:.34,layout:'form',items:[
{xtype:'numberfield',fieldLabel: 'Age',name: 'age',anchor:'96%'}]
}
]
}