tree grid in a window

[M3M0R1X]

Hi,

I try to display a tree grid panel in a window component. If I open the window the first time everything works fine. But if I close the window and try to open it again the tree grid panel not appears. There are different girds and trees in the same window and they have not this kind of problem. To understand what is going wrong I wrote this example:


Ext.onReady(function() {
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
],
proxy: {
type: 'ajax',
url: 'data.json'
}
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task'
});

var tree = Ext.create('Ext.tree.Panel', {
alias: 'widget.newTreePanel',
rootVisible: false,
store: store,
columns: [{
xtype: 'treecolumn',
text: 'Task',
flex: 2,
dataIndex: 'task'
},{
text: 'Duration',
flex: 1,
dataIndex: 'duration'
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user'
}]
});
Ext.create('Ext.Button', {
text: 'TreeGrid Window',
renderTo: Ext.getBody(),
handler: function() {
Ext.create('Ext.window.Window', {
title: 'TreeGrid',
height: 250,
width: 400,
layout: 'card',
items: [tree]
}).show();
}
});

});

This example comes close to my application even if the error is slightly different.
In my application the panel appears even on the second time but without data. In the example the panel appears not at all at second calling. I think the problem of both is based on the same error.

Could somebody have a look what I am doing wrong?

Thanks in advance

M3M0R1X

[skirtle]

The problem is that you're reusing the same tree. When the window is closed it is also destroyed, along with all of its child components including the tree. A destroyed component must be discarded, it cannot be used again.

There are a few ways to solve this problem.

One way is to hide the window rather than destroy it (see closeAction). You'd then show the same window on the second button click.

Another (quite painful) option is to remove the tree from the window before it is destroyed so that it can be reused. I would avoid this option if possible.

A third option is to create a new tree each time. Move the Ext.create() for the tree into the button's handler.

[M3M0R1X]

Hi Skirtle,

thanks for your answer. I've decided to follow the first solution. Here, the chosen approach:

MVC Controller Function:


createReport: function(button) {
var window = Ext.WindowManager.get('CustomWindow');
var target = Ext.get('Button'); // target for animation
if(!window){
window = Ext.create('Ext.window.Window', {
id: 'CustomWindow',
title: 'CustomWindow',
height: 550,
width: 950,
modal: true,
closeAction : 'hide',
layout: 'fit',
items: {
xtype: 'panel',
border: false
}
});
}
window.show(target);
}


greetings
M3M0R1X