PDA

View Full Version : Treepanel in a window - error thrown on second invocation



fordprefect
2 May 2012, 11:07 AM
Hi,

I have a treepanel that loads when a window is created and the first time everything works just fine, however when I close the window and reopen it the treepanel does not load.

Here's the window that holds the panel:



Ext.define('MyApp.view.chart.ChartDialog', {
extend: 'Ext.window.Window',
alias: 'widget.chartdialog',

uses: [
'Ext.button.Button'
],

width: 800,
height: 450,
title: 'Add Chart',

initComponent: function () {
Ext.apply(this, {
id: 'chartDialogWindow',
buttons: [{
id: 'chartDialogSaveButton',
disabled: true,
text: 'Load',
action: 'loadChart'
}],
items: [{
{
xtype: 'panel',
layout: 'hbox',
items: [ { xtype: 'tree' } ]
}
]
}]
});
this.callParent(arguments);
}
});


and the treepanel:



Ext.define('MyApp.view.chart.Tree', {
extend: 'Ext.tree.Panel',
alias: 'widget.tree',

store: 'MyTreeStore',
width: 350,
height: 320,
title: 'Choose an item',
border: false,
rootVisible: false,
hidden: true,
singleExpand: true
});


The error on the second rendering of the tree occurs in the Ext.tree.View class in the doRemove method:



doRemove: function(record, index) {
// If we are adding records which have a parent that is currently expanding
// lets add them to the animation wrap
var me = this,
all = me.all,
animWrap = me.getAnimWrap(record),
node = all.item(index).dom;

if (!animWrap || !animWrap.collapsing) {
return me.callParent(arguments);
}

animWrap.targetEl.appendChild(node);
all.removeElement(index);
},


specifically the line: node = all.item(index).dom; where index is 0.

I did not see this in RC1 => RC3. Any ideas?

Thanks in advance.

vietits
2 May 2012, 3:41 PM
How do you close and re-open the window?

fordprefect
2 May 2012, 3:43 PM
How do you close and re-open the window?

Thanks for the reply. The window is closed with:



Ext.getCmp('chartDialogWindow').close();


and reopened with:



var win = Ext.create('MyApp.view.chart.ChartDialog');
win.show();

vietits
2 May 2012, 4:10 PM
I have tried to simulate your case with the following example with one exception is set hidden of tree to false. It works well for me on Chrome, Ext 4.0.7 and Ext 4.1.0.


Ext.onReady(function(){
Ext.create('Ext.data.TreeStore', {
storeId: 'MyTreeStore',
root: {
text: 'Root',
children: [{
text: 'node1',
leaf: true
},{
text: 'node2',
leaf: true
}]
}
});


Ext.define('MyApp.view.chart.Tree', {
extend: 'Ext.tree.Panel',
alias: 'widget.tree',


store: 'MyTreeStore',
width: 350,
height: 320,
title: 'Choose an item',
border: false,
rootVisible: false,
hidden: false,
singleExpand: true
});


Ext.define('MyApp.view.chart.ChartDialog', {
extend: 'Ext.window.Window',
alias: 'widget.chartdialog',


uses: [
'Ext.button.Button'
],


width: 800,
height: 450,
title: 'Add Chart',


initComponent: function () {
Ext.apply(this, {
id: 'chartDialogWindow',
buttons: [{
id: 'chartDialogSaveButton',
disabled: true,
text: 'Load',
action: 'loadChart'
}],
items: [{
xtype: 'panel',
layout: 'hbox',
items: [ { xtype: 'tree' } ]
}]
});
this.callParent(arguments);
}
});


Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Open',
handler: function(){
var win = Ext.create('MyApp.view.chart.ChartDialog');
win.show();
}
});


Ext.create('Ext.button.Button', {
renderTo: Ext.getBody(),
text: 'Close',
handler: function(){
Ext.getCmp('chartDialogWindow').close();
}
});


});

fordprefect
2 May 2012, 4:17 PM
Very interesting - when I set my tree to hidden: false everything worked. It *appears* that if your tree is hidden and you attempt to load the store you will have an issue.

Thanks!