PDA

View Full Version : making a tree child load a center rigion of the container on click



mohaskuar
24 Jun 2012, 11:30 PM
i have created a viewport with west side filled by treepanel how can i make the center region appear with on clicking different tree childs...here is tree.js/*



Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', 'resources/ux');

Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel',
'Ext.ux.layout.Center'
]);


Ext.onReady(function(){

var contentPanel = {

id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 1,
border: true,
//items: layoutExamples
};

var device_store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'tree/Device_Manager.json'
}
});


var policy_store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'tree/policy.json'
}
});


var report_store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'tree/report.json'
}
});



var system_store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'tree/System_Manager.json'
}
});




var devicePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Device Manager',
region:'north',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: device_store
});

var policyPanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel2',
title: 'Policy Manager',
region:'south',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: policy_store
});


var reportPanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel3',
title: 'Report Manager',
region:'south',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: report_store
});


var systemPanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel4',
title: 'System Manager',
region:'south',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: system_store
});









Ext.create('Ext.Viewport', {
layout: 'border',
title: 'INSA UI v1.0',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1>INSA DDMS, v1.0</h1>',
height: 30
},{ collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
id: 'layout-browser',
region:'west',
border: true,
split:true,
width: 275,
minSize: 100,
maxSize: 500,
items: [ devicePanel,policyPanel,reportPanel,systemPanel]
},
contentPanel
],
renderTo: Ext.getBody()
});
});


(https://www.google.com/search?num=20&hl=en&newwindow=1&noj=1&sa=X&ei=ExHoT9oCg7_wA-rHrdoK&ved=0CAgQvwUoAQ&q=i+have+created+a+viewport+with+west+side+filled+by+treepanel+how+can+i+make+the+center+region+appear+with+on+clicking+different+tree+elements&spell=1&biw=1440&bih=797)

scottmartin
25 Jun 2012, 1:59 PM
Have a look at:
http://www.sencha.com/forum/showthread.php?226285

Regards,
Scott.

mohaskuar
26 Jun 2012, 3:21 AM
10ks. problem solved

mohaskuar
29 Jun 2012, 3:50 AM
i wanted to autoload html or php file in the center region of a container when a tree child is clicked......here is the code i used.
var contentPanel = {

id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 1,
items:[
{
loader: {
url: 'array-grid.php',
renderer: function (loader, response, active) {
var text = response.responseText;
loader.getTarget().update(text, true);
return true;
},
scripts: true,
autoLoad: true
},
title:'tab panel one',
itemId:1
},{
xtype:'tabpanel',
title:'tab panel two*',
itemId:2
},{
id:3,
xtype:'tabpanel',
title:'tab panel three',
html:'this is tab panel three',
itemId:3
}
],
border: true,

};
and the listener for the tree child


listeners: {

itemclick: {
fn:clicklistner
}
}
and the function
function clicklistner(view, record, item, index, event) {

indx=record.data.index;

var p1=Ext.getCmp('content-panel').getLayout();

p1.setActiveItem(indx);


}

this is code works fine when am not using the Loader for the container....
this is the error message on firebug
TypeError: Ext.getCmp("content-panel") is undefined

i appreciate....

scottmartin
29 Jun 2012, 5:34 AM
I would refrain from using id's in your code. Please use itemId in the future.

Since you already have a variable assigned, you can simply use that
var p1 = contentPanel.getLayout();

Scott.

mohaskuar
29 Jun 2012, 5:44 AM
i tried to change it like you sayed....but still the same
TypeError: contentPanel.getLayout is not a function

scottmartin
29 Jun 2012, 8:01 AM
My mistake.. I read your code to fast.

You need to create an instance of your panel.. You are simply creating an object.



var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody()
});

var pnl = panel.getLayout();
console.log(pnl);


Scott.

mohaskuar
2 Jul 2012, 11:05 PM
works somehow with a bit change on the content panel...here is the code



var contentPanel = Ext.create('Ext.panel.Panel', {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
items:[
{
autoLoad:{ url: 'array-grid.html'},
title:'load griiid here',
itemId:1
},{
xtype:'tabpanel',
title:'tab panel two*',
itemId:2
},{
id:3,
xtype:'tabpanel',
title:'tab panel three',
html:'this is tab panel three',
itemId:3
},


{
id:4,
xtype:'tabpanel',
title:'tab panel four',
html:'this is tab panel four',
itemId:4
}

],
border: true,
//items: layoutExamples
}

and the function
function clicklistner(view, record, item, index, event) {

nodeId = record.data.id;
htmlId = item.id;
var indx=record.data.index;
var p1=contentPanel.getLayout().setActiveItem(indx);
}


this works fine but when i change the activeItem to something other than 0,my file will not be loaded in the content panel but other static properties of the panel display....what can i do now?

scottmartin
3 Jul 2012, 7:34 AM
Are you trying to render to a panel that is not ready? Not sure I understand .. new issue?

Scott.

mohaskuar
13 Sep 2012, 4:52 AM
now am using mvc...and every little thing seems perfect and easy. 10ks