PDA

View Full Version : TreePanel in a Window give issue when the Window is opened 2nd time.. :(



poojagarg89
17 Oct 2012, 5:47 AM
Hi,
I have a BUTTON.....when I click on that I m poping up a Window in which I have used layout:"border",
and dividing it to two parts as "west" and "center", in "west" part m loading a tree which is working fine.

for first time the Window comes correctly but when I close the window and open it again it does not open and give me an error in firebug as:

TypeError: c.getPositionEl().dom is undefined



chrome://firebug/content/blank.gif

return target && c.getPositionEl().dom.parentNode == (target.dom || target); ext-all-debug.js (line 12170)




I don't know y my TreePanel is not rendering again in the Panel......
Here is my code:


var run_management_root=new Ext.tree.TreeNode({
text:'Manage Runs',
id:'root_id',
iconCls:'parent_folder'
});
run_management_root.appendChild(
new Ext.tree.TreeNode({
text:'Customers with NO runs',
scope:this,
iconCls:'red_b'
})
);

Ext.app.runManagementLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
processAttributes : function(attr){


if(attr.loc_name){
attr.text = attr.loc_name;
attr.id = attr.loc_id;
attr.loaded = true;
}
else if(attr.run_name){

var run=(attr.run_id).split(":");
var status;
if(run[2]=="green")
{
status="green_b";
}else{
status="red_b";
}
attr.text = attr.run_name;
attr.id = attr.run_id;
attr.iconCls=status;
attr.loaded = true;
}

}
});
var loading_runmanagement_loader =new Ext.app.runManagementLoader({
id:"runmanagement_loader_id",
dataUrl:projname+'/ShowRunsTree',
baseParams:{load_type:"run_management"}
});
run_management_root.appendChild(
new Ext.tree.AsyncTreeNode({
text:'Run Control',
id:'loading_run_control_id',
expanded:true,
loader:loading_runmanagement_loader
})
);

var run_management_panel = new Ext.tree.TreePanel({
id: 'run_management_panel',
border:false,
collapsible: false,
autoScroll: true,
rootVisible: true,
height: 460,
lines: true,
singleExpand:true,
root:run_management_root,
listeners:{
click:function(node,e)
{
var run_id = node.id;
var loc_id = node.id;
if(node.text=="Customers with NO runs")
{
run_management_ds.load({
params:{load_type:"customersnotonrun"}
});
}else if(node.parentNode.parentNode){
if(node.parentNode.parentNode.text=="Run Control")
{

//alert(run_id);
run_management_ds.load({
params:{load_type:"runs",run_id:run_id.split(":")[0]}
});
}else{
//run_id = run_id.split(":");
//alert(node.id);
//alert(loc_id);
run_management_ds.load({
params:{load_type:"warehouse",loc_id:loc_id}
});
}
}
}
}
});

function run_management_fn(){ // Here is the function for poping up the Window
var run_management_form = new Ext.form.FormPanel({
id: "run_management_form",
layout:"border",
items:[
new Ext.Panel({
region:'west',
margins: '2 0 5 5',
split:true,
collapsible:true,
//title:'Invoicing',
width: 210,
layout:'accordion',
html:"tree structure",
items: [run_management_panel]
})
,{
region: "center",
padding:"0 0 5 0",
collapsible: false,
items: [run_management_grid]
}]
});

var run_management_win = new Ext.Window({
id:'run_management_win',
layout:'fit',
title:"Manage Runs",
width:750,
height:530,
closable: true,
closeAction:'close',
modal: true,
items:[run_management_form],
buttons:[{
text: "Save",
handler: function(){

}
},{
text:"Cancel",
handler: function(){
run_management_win.close();
}
}]
});
run_management_win.show();
}



