Results 1 to 6 of 6

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

  1. #1
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

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

    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

    [IMG]chrome://firebug/content/blank.gif[/IMG] 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:
    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.............!!!

    Thanks n Regards,
    Pooja

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    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).

  3. #3
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

    Default

    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

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    Have you tried moving your "run_management_panel" tree (and any other required components) inside your "run_management_fn" function?

  5. #5
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213

    Default

    yes I tried that too inside the window by doing

    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
        })
    );
    
    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

    [IMG]chrome://firebug/content/blank.gif[/IMG] this.ui.render(bulkRender); ext-all-debug.js (line 32792)



  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •