PDA

View Full Version : putting widgets inside InfoPanel



topcoder1
17 Jul 2007, 3:17 PM
I want to add some widgets inside each InfoPanel in the accordion, in particular a treePanel.
I used var treePanel=new xt.TreePanel(parentInfoPanel.id, {...});
and also set layout on the parent InfoPanel and then add treePanel as a child. None of these approaches work as expected. In the first case the TreePanel fell outside of the InfoPanel, see attached image to see what I mean.
is this doable?



var leftnav = new Ext.ux.Accordion('leftnav', {
fitHeight: true,
boxWrap:true,
fitContainer: true
, fitToFrame: true
, useShadow: true
});
for ( var i = 0; i < oElement.nav.length; i++) {
if (oElement.nav[i].title) {

var el=leftnav.add(new Ext.ux.InfoPanel(oElement.nav[i]));

var sub_menu =new xt.TreePanel(el.id, {
animate:true,
enableDD:true,
containerScroll: true,
lines:false,
rootVisible:false,
loader: new Ext.tree.TreeLoader({
// dataUrl:'menu_gen.php'
})
});
var croot = new xt.AsyncTreeNode({
allowDrag:false,
allowDrop:true,
//id:'croot',
text:'Packages and Components',
cls:'croot',
loader:new Ext.tree.TreeLoader({
dataUrl:'menu_gen.php',
createNode: readNode
})
});
/*
var layout = new Ext.BorderLayout(el.id, {
north: {
split: false, initialSize: 10
},
south: {
split: false, initialSize: 10
},
east: {
split: false, initialSize: 10
},
west: {
split: false, initialSize: 10
},
center: { }
});
layout.add('CENTER',sub_menu);
*/
//el.setContent(sub_menu,true);
sub_menu.setRootNode(croot);
sub_menu.render();
croot.expand();

topcoder1
17 Jul 2007, 3:25 PM
In case my intention wasn't stated clear. I just saw exactly what I want from another thread's image attachment:
http://extjs.com/forum/attachment.php?attachmentid=888&d=1183908997
it shows a TreePanel inside an Accordion InfoPanel. how can this be done?

topcoder1
17 Jul 2007, 3:56 PM
I just tried another variant:
var treePanel=new xt.TreePanel(parentInfoPanel.getEl().id, {...});
instead of var treePanel=new xt.TreePanel(parentInfoPanel.id, {...});
this time all the treePanels fall into the last InfoPanel.

And then added some alert statement inside each loop after creating each InfoPanel and the treePanel. Because of the alert delay this time everything works fine as expected. But obviously this is not solution. still need help...

topcoder1
17 Jul 2007, 4:35 PM
It turns out that readNode is doing something wicked: croot for reasons unkown always point to the last croot(the root of the last TreePanel) instead of the root of the corresponding TreePanel, so everything everything gets added to the last TreePanel.... I am still baffled as to how this happens.... I guess I am not sane anymore..
(ps: the correct expression for adding a child can also be var treePanel=new xt.TreePanel(parentInfoPanel.body, {...});)


function readNode(o){

createComponent(o.id, o.text);
}

function createComponent(id, text){
var node = new xt.TreeNode({
text: text,
iconCls:'cmp',
cls:'cmp',
type:'cmp',
id: id,
cmpId:id,
allowDelete:true,
allowEdit:true
});

croot.appendChild(node);

var files = new xt.AsyncTreeNode({
text: 'Files',
allowDrag:false,
allowDrop:true,
iconCls:'folder',
type:'fileCt',
cmpId:id,
allowDelete:false,
children:[],
expanded:true
});

node.appendChild(files);
return node;
}

}

jsakalos
22 Jul 2007, 4:01 PM
Here is code of tree in the InfoPanel that I use on the Accordion Demo Page (http://aariadne.com/accordion-preview) - you can see it in action on the Linked tab.



var lpanel112 = accl11.add(new Ext.ux.InfoPanel('lpanel-112', {
icon:iconPath + 'bell.png'
, autoScroll: true
, maxHeight: 400
, fixedHeight: 260
}));

// tree in the panel
var tree = new Ext.tree.TreePanel(lpanel112.body, {
animate: true
, loader: new Ext.tree.TreeLoader({dataUrl: 'get-nodes.php'})
, containerScroll: true
, enableDD: true
});
var root = new Ext.tree.AsyncTreeNode({
text: 'extjs'
, id: 'extjs'
});
tree.setRootNode(root);
tree.render();
root.expand();

bledford
27 Jul 2007, 11:53 AM
I assumed you can put a grid on an InfoPanel as well but I am not having much luck. I have created roughly the same structure as above, but for some reason the grid never renders. Any pointers?

<div id="center-div" style="height:100%;width:100%">
<div id="pnlCenter" style="height:100%;width:100%;background-color:Aqua"></div>
</div>


var iconPath = 'images/icons/';

//set up Work Breakdown Accordion
var acc = new Ext.ux.Accordion('center-div', {
fitHeight: true,
fitToFrame: true,
fitContainer: true
})
//define a panel
var pnlCent = acc.add(new Ext.ux.InfoPanel('pnlCenter', {
icon:iconPath + 'folder.png'
, autoScroll: true
, maxHeight: 500
, fixedHeight: 460
}));

//set up dataStore for the grid
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'PolicyTransactions.xml'}),
reader: new Ext.data.XmlReader({
record: 'WorkItem',
id: 'WITTSID'
},
['Type', 'Status', 'Priority', 'AssignedResource', 'TransactionCode']
)})
//set up the grid columns
var colModel = new Ext.grid.ColumnModel(
[
{header: "Status", width: 120, dataIndex: 'Status'},
{header: "Priority", width: 180, dataIndex: 'Priority'},
{header: "AssignedResource", width: 115, dataIndex: 'AssignedResource'},
{header: "TransactionCode", width: 100, dataIndex: 'TransactionCode'}
]);
//create the grid
var grid = new Ext.grid.Grid(pnlCent.body, {
ds: dataStore,
cm: colModel
});
dataStore.load();
grid.render();

jsakalos
27 Jul 2007, 12:33 PM
This is supported from ver. 1.1-beta1 up. See http://aariadne.com/accordion-preview?showGrid=true tab Panels. Switch off animation of panel as it doesn't play well with grid.