1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    145
    Answers
    3
    Vote Rating
    1
    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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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
    145
    Answers
    3
    Vote Rating
    1
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar