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.
PHP Code:
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
PHP Code:
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