Help me Please.............!!! :(( :(( :(( :D

Thanks n Regards,
Pooja

willigogs
17 Oct 2012, 5:53 AM
When close the window you are destroying the components. When you then re-launch the window, the tree panel doesn't exist anymore.

Either set "closeAction: 'hide'" on your window config, or you would need to create a new instance of your west and center panels each time you launch the window (possibly adding the creation of the treepanel inside your show window function).

poojagarg89
18 Oct 2012, 3:00 AM
I tried this closeAction: "hide" but not working and I dont know how to create new instance of west and center panels each time I launch the window..............................can you please provide me an example or can do changes in my code so I can understand how to create new instance each time.........!!!

thanks :)

willigogs
18 Oct 2012, 3:20 AM
Have you tried moving your "run_management_panel" tree (and any other required components) inside your "run_management_fn" function?

poojagarg89
18 Oct 2012, 3:30 AM
yes I tried that too inside the window by doing



var run_management_root=new Ext.tree.TreeNode({
text:'Manage Runs',
id:'root_id',
iconCls:'parent_folder'
});
run_management_root.appendChild(
new Ext.tree.TreeNode({
text:'Customers with NO runs',
scope:this,
iconCls:'red_b'
})
);

Ext.app.runManagementLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
processAttributes : function(attr){


if(attr.loc_name){
attr.text = attr.loc_name;
attr.id = attr.loc_id;
attr.loaded = true;
}
else if(attr.run_name){

var run=(attr.run_id).split(":");
var status;
if(run[2]=="green")
{
status="green_b";
}else{
status="red_b";
}
attr.text = attr.run_name;
attr.id = attr.run_id;
attr.iconCls=status;
attr.loaded = true;
}

}
});
var loading_runmanagement_loader =new Ext.app.runManagementLoader({
id:"runmanagement_loader_id",
dataUrl:projname+'/ShowRunsTree',
baseParams:{load_type:"run_management"}
});
run_management_root.appendChild(
new Ext.tree.AsyncTreeNode({
text:'Run Control',
id:'loading_run_control_id',
expanded:true,
loader:loading_runmanagement_loader
})
);

function run_management_fn(){
var run_management_win = new Ext.Window({
id:'run_management_win',
layout:'fit',
title:"Manage Runs",
width:750,
height:530,
closable: true,
closeAction:'close',
resizable:true,
modal: true,
items:[{
layout:"border",
items:[
new Ext.Panel({
region:'west',
margins: '2 0 5 5',
split:true,
collapsible:true,
//title:'Invoicing',
width: 210,
layout:'accordion',
html:"tree structure",
items: [new Ext.tree.TreePanel({
id: 'run_management_panel',
border:false,
collapsible: false,
autoScroll: true,
rootVisible: true,
layout:"fit",
lines: true,
singleExpand:true,
root:run_management_root,
listeners:{
click:function(node,e)
{
var run_id = node.id;
var loc_id = node.id;
if(node.text=="Customers with NO runs")
{
run_management_ds.load({
params:{load_type:"customersnotonrun"}
});
}else if(node.parentNode.parentNode){
if(node.parentNode.parentNode.text=="Run Control")
{

//alert(run_id);
run_management_ds.load({
params:{load_type:"runs",run_id:run_id.split(":")[0]}
});
}else{
//run_id = run_id.split(":");
//alert(node.id);
//alert(loc_id);
run_management_ds.load({
params:{load_type:"warehouse",loc_id:loc_id}
});
}
}
}
}
})]
})
,{
region: "center",
padding:"0 0 5 0",
layout:"fit",
collapsible: false,
items: [run_management_grid]
}]
}],
buttons:[{
text: "Save",
handler: function(){

}
},{
text:"Cancel",
handler: function(){
run_management_win.close();
}
}]
});
run_management_win.show();
}


Whenever I do this I get other issue as

TypeError: this.ui is null



chrome://firebug/content/blank.gif

this.ui.render(bulkRender); ext-all-debug.js (line 32792)

:( :((:((

willigogs
18 Oct 2012, 3:34 AM
You still haven't put all required components inside the function.

Once you close the window, all components and their children are destroyed. This means the tree, plus any stores, treeNodes, treeLoaders, etc, which are linked are also destroyed.

You will need to create these afresh each time you create the window.