Extjs combobox drop down list not align with combo box - css

Question

I have combo box with some values. When i click the combo listed down the data. but there not align with combo box and popup listed.
any help
/**
* This is the combo box with common values
*/
var combo_1 = Ext.extend(Ext.form.ComboBox, {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px'
});
/**
* This is the form panal
*/
var form_panal = new Ext.form.FormPanel({
id:'form_panal',
frame:true,
bodyStyle:'padding:10px 10px 10px 10px',
buttonAlign:'center',
items: [
combo_1,
combo_2,
combo_3,
combo_4
],
buttons: [ {
text: 'Save',
handler : function(){
}
},
{text: 'Cancel',
handler : function() {
}
}
]
});
enter image description here

Answer 1

Here is the sample code
Ext.application({
name : 'Fiddle',
launch : function() {
var combo_1 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name',
valueField: 'name',
store: {
fields: [{
name: 'name'
}],
proxy: {
type: 'memory'
},
data: [{
name: 'Android'
},{
name: 'iOS'
}, {
name: 'Windows'
}]
}
});
var combo_2 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name1',
valueField: 'name1',
store: {
fields: [{
name: 'name1'
}],
proxy: {
type: 'memory'
},
data: [{
name1: 'Blue Star'
},{
name1: 'LLoyd'
}, {
name1: 'Samsung'
}]
}
});
var combo_3 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name2',
valueField: 'name2',
store: {
fields: [{
name: 'name2'
}],
proxy: {
type: 'memory'
},
data: [{
name2: 'Andhra pradesh'
},{
name2: 'Telangana'
}, {
name2: 'Karnataka'
}]
}
});
/**
* This is the form panal
*/
Ext.create('Ext.form.FormPanel',{
frame:true,
bodyStyle:'padding:10px 10px 10px 10px',
buttonAlign:'center',
items: [
combo_1,
combo_2,
combo_3
],
buttons: [ {
text: 'Save',
handler : function(){
}
},{
text: 'Cancel',
handler : function() {
}
}],
renderTo: document.body
});
}
});