PDA

View Full Version : How to render tree inside the Window



sachin sachdeva
17 Mar 2011, 2:07 AM
Hello i need to render my tree inside the window.My requirement is on clicking the button there should be a window and inside that window there must be a tree.....
My flow of application is as follow
Code on button click


margin: '150px',
xtype : 'button',
text: 'Click me',
anchor: '50%',
handler : function() {
CheckInPopUp();
}

CheckinPop Code


function CheckInPopUp() {
chkinpopwin = new Ext.Window({
title : 'Check-In Revision Details',
layout : 'fit',
closable : false,
id : 'chkindetailsid',
width : 500,
height : 350,
items:[
foldersPanel = new Ext.Panel({
el : 'tree-div',--//when i remove this then window is opening but wen not then displays this.el.is null
title : 'Browse Folders',
border : false,
iconCls : 'nav'
})
],
constrain : true,
buttons : [{
text : 'CLOSE',
handler : function() {
Ext.getCmp('chkindetailsid').close();

}
}]
});
chkinpopwin.show();
}

Code for el that is tree-div


Ext.onReady(function() {
initDocumentGrid : function() {
var Tree = Ext.tree;
var Tree2 = Ext.ux.FileTreePanel;

var Tree1 = Tree.TreePanel;
tree = new Tree2({
el : 'tree-div',
autoHeight : false,
autoWidth : true,
autoScroll : true,
enableProgress : false,
animate : true,
loader : new Tree.TreeLoader({
dataUrl : 'folders.jsp',
requestMethod : 'GET'
}),
containerScroll : true,
//ddGroup : 'GridDD',
enableDD : true,
rootVisible : true,
shadow : false,
enableDrop : false,
dropConfig : {
appendOnly : true
}
});

// set the root node
var root = new Tree.AsyncTreeNode({
text : 'Contribution Folders',
allowDrop : true,
rootVisible : true,
expanded : true,

id : "2"

});
tree.setRootNode(root);


tree.render();



},
init : function() {

this.initDocumentGrid();

}

});



each time i place el inside panel i am getting error this.el.dom is null ......plz tell me where i am mistaking .........(:|