PDA

View Full Version : After expanding the tree , its not showing all the nodes



renganathan
30 Nov 2011, 6:54 AM
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
29702



In this image , many child nodes are hiding .



Guys please help me to fix this problem

skirtle
30 Nov 2011, 7:57 AM
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.

renganathan
30 Nov 2011, 8:50 PM
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();
}
}