PDA

View Full Version : combo and IE8



Stephan123
9 May 2011, 4:35 AM
Hello !

I have build a grid. In the 'tbar' of the grid there is a combobox.
When i test the grid in the FF3.3.x or in the Chrome browser it works fine.
When i test in the IE8 the combo works not correct.

See image.

Here is the code from the grid.


grid = new Ext.grid.GridPanel({
autoHeight: true,
stripeRows: true,
loadMask: true,
columnLines: true,
autoExpandColumn: 'progname',
store: gridStore,
width: 900,
id: 'myGrid',
title: 'vorhandene Programme',
columns: [
new Ext.grid.RowNumberer({width: 30})
,{
xtype: 'numbercolumn',
dataIndex: 'Fa_Id',
header: 'Programm ID',
sortable: true,
width: 100,
format: '0',
id: 'Fa_Id'
},{
xtype: 'gridcolumn',
header: 'Programmname',
sortable: true,
dataIndex: 'progname',
id: 'progname'
},{
xtype: 'gridcolumn',
header: 'Stadt',
sortable: true,
width: 150,
dataIndex: 'AO_City',
id: 'AO_City'
},{
xtype: 'gridcolumn',
header: 'Firma',
sortable: true,
width: 250,
dataIndex: 'company',
id: 'company'
},{
xtype: 'gridcolumn',
header: 'cityId',
hidden: true,
width: 50,
dataIndex: 'cityId',
id: 'cityId'
}],
bbar: [{
xtype: 'paging',
store: gridStore,
id: 'paging',
pageSize: 20,
displayMsg: "Anzeige: {0} - {1} von {2} ",
displayInfo: true
}],
tbar: [{
text: 'Programmbezeichnung oder Programmnummer:'
},{
xtype: 'textfield',
width: 150,
name: 'progSearch',
id: 'progSearch',
minLength: 3,
emptyText: 'min. 3 Zeichen'
},{
xtype: 'tbseparator'
},{
text: 'Stadt:'
},{
xtype: 'combo',
width: 150,
allowBlank: false,
id: 'city',
forceSelection: true,
triggerAction: 'all',
displayField: 'city',
valueField: 'id',
hiddenName: 'city',
store: cityStore,
lazyRender:true,
typeAhead: true
},{
xtype: 'tbseparator'
},{
text: 'Firma:'
},{
xtype: 'textfield',
width: 150,
name: 'companySearch',
id: 'companySearch',
emptyText: 'min. 3 Zeichen'
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: 'suche',
icon: '/buttons/arrow_right.png',
handler: function(){
var progSearch = Ext.getCmp('progSearch').getValue();
if(progSearch.length < 3){
showMsgBox('mindestens 3 Zeichen');

return;
}

var city = Ext.getCmp('city').getValue();
if(!city){
showMsgBox('Bitte Stadt wählen');

return;
}

gridStore.setBaseParam('progsearch', progSearch);
gridStore.setBaseParam('city', city);

var companySearch = Ext.getCmp('companySearch').getValue();
if(companySearch.length > 3)
gridStore.setBaseParam('company', companySearch);
else{
gridStore.setBaseParam('company', '');
Ext.getCmp('companySearch').setValue('');
}

gridStore.load();
}
},{
xtype: 'tbseparator'
}],
buttons: [{
text: 'deutsch',
handler: function(){
fillTemplate(1);
}
},{
text: 'englisch',
handler: function(){
fillTemplate(2);
}
},{
text: 'Sprachen'
},{
text: 'Termine'
},{
text: 'Preise'
}
]
});Who can help ?

Your sincerly

Stephan

friend
9 May 2011, 6:18 AM
When I comment out/remove id: 'city' on your Combobox, the code sample works as expected.

I think it may somehow be conflicting with the cityStore, since one of your field names there is 'id'.

The use of hard-coded ID attributes on components leads to very brittle code and is generally discouraged.

Check out Jay's excellent screencast on this very topic: http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp

Stephan123
9 May 2011, 10:56 PM
Hello ! Thanks for the tip. When i remove the id: 'city' it works. Your sincerly Stephan