PDA

View Full Version : how call a TreeLoader or define a loader in a card layout



ratamaster
27 Jun 2008, 10:22 PM
Hi
I'm developing an app, border layout approach.
I have a left region with some links and a right-center region which displays the data from the left links.
When the app loads, it triggers an server request that I want to avoid on loading




..................
//this is the center region:
var contentPanel = {
id: 'content-panel',
region: 'center', layout
layout: 'card',
margins: '5 5 5 0',
activeItem: 0,
border: false,
items: [showGrids]
};


var viewport = new Ext.Viewport({
layout:'border'
,title: 'Ext Layout Browser'
,items:[{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},contentPanel
,{
region:'west'
,title:'Main Menu'
,width:220
,split:true
,collapsible:true
,margins: '5 0 5 5'
,items: [treePanel]
}]
});

..................


This is showGrids ( used in contentPanel as you can see above ) :



var showGrids = {
id:'showGrids-panel',
title: 'Calculation',
iconCls: 'icon-grid',
layout:'border',
bodyBorder: false,
defaults: {
collapsible: true
,split: true
,animFloat: false
,autoHide: false
,useSplitTips: true
},
items: [{
title: 'Imported Files'
,region:'west'
,floatable: false
,margins: '5 0 0 0'
,width: 272
,minSize: 100
,maxSize: 272
,items: [gridlist] //*************HERE IS MY PROBLEM
},{
id: 'grid-panel',
region:'center',
layout: 'card',
margins: '5 0 0 0',
activeItem: 0,
//border: false,
items: [ini,editgrid]
}]
};


this is gridlist, a ColumnTree inside west region of showGrids:



iap.gridList = Ext.extend(Ext.tree.ColumnTree, {
border:false
,initComponent:function() {
Ext.apply(this, {
//el:'tree-ct',
//cls: 'grid-icon-class',
autoWidth:true,
autoHeight:true,
rootVisible:false,
autoScroll:true,
columns:[{
header:'Name'
,width:170
,dataIndex:'ImpDateName'
,id: 'id'
},{
header:'Date'
,width:100
,dataIndex:'ImpFileDate'
}],

loader: new Ext.tree.TreeLoader({
dataUrl:'./menuloaders/iap.grid.menu.php',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
text:'Tasks'
})

});


iap.gridList.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

iap.gridList.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('gridList', iap.gridList);
var gridlist=new iap.gridList();


While the code loads, this is executed:

loader: new Ext.tree.TreeLoader({
dataUrl:'./menuloaders/iap.grid.menu.php',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),


I don't want this behavior, I want that this is loaded when I click on the left link that shows the ColumnTree.

This is the code that activates the center content:



treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
if(Ext.getCmp('content-panel').layout.activeItem.id=='showGrids-panel'){
gridlist.root.reload();//this reloads the tree

}

}
});

Could I define the ColumnTree loader on treePanel.on('click', function(n){.... ?

ratamaster
29 Jun 2008, 11:43 AM
Do you know if it is possible to define the loader outside the TreePanel config???