Possible bug using getEditor to dynamically set a combobox

[solodesignz]

So, I have dumbed down the EXT code to see if this was being caused by something else I was doing.
My goal is to have one column in a grid that for some records displays a textbox, and some other records display a combobox. This works great in FF/IE8+.

But, there seems to be a bug in IE7. The combobox renders correctly in the grid, but when clicking on it to open the dropdown, the dropdown displays at the top left of the browser. Like, the element that the dropdown belongs to is lost, to get it's coordinates.

Here's the code to reproduce using Ext 4.0.7:



<div id="grid-example"></div>

<script>

Ext.onReady(function () {

var grid = Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'title' }
],
data: [
['Item 1'],
['Item 2'],
['Item 3'],
['Item 4'],
['Item 5']
]
}),
stateful: true,
stateId: 'stateGrid',

singleClickExpand: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1,
autoCancel: false
})],

columns: [{
text: 'Title',
dataIndex: 'title',
flex: 1,

getEditor: function (record) {
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'title' }
]
});
return Ext.create('Ext.form.field.ComboBox', {
store: Ext.create('Ext.data.Store', {
model: 'State',
data: [
{ "title": "Test 1" },
{ "title": "Test 2" },
{ "title": "Test 3" }
]
}),
displayField: 'title',
queryMode: 'local',
typeAhead: true
});
}
}],
height: 350,
width: 600,
title: 'ComboBox Example',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
</script>


I know that this example doesn't dynamically change the editor, so technically I could just use "editor:" instead, and that does work. But, ultimately there is an if/else that changes the return value of the "getEditor".

Attached is a screenshot of the issue. Anyone know a workaround for this?

[sissonb]

I wasn't able to replicate the issue in the IE7 emulator. http://screencast.com/t/QxesR1Ttf

I currently don't have XP so I cannot test in the real browser. Are you sure the sample code fails in IE7?

[vietits]

You should move the code of defining 'State' model and creating of combo box out off the getEditor() method. This way, you don't have to re-define 'State' model and re-create another instance of combo box each time getEditor() is called. You can use one instance of combo box for editing many rows. This may not solve the problem. It is just a suggestion.


Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'title' }
]
});
var combo = Ext.create('Ext.form.field.ComboBox', {
store: Ext.create('Ext.data.Store', {
model: 'State',
data: [
{ "title": "Test 1" },
{ "title": "Test 2" },
{ "title": "Test 3" }
]
}),
displayField: 'title',
queryMode: 'local',
typeAhead: true
});


var grid = Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'title' }
],
data: [
['Item 1'],
['Item 2'],
['Item 3'],
['Item 4'],
['Item 5']
]
}),
stateful: true,
stateId: 'stateGrid',


singleClickExpand: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1,
autoCancel: false
})],


columns: [{
text: 'Title',
dataIndex: 'title',
flex: 1,


getEditor: function (record) {
// Ext.define('State', {
// extend: 'Ext.data.Model',
// fields: [
// { type: 'string', name: 'title' }
// ]
// });
// return Ext.create('Ext.form.field.ComboBox', {
// store: Ext.create('Ext.data.Store', {
// model: 'State',
// data: [
// { "title": "Test 1" },
// { "title": "Test 2" },
// { "title": "Test 3" }
// ]
// }),
// displayField: 'title',
// queryMode: 'local',
// typeAhead: true
// });
return combo;
}
}],
height: 350,
width: 600,
title: 'ComboBox Example',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});

[solodesignz]

@sissonb: Weird, I have tested this in a VM running Windows XP and a real IE7 install, also my dev box running Windows 7 running IE8 then swapping the browser mode to IE7 as you did. What version of Ext did you use? (My version is 4.0.7)

@vietits: Thanks for your suggestion. I know the above code isn't optimized great, I just wanted to write a quick and dirty example to reproduce the issue.