PDA

View Full Version : Combobox list alignment problem - extjs 3.2.0



ragendu
7 May 2013, 9:31 PM
Hi All,

I have a problem with my combobox list. It is not properly aligned with the combo.It is aligned to left. Extjs version using is 3.2.0. It is coming correctly in IE. But in chrome and firefox its aligned to left. I have attached the screen shot the same from Firefox. I read we have to use listAlign, alignTo properties. But not sure how to use it. Could somebody help me on this?

testPanel = new Ext.Panel({
renderTo: document.body,
bodyStyle: 'padding-top: 6px;',
title: 'Test',
collapsible: true,
collapsed: true,
width: 430,
frame: true,
floating: true,
layout: 'form',
items: [
{
layout:'column',
items:[
columnWidth:'.9' ,
layout: 'form',
items: [
{
xtype:'combo',
id: 'name',
width: 200,
listWidth: 200,
labelStyle: 'width:150px',
fieldLabel: 'Name'
}]
},
{
columnWidth:.1,
layout: 'form',
items: [{
xtype: 'button',
text: 'Test',
listeners: {
click: function(){
alert("clicked");
}
}
}]
}]
]

});

Any help is appreciated.
Thanks in advance

slemmon
9 May 2013, 9:27 AM
*Thread moved to ExtJS 3 forum

*You can wrap your code in code blocks for better readability.

I tested the following code sample in 3.4.1.1 and it works ok on Windows 7 in IE, FF, and Chrome (I added a store to the example in order to demonstrate the drop down position). A framework upgrade might fix the issue you're seeing:



testPanel = new Ext.Panel({
renderTo: document.body,
bodyStyle: 'padding-top: 6px;',
title: 'Test',
collapsible: true,
collapsed: true,
width: 430,
frame: true,
//floating: true,
layout: 'form',
items: [{
layout: 'column',
items: [{
columnWidth: '.9',
layout: 'form',
items: [{
xtype: 'combo',
id: 'name',
width: 200,
listWidth: 200,
labelStyle: 'width:150px',
fieldLabel: 'Name',
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText'
}]
}, {
columnWidth: .1,
layout: 'form',
items: [{
xtype: 'button',
text: 'Test',
listeners: {
click: function () {
alert("clicked");
}
}
}]
}]
}]
});