PDA

View Full Version : Tree panel Inside Template iS thing possible in EXT JS



sachin sachdeva
21 Sep 2011, 3:46 AM
Hi

I am new to extjs i want a tree panel inside a template . I am successfully getting treepanel in a Ext window but i am not sure if it is possible to get a tree panel inside a template my tree panel inside the window is.


var Tree = Ext.tree;
var root = new Tree.AsyncTreeNode({
text : 'Contribution Folders',
allowDrop : true,
rootVisible : true,
expanded : true,
id : "2"
});
FolderSelectionWindow = new Ext.Window({
title : 'Please select the Group',
layout : 'fit',
model : 'true',
closable : false,
draggable : false,
resizable : false,
id : 'folderSelection',
width : 450,
height : 300,
items : [{
xtype : 'treepanel',
title : 'Select existing Group/Sub Group',
root : root,
id : 'navTree',
autoHeight : false,
autoWidth : true,
autoScroll : true,
enableProgress : false,
animate : true,
containerScroll : true,
rootVisible : true,
shadow : true,
draggable : false,
enableDD : false,
rootVisible : true,
listeners : {
click : function(node) {
NodeName = node.text;
nodef = node.id;
Groupdocid = node.attributes.docid;
folioDocId = Groupdocid;
Ext.getCmp("folderid").setValue(node.id);
/*
* if (node.text == 'Contribution Folders') {
* Ext.getCmp("OK").setDisabled(true); return; }
*/
if (Ext.getCmp("createNew").getValue() == true) {
if (node.attributes.cls != null
&& node.attributes.cls != "icon-editfolio") {
Ext.getCmp("OK").setDisabled(false);
Ext.getCmp("btnsubmit").enable();
} else {
/* Ext.getCmp("OK").setDisabled(true); */
Ext.getCmp("folder").setValue(NodeName);
Ext.getCmp("folderSelection").close();

}
} else {
if (node.attributes.iconCls != null
&& node.attributes.iconCls != "folder") {
/* Ext.getCmp("OK").setDisabled(false); */
Ext.getCmp("folder").setValue(NodeName);
Ext.getCmp("folderSelection").close();
Ext.getCmp("btnsubmit").enable();
} else {
Ext.getCmp("OK").setDisabled(true);
}
}
}
},
loader : new Tree.TreeLoader({
dataUrl : 'folders.jsp',
requestMethod : 'GET'
}),
dropConfig : {
appendOnly : true
}
}],
buttons : [{
text : 'CLOSE',
handler : function() {
Ext.getCmp("folderSelection").close();
}
} /*
* { text : 'OK', id : 'OK', disabled : true,
* handler : function() {
* Ext.getCmp("folder").setValue(NodeName);
* Ext.getCmp("folderSelection").close(); } }
*/]
});
FolderSelectionWindow.show();

My code for template is


var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.XTemplate('<tpl for=".">',
'<div class="preview" id="preview">', '{content}',
'<tpl if="this.isImage() == false">',
'<img src="../../%7Bimage%7D" width="250"/>', '</tpl>', '</div>',
'</tpl>', {
isImage : function() {
var Tree = Ext.tree;
var root = new Tree.AsyncTreeNode({
text : 'Contribution Folders',
allowDrop : true,
rootVisible : true,
expanded : true,
id : "2"
});
FolderSelectionWindow = new Ext.Window({
title : 'Please select the Group',
layout : 'fit',
model : 'true',
closable : false,
draggable : false,
resizable : false,
id : 'folderSelection',
width : 450,
height : 300,
items : [{
xtype : 'treepanel',
title : 'Select existing Group/Sub Group',
root : root,
id : 'navTree',
autoHeight : false,
autoWidth : true,
autoScroll : true,
enableProgress : false,
animate : true,
containerScroll : true,
rootVisible : true,
shadow : true,
draggable : false,
enableDD : false,
rootVisible : true,
listeners : {
click : function(node) {
NodeName = node.text;
nodef = node.id;
Groupdocid = node.attributes.docid;
folioDocId = Groupdocid;
Ext.getCmp("folderid").setValue(node.id);
/*
* if (node.text == 'Contribution Folders') {
* Ext.getCmp("OK").setDisabled(true); return; }
*/
if (Ext.getCmp("createNew").getValue() == true) {
if (node.attributes.cls != null
&& node.attributes.cls != "icon-editfolio") {
Ext.getCmp("OK").setDisabled(false);
Ext.getCmp("btnsubmit").enable();
} else {
/* Ext.getCmp("OK").setDisabled(true); */
Ext.getCmp("folder").setValue(NodeName);
Ext.getCmp("folderSelection").close();

}
} else {
if (node.attributes.iconCls != null
&& node.attributes.iconCls != "folder") {
/* Ext.getCmp("OK").setDisabled(false); */
Ext.getCmp("folder").setValue(NodeName);
Ext.getCmp("folderSelection").close();
Ext.getCmp("btnsubmit").enable();
} else {
Ext.getCmp("OK").setDisabled(true);
}
}
}
},
loader : new Tree.TreeLoader({
dataUrl : 'folders.jsp',
requestMethod : 'GET'
}),
dropConfig : {
appendOnly : true
}
}],
buttons : [{
text : 'CLOSE',
handler : function() {
Ext.getCmp("folderSelection").close();
}
} /*
* { text : 'OK', id : 'OK', disabled : true,
* handler : function() {
* Ext.getCmp("folder").setValue(NodeName);
* Ext.getCmp("folderSelection").close(); } }
*/]
});
FolderSelectionWindow.show();
}
})
});




Now the issue is when ever i tried to expand the row a separate window opens and tree panel renders in that window. My requirement is i want that tree panel inside the template.......please help