sjmittal
2 Feb 2010, 5:59 AM
Ext version tested:
Ext 3.1 (release)
Adapter used:
ext
css used:
only default ext-all.css
Browser versions tested against:
IE7
FF2
Operating System:
WinXP Pro
Description:
Hi,
There is a very weired bug I encountered.
The use case is tricky, but very common.
I have a editable grid, which has a ComboBox as editor in one of the columns.
On select of an option in ComboBox on that grid opens a child extjs Window.
This window again has a ComboBox as one of the items.
Closing the window, destroys the window and its elements.
Now when I select the ComboBox in the base grid, again it gives me an exception.
LINE: 1874
Error: 'fn.task' is null or not an object
Test Case:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- link to your own extjs lib -->
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
MyWindow = Ext.extend(Ext.Window, {
title: 'Test Lookup',
width: 400,
height: 300,
layout: 'fit',
plain: true,
modal: true,
html: "Test window",
initComponent: function(){
var combo = new Ext.form.ComboBox({
fieldLabel:'label',
triggerAction: 'all',
mode: 'local',
forceSelection: true,
typeAhead: true,
listWidth: 200,
store: ['a','b']
});
Ext.apply(this,{
items: [{
xtype: 'form',
items: [combo]
}],
buttons: [{
text: 'close',
scope: this,
handler: function() {
this.destroy();
}
}]
});
MyWindow.superclass.initComponent.call(this);
}
});
Ext.onReady(function(){
var fm = Ext.form;
var cm = new Ext.grid.ColumnModel({
columns: [
{
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: ['Shade', 'Mostly Shady', 'Sun or Shade', 'Mostly Sunny', 'Sunny'],
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
select: function(combo, record, index) {
var win = new MyWindow({
grid: grid
});
win.show();
}
}
})
},{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
editor: new fm.TextField({allowBlank: false})
}
]
});
var store = new Ext.data.Store({
autoDestroy: true,
url: '',
reader: new Ext.data.XmlReader({
record: 'plant',
fields: [
{name: 'common', type: 'string'},
{name: 'light'}
]
})
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler : function(){
var Plant = grid.getStore().recordType;
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade'
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
new Ext.Viewport({
layout: 'fit',
items: [grid]
});
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:
Click 'Add Plant' button (a row would be added)
Select and option from the Light column (from that row)
A popup window (with another combobox) would open. Close that window, by clicking on close button.
Select another option from the Light column (from the same row)
The result that was expected:
Window to open again
The result that occurs instead:
JS error that fn.task is null or not an object
Screenshot or Video:
attached
Debugging already done:
I have debugged this a lot and found that when a field is created
inside an Editor, then a blur event is added with a "defer: 10" delayed
task.
Now when we destroy the parent window, it destroys the elements
(including the combobox) of that window and in that process it seems to
be deleting this task attached to a different combobox of the base grid
also.
Possible fix:
not provided
I have tried to keep the example as small as possible.
Please review and let me know what is the issue and how we can fix it.
Thanks
Sachin
Ext 3.1 (release)
Adapter used:
ext
css used:
only default ext-all.css
Browser versions tested against:
IE7
FF2
Operating System:
WinXP Pro
Description:
Hi,
There is a very weired bug I encountered.
The use case is tricky, but very common.
I have a editable grid, which has a ComboBox as editor in one of the columns.
On select of an option in ComboBox on that grid opens a child extjs Window.
This window again has a ComboBox as one of the items.
Closing the window, destroys the window and its elements.
Now when I select the ComboBox in the base grid, again it gives me an exception.
LINE: 1874
Error: 'fn.task' is null or not an object
Test Case:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- link to your own extjs lib -->
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
MyWindow = Ext.extend(Ext.Window, {
title: 'Test Lookup',
width: 400,
height: 300,
layout: 'fit',
plain: true,
modal: true,
html: "Test window",
initComponent: function(){
var combo = new Ext.form.ComboBox({
fieldLabel:'label',
triggerAction: 'all',
mode: 'local',
forceSelection: true,
typeAhead: true,
listWidth: 200,
store: ['a','b']
});
Ext.apply(this,{
items: [{
xtype: 'form',
items: [combo]
}],
buttons: [{
text: 'close',
scope: this,
handler: function() {
this.destroy();
}
}]
});
MyWindow.superclass.initComponent.call(this);
}
});
Ext.onReady(function(){
var fm = Ext.form;
var cm = new Ext.grid.ColumnModel({
columns: [
{
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: ['Shade', 'Mostly Shady', 'Sun or Shade', 'Mostly Sunny', 'Sunny'],
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
select: function(combo, record, index) {
var win = new MyWindow({
grid: grid
});
win.show();
}
}
})
},{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
editor: new fm.TextField({allowBlank: false})
}
]
});
var store = new Ext.data.Store({
autoDestroy: true,
url: '',
reader: new Ext.data.XmlReader({
record: 'plant',
fields: [
{name: 'common', type: 'string'},
{name: 'light'}
]
})
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler : function(){
var Plant = grid.getStore().recordType;
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade'
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
new Ext.Viewport({
layout: 'fit',
items: [grid]
});
});
</script>
</head>
<body>
</body>
</html>
Steps to reproduce the problem:
Click 'Add Plant' button (a row would be added)
Select and option from the Light column (from that row)
A popup window (with another combobox) would open. Close that window, by clicking on close button.
Select another option from the Light column (from the same row)
The result that was expected:
Window to open again
The result that occurs instead:
JS error that fn.task is null or not an object
Screenshot or Video:
attached
Debugging already done:
I have debugged this a lot and found that when a field is created
inside an Editor, then a blur event is added with a "defer: 10" delayed
task.
Now when we destroy the parent window, it destroys the elements
(including the combobox) of that window and in that process it seems to
be deleting this task attached to a different combobox of the base grid
also.
Possible fix:
not provided
I have tried to keep the example as small as possible.
Please review and let me know what is the issue and how we can fix it.
Thanks
Sachin