1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default Unanswered: After expanding the tree , its not showing all the nodes

    Unanswered: After expanding the tree , its not showing all the nodes


    Hi,

    I have created tree inside the accordion panel , while expanding all the root nodes on scroll down it doesn’t

    show all children..

    Please refer this image
    accordion.png



    In this image , many child nodes are hiding .



    Guys please help me to fix this problem
    Thanks,

    RENGANATHAN M G

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please post your code. At a guess I'd say you've got a nesting issue where the scrollbar is on a wrapper container rather than the tree itself.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default here is my code

    here is my code


    Code:
    Ext.Loader.setConfig({enabled:true});
    powerActiveTab        = "";
    PowerActiveTabField    = "";    
    PowerChildIframeField    = "";
    invActiveTab        = "";
    invActiveTabField    = "";
    RUActiveTab            = "";
    RUActiveTabField    ="";
    CenterIFrameObj        = "";
    var inv_activetab    = "";
    var power_activetab    = "";
    var ru_activetab    = "";
    var activeTreeParams    = "";
    Ext.onReady(function(){
        Ext.QuickTips.init();
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        Ext.data.Connection.prototype.disableCaching = true;
        var lab             = "";
        var org             = "";
        var aisle             = "";
        var aisle_location     = "";
        inv_activetab    = new Ext.form.TextField(
        {
            id                : 'inv_activetab',
            name            : 'inv_activetab',
            hidden            :true
        });
        power_activetab    = new Ext.form.TextField(
        {
            id                : 'power_activetab',
            name            : 'power_activetab',
            hidden            :true
        });
        ru_activetab    = new Ext.form.TextField(
        {
            id                : 'ru_activetab',
            name            : 'ru_activetab',
            hidden            :true
        });
        activeTreeParams    = new Ext.form.TextField(
        {
            id                : 'active_tree_param',
            name            : 'active_tree_param',
            hidden            :true
        });
        inv_activetab.setValue(0);
        power_activetab.setValue(0);
        ru_activetab.setValue(0);
        var myprofilestore         = Ext.create('Ext.data.TreeStore', 
        {
            autoLoad            : true,     
            proxy                : 
            {
                type            : 'ajax',
                url                : '../src/profile_data.php',
                actionMethods    : 'POST'
            },
            root                : 
            {
                id                : 'myprofiledata'
            }
        });
        var powerTreeStore         = Ext.create('Ext.data.TreeStore', 
        {
            proxy                : {
                type            : 'ajax',
                url                : 'lab_tree.class.php'//'get_tree_nodes.php'
            },
            
            root: {
                text            : 'Labs',
                id                : '0|getLabs',
                expanded            : true
            },
            folderSort            : true,
            sorters: [{
                property        : 'text',
                direction        : 'ASC'
            }]
        });
        var invTreeStore         = Ext.create('Ext.data.TreeStore', 
        {
            proxy                : {
                type            : 'ajax',
                url                : 'lab_tree.class.php'//'get_tree_nodes.php'
            },
            
            root                : {
                text            : 'Labs',
                id                : '0|getLabs',
                expanded        : true
            },
            folderSort            : true,
            sorters                : [{
                property        : 'text',
                direction        : 'ASC'
            }]
        });
        var ruStore             = Ext.create('Ext.data.TreeStore', 
        {
            proxy                : {
                type            : 'ajax',
                url                : 'lab_tree.class.php'//'get_tree_nodes.php'
            },
            
            root                : {
                text            : 'Labs',
                id                : '0|getLabs',
                expanded        : true
            },
            folderSort            : true,
            sorters                : [{
                property        : 'text',
                direction        : 'ASC'
            }]
        });
        var invTree             = Ext.create('Ext.tree.Panel', 
        {
            title                : 'Inventory',
            id                    : 'invTree',
            lines                : true,
            height                 : '50%',
            containerScroll        : true,
            autoScroll            : true,
            frame                :true,
            iconCls                : 'icon-basket',
            style                : 'padding-bottom: 5px', 
            store                : invTreeStore,
            rootVisible            : false,
            listeners            : 
            {
                    itemclick      : function clickListener (view, rec, item, index, eventObj) 
            { 
    
                lab             = rec.raw.chain['lab'];
                org             = rec.raw.chain['org'];
                aisle             = rec.raw.chain['aisle'];
                aisle_location     = rec.raw.chain['aisle_location'];
                var TreeParams = "&lab="+lab+"&aisle="+aisle+"&aisle_location="+aisle_location;
                var ActiveTreeParams = lab+","+aisle+","+aisle_location;
                var invActiveTab = document.getElementById("inventory_active_tab").value;
                var LoadChildIframe = true;
                var FileName = "";
                if(document.getElementById('centerIframe').src != "" && document.getElementById('centerIframe').src != "undefined")
                {
                    FileName = getFileNameFromUrl(document.getElementById('centerIframe').src);
                    if(FileName != "inventory_main.php")
                    {
                        LoadChildIframe = false;
                    }
                }
                if(LoadChildIframe)
                {
                    window.frames['centerIframe'].document.getElementById("active_tree_chain").value = ActiveTreeParams;
                        
                if(invActiveTab == "deviceList")
                {
                    var TargetUrl = "inventory_device.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("devListIframe").src = TargetUrl;
                }
                if(invActiveTab == "termservers")
                {
                    var TargetUrl = "inventory_terminalserver.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("termListIframe").src = TargetUrl;
                }
                if(invActiveTab == "serverList")
                {
                    var TargetUrl = "inventory_pcserver.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("serverListIframe").src = TargetUrl;
                }
                if(invActiveTab == "testbedList")
                {
                    var TargetUrl = "inventory_list_testbeds.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("testbedListIframe").src = TargetUrl;
                }
                if(invActiveTab == "eolList")
                {
    
                    var TargetUrl = "inventory_eol.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("eolListIframe").src = TargetUrl;
                }
                if(invActiveTab == "costList")
                {
    
                    var TargetUrl = "inventory_cost.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("costListIframe").src = TargetUrl;
                    
                }
                if(invActiveTab == "schedulecollectionInv")
                {
                    var TargetUrl = "inventory_schedule.php?&action=list"+TreeParams;
                    window.frames['centerIframe'].document.getElementById("scheduleListIframe").src = TargetUrl;
                }
                }
                else
                {
                    document.getElementById('centerIframe').src = "inventory_main.php?childIframeParams="+ActiveTreeParams;
                }
            }
            }
        });
        Ext.getCmp('invTree').on
        (
            'expand', function(invTree,accordion)
            {
                document.getElementById('centerIframe').src= "../src/inventory_main.php?activeTab="+inv_activetab.getValue()+"&treeParam="+Ext.getCmp('active_tree_param').getValue();
                document.getElementById("homenav").setAttribute("class", "topnavLink");
                document.getElementById("searchnav").setAttribute("class", "topnavLink");
                document.getElementById("profilenav").setAttribute("class", "topnavLink");
                inv_activetab.setValue(0);
            }
        );
        var powerstore             = Ext.create('Ext.data.TreeStore', 
        {
            autoLoad            : true,     
            proxy                : 
            {
                type            : 'ajax',
                url                : '../src/powerdata.php',
                actionMethods    : 'POST'
            },
            root                : 
            {
                id                : 'powerdata'
            }
        });
        PowerActiveTabField     = new Ext.form.TextField(
        {
            name                :'power_active_tab',
            height                : 50,
            width                : 50,
            id                :'power_active_tab',
            fieldLabel            : 'Power Active Tab',
            allowBlank            : false,
            anchor                :'95%',
            hidden                 : true
        });
        RUActiveTabField     = new Ext.form.TextField(
        {
            name                :'ru_active_tab',
            height                : 50,
            width                : 50,
            id                    :'ru_active_tab',
            fieldLabel            : 'RU Active Tab',
            allowBlank            : false,
            anchor                :'95%',
            hidden                 : true
        });
        PowerChildIframeField     = new Ext.form.TextField(
        {
            name                :'power_child_iframe',
            height                : 50,
            width                : 50,
            id                    :'power_child_iframe',
            fieldLabel            : 'Power Child Iframe',
            allowBlank            : false,
            height                : 10,
            anchor                :'95%',
            value                : '',
            hidden                 : false
        });
        invActiveTabField     = new Ext.form.TextField(
        {
            name                :'inventory_active_tab',
            height                : 50,
            width                : 50,
            id                    :'inventory_active_tab',
            fieldLabel            : 'inv Active Tab',
            allowBlank            : false,
            anchor                :'95%',
            hidden                 : false
        });
        var powerTreePanel     = Ext.create('Ext.tree.TreePanel', 
        {
        title                    : 'Power',
        id                        : 'powerTreeID',
        lines                    : true,
        height                     : '50%',
        containerScroll            : true,
        autoScroll                : true,
        frame                    : true,
        iconCls                    : 'icon-basket',
        style                    : 'padding-bottom: 5px', 
        store                    : powerTreeStore,
        rootVisible                : false,
            viewConfig: 
        {
                plugins: 
            {
                    ptype: 'treeviewdragdrop'
                }
            },
        
        listeners            : 
        {
            itemclick  : function clickListener (view, rec, item, index, eventObj) 
            { 
                lab             = rec.raw.chain['lab'];
                org             = rec.raw.chain['org'];
                aisle             = rec.raw.chain['aisle'];
                aisle_location     = rec.raw.chain['aisle_location'];
                var TreeParams = "&lab="+lab+"&aisle="+aisle+"&aisle_location="+aisle_location;
                var ActiveTreeParams = lab+","+aisle+","+aisle_location;
                var PowerActiveTab = document.getElementById("power_active_tab").value;    
                var LoadChildIframe = true;
                var FileName = "";
                if(document.getElementById('centerIframe').src != "" && document.getElementById('centerIframe').src != "undefined")
                {
                    FileName = getFileNameFromUrl(document.getElementById('centerIframe').src);
                    if(FileName != "power_main.php")
                    {
                        LoadChildIframe = false;
                    }
                }
                if(LoadChildIframe)
                {
                    window.frames['centerIframe'].document.getElementById("pduHealthStatus").value = "";
                    window.frames['centerIframe'].document.getElementById("active_tree_chain").value = ActiveTreeParams;
                    if(PowerActiveTab == "pduList")
                    {
                        var TargetUrl = "power_pdu.php?&action=list"+TreeParams;
                        window.frames['centerIframe'].document.getElementById("PDUListIframe").src = TargetUrl;
                    }
                    else if(PowerActiveTab == "outletDeviceMap")
                    {       
                        var TargetUrl = "power_outlets_map.php?&action=list"+TreeParams;    
                        window.frames['centerIframe'].document.getElementById("mapOutletsIFrame").src = TargetUrl;
                    }
                    else if(PowerActiveTab == "showOutlets")
                    {       
                        var TargetUrl = "power_show_outlets.php?&action=list"+TreeParams;
                        window.frames['centerIframe'].document.getElementById("showOutletsIFrame").src = TargetUrl;
                    }
                    else if(PowerActiveTab == "powerScheduler")
                    {               
                        var TargetUrl = "power_outlets_schedule.php?&action=list"+TreeParams;
                        window.frames['centerIframe'].document.getElementById("schedulerIFrame").src = TargetUrl;
                    }
                    else if(PowerActiveTab == "powerHealthCharts")
                    {
                        var TargetUrl = "power_pdu_health.php?&action=getPduHealth"+TreeParams;
                        window.frames['centerIframe'].document.getElementById("pduHealthIFrame").src = TargetUrl;
                    }
                    else if(PowerActiveTab == "powerEvents")
                    {
                        var TargetUrl = "event_logs.php?action=list_logs&tool_type=power"+TreeParams;
                        window.frames['centerIframe'].document.getElementById("powerEventsIFrame").src = TargetUrl;
                    }
                    else if(PowerActiveTab == "powerConsumption")
                    {
                        var TargetUrl = "power_consumption.php?&action=list"+TreeParams;      
                        window.frames['centerIframe'].document.getElementById("powerConsumptionIFrame").src = TargetUrl;
                    }
                }
                else
                {
                    document.getElementById('centerIframe').src = "power_main.php?childIframeParams="+ActiveTreeParams;
                }
            }                                                                                                  
        }
        });
        Ext.getCmp('powerTreeID').on
        (
            'expand', function(node,checked)
            {
                
                var ActiveTreeParam = (document.getElementById('active_tree_param').value) ? document.getElementById('active_tree_param').value : "";
                document.getElementById('centerIframe').src= "../src/power_main.php?activeTab="+power_activetab.getValue()+"&treeParam="+ActiveTreeParam;
                document.getElementById("homenav").setAttribute("class", "topnavLink");
                document.getElementById("searchnav").setAttribute("class", "topnavLink");
                document.getElementById("profilenav").setAttribute("class", "topnavLink");
                power_activetab.setValue(0);
            }
        );
          var ruTree = new Ext.tree.TreePanel(
        {
    
          title                : 'Resource Utilization',
          id                : 'ruTree',
          lines                : true,
          height             : '50%',
          containerScroll    : true,
          autoScroll        : true,
          frame                :true,
          iconCls            : 'icon-basket',
          style                : 'padding-bottom: 5px', 
          store                : ruStore,
          rootVisible        : false,
          listeners            : 
            {
                itemclick  : function clickListener (view, rec, item, index, eventObj) 
                {     
                    lab             = rec.raw.chain['lab'];
                    org             = rec.raw.chain['org'];
                    aisle             = rec.raw.chain['aisle'];
                    aisle_location     = rec.raw.chain['aisle_location'];
                    
                    var TreeParams = "&lab="+lab+"&aisle="+aisle+"&aisle_location="+aisle_location;
                    var ActiveTreeParams = lab+","+aisle+","+aisle_location;
                    var RUActiveTab = document.getElementById("ru_active_tab").value;
                    var LoadChildIframe = true;
                    var FileName = "";
                    if(document.getElementById('centerIframe').src != "" && document.getElementById('centerIframe').src != "undefined")
                    {
                        FileName = getFileNameFromUrl(document.getElementById('centerIframe').src);
                        if(FileName != "ru_main.php")
                        {
                            LoadChildIframe = false;
                        }
                    }
                    if(LoadChildIframe)
                    {
                        window.frames['centerIframe'].document.getElementById("active_tree_chain").value = ActiveTreeParams;
                        if(RUActiveTab == "deviceUtil")
                        {
                            var TargetUrl = "ru_device.php?&action=list"+TreeParams;
                            window.frames['centerIframe'].document.getElementById("deviceUtilIframe").src = TargetUrl;
                        }
                        else if(RUActiveTab == "testbedRUList")
                        {       
                            var TargetUrl = "ru_list_testbeds.php?&action=list"+TreeParams;    
                            window.frames['centerIframe'].document.getElementById("testbedRUListIframe").src = TargetUrl;
                        }
                        else if(RUActiveTab == "pcserverUtilList")
                        {       
                            var TargetUrl = "ru_pcserver.php?&action=list"+TreeParams;
                            window.frames['centerIframe'].document.getElementById("pcserverUtilListIframe").src = TargetUrl;
                        }
                        else if(RUActiveTab == "termservers")
                        {               
                            var TargetUrl = "inventory_terminalserver.php?&action=list"+TreeParams;
                            window.frames['centerIframe'].document.getElementById("devListIframe").src = TargetUrl;
                        }
                        else if(RUActiveTab == "schedulecollectionRU")
                        {
                            var TargetUrl = "ru_schedule.php?&action=getPduHealth"+TreeParams;
                            window.frames['centerIframe'].document.getElementById("scheduleRUListIframe").src = TargetUrl;
                        }
                    }
                    else
                    {
                        document.getElementById('centerIframe').src = "ru_main.php?childIframeParams="+ActiveTreeParams;
                    }
                }
            }
        });
        Ext.getCmp('ruTree').on
        (
            'expand', function(ruTree,accordion)
            {
                document.getElementById('centerIframe').src= "../src/ru_main.php?activeTab="+ru_activetab.getValue();
                document.getElementById("homenav").setAttribute("class", "topnavLink");
                document.getElementById("searchnav").setAttribute("class", "topnavLink");
                document.getElementById("profilenav").setAttribute("class", "topnavLink");
                ru_activetab.setValue(0);
    
            }
        );
        var navPanel = new Ext.Panel(
        {
            margins            :'5 0 5 5',
            id            : 'accpanel',
            split            :true,
            width            : 220,
            layout            :'accordion',
            baseCls            :'accordianStyle',
            bodyStyle        : 'border-top:none;',
            items            : 
            [
                
                invTree,
                powerTreePanel, 
                ruTree,
                {
                    xtype        : 'panel', // << fake hidden panel
                    id            : 'fackPanel',
                    collapsed    : false
                    
                }
            ]
        });
        var vport = new Ext.Viewport(
        {
            layout : 'border',
            width  : '90%',
            padding: 5,
            items  : 
            [
                {    height         : 70,
                    autoWidth      : true,
                    region         : 'north',
                    border         : true,
                    id            : 'northVpId',
                      layout        : 'fit',
                    contentEl     : 'northIframe'
                },    
                {
                    width          : 220,
                    region         : 'west',
                    layout        : 'fit',
                    collapsible    : true,
                    title        : 'Navigation Panel',
                    items        : [navPanel,PowerActiveTabField,PowerChildIframeField,invActiveTabField,RUActiveTabField,activeTreeParams]
                },
                {
                    autoWidth    :true,
                    region         : 'center',
                    id            : 'centerVpId',
                      layout        : 'fit',
                    contentEl     : 'centerIframe'
                }
            ]
        });
        document.getElementById('fackPanel').style.display="none";
        Ext.getCmp('fackPanel').expand();
        if(profile != '')
        {    
            document.getElementById('centerIframe').src = "../src/profile_main.php";
        }
        else
        {
            document.getElementById('centerIframe').src = "../src/dashboard.php";
        }
        document.getElementById('centerIframe').width = '100%';
        document.getElementById('centerIframe').height = '100%';
        document.getElementById('centerIframe').style.display = 'block';
        Ext.EventManager.addListener("homenav", 'click', function(){
        document.getElementById('centerIframe').src = 'dashboard.php';
        document.getElementById("homenav").setAttribute("class", "active");
        document.getElementById("searchnav").setAttribute("class", "topnavLink");
        document.getElementById("profilenav").setAttribute("class", "topnavLink");
        Ext.getCmp('fackPanel').expand();
    });
        Ext.EventManager.addListener("profilenav", 'click', function(){
        document.getElementById('centerIframe').src = 'profile_main.php';
        document.getElementById("profilenav").setAttribute("class", "active");
        document.getElementById("homenav").setAttribute("class", "topnavLink");
        document.getElementById("searchnav").setAttribute("class", "topnavLink");
        Ext.getCmp('fackPanel').expand();
    });
    Ext.EventManager.addListener("searchnav", 'click', function(){
        document.getElementById('centerIframe').src = 'search_main.php';
        document.getElementById("searchnav").setAttribute("class", "active");
        document.getElementById("profilenav").setAttribute("class", "topnavLink");
        document.getElementById("homenav").setAttribute("class", "topnavLink");
        Ext.getCmp('fackPanel').expand();
    });
    });
    function highLightNode()
    {
        //alert('select node');
        var loader  = Ext.getCmp('powerTreeID').getLoader();
        loader.on("load", function(a,b,c)
        {
            console.log('select node');
            //b.findChild("id",1, true).select(); // can find by any parameter in the json
        });
    }
    function getFileNameFromUrl(url)
    {
        url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
        url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
        url = url.substring(url.lastIndexOf("/") + 1, url.length);
        return url;
    }
    function expandPanel(pname, indval)
    {
        if(pname == 'inv')
        {    
            inv_activetab.setValue(indval);
            Ext.getCmp('invTree').expand();
        }
        else if(pname =='pow' )
        {
            power_activetab.setValue(indval);
            Ext.getCmp('powerTreeID').expand();
        }
        else if(pname == 'ru')
        {
            ru_activetab.setValue(indval);
            Ext.getCmp('ruTree').expand();
        }
    }
    Thanks,

    RENGANATHAN M G

Thread Participants: 1

Tags for this Thread