PDA

View Full Version : ColumnTree dynamic columns rendering



kankit28
16 Feb 2010, 12:31 AM
Hi,

I am dynamically rendering the columnTree while i click on the combobox selection...

I am calling the function "reLoadTree" and passing the column array in that along with the reportid

when i pass this parameter to the reportTree.js file .
The root is getting reloaded but the column model is not getting updated .
Need urgent help
The code from reportTree.js is as follows :

/*********************************************************************/

GO.dashboard.reportTree = function(config){
if(!config)
{
config= {};
}
if(!config.root)
{
config.root='root';
}

this.reportId='';
var bbar = [];

this.bottomMessage = new Ext.Toolbar.Button({
id:'bottomMessage',
name :'bottomMessage',
iconCls:'show-bbar',
cls: 'x-btn-text-icon',
scope: this,
text:'AOL © 2010'
});

bbar.push(this.bottomMessage);

this.treePanel = new Ext.tree.ColumnTree({
region:'center',
id:'treeRe',
cls:'x-column-tree',
borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
layout:'fit',
split:true,
width: '100%',
lines:true,
pathSeparator:'\\',
animate:true,
loader: new Ext.tree.TreeLoader(
{
dataUrl:GO.settings.modules.dashboard.url+'json.php',
baseParams:{task: 'showreports',reportId:config.id},
preloadChildren:true,
uiProviders: {
'col': Ext.tree.ColumnNodeUI
}
}),
columns:[
{
header: 'Name',
width: 400,
dataIndex: 'text'
}, {
header: 'Id',
width: 200,
dataIndex: 'id'
}, {
header: 'Test',
width: 200,
dataIndex: 'Test'
}
],
collapsed: config.treeCollapsed,
containerScroll: true,
rootVisible: config.treeRootVisible,
collapsible:true,
ddAppendOnly: true,
containerScroll: true,
ddGroup : 'dashboardDD',
enableDD:true,
selModel:new Ext.tree.MultiSelectionModel()
});

// set the root node
this.rootNode = new Ext.tree.AsyncTreeNode({
text: 'Reports',
draggable:false,
id: config.root
});

config['bbar']=new Ext.Toolbar({
items:[bbar]
});
config['region']='center';

this.treePanel.setRootNode(this.rootNode);

this.treePanel.on('destroy',function(){
this.destroy();
},this,true);



config['layout']='border';

config['items']=[this.treePanel];

GO.dashboard.reportTree.superclass.constructor.call(this, config);
};

Ext.extend(GO.dashboard.reportTree, Ext.Panel, {
setId: function(Id){
this.bottomMessage.id = 'bottomMessage-'+Id;
this.reportId = Id;
},
setPath : function(item,text)
{
this.reportId = item;

var execReportTabId = GO.reportTabPanels.tabIdInitial+this.reportId;
var execReportTab = new ExecReportTab();

if(!Ext.get(execReportTabId)){
GO.mainLayout.tabPanel.add(new ExecReportTab({title:text,id:execReportTabId,reportId:this.reportId}));
}
execReportTab.show();
GO.mainLayout.tabPanel.setActiveTab(execReportTabId);
},
setRootNode : function(id, path)
{
this.rootNode.id=id;
this.rootNode.attributes.id=id;

this.rootNode.reload();

},
setTreeId : function(Id)
{
GO.dashboard.reportTree.id = Id;
},
LoadTree:function(rpId){
this.treePanel.getLoader().baseParams = {reportId:rpId,task:'showreports'};
},
destroy: function() {
console.log("Destroy");
this.onDestroy();
}
,
onDestroy: function(){
Ext.destroy();
console.log("Empty");
},

reLoadTree: function(column,rpId){
console.log(this.treePanel.columns);
console.log(Ext.getCmp('treeRe'));
this.destroy();
this.treePanel.destroy();
this.treePanel.columns = column;
console.log(this.treePanel.columns);

this.treePanel.getLoader().baseParams = {reportId:rpId,task:'showreports'};
this.treePanel.getLoader().load(this.treePanel.getRootNode());

}
});
/*********************************************************************/

Any help would be highly appreciated
Thanks
Ankit