PDA

View Full Version : How to assign zIndexManager for panel having 'chart' and 'grid' as child components.



Mahesh Sakunala
23 Jul 2012, 4:34 AM
Hi guys,
I am very newbie to ExtJS .I have an issue with usage of zIndexManager in a panel.
I have a panel with child items as chart and grid.I would like to show chart and grid one after the other by clicking a button in my panel toolbar i.e. when i click on chart button(icon) it should display chart and when i click on grid button, it should display the grid.
I came across this zIndexManager and floating concepts,which are used to display components by showing and hiding the components depending on their active state.It was too complex for me to understand and implement it.
I've been stuck up with this issue past 5days,it would be highly grateful if anyone can help me out.
I am attaching my panel code for the reference.

Here it is :


xtype: 'panel',
title: 'Geography Chart',
id: 'panel1',
width: 480,
height: 350,
iconCls : 'geo-icon',
renderTo: Ext.getBody(),
tools:[
{
type:'Close',
handler: function(e,target,panelHeader,tool)
{
panelHeader.ownerCt.hide();
}
}],
layout: 'fit',
tbar: [
{
xtype : 'button',
text : null,
iconCls : 'chart-icon',
layout: 'autofit',
listeners:
{
click: function()
{
alert('Hi');
}
}
},
{
xtype:'tbseparator'
},
{
xtype : 'button',
text : null,
iconCls : 'grid-icon',
layout: 'autofit',
listeners:
{
click: function ()
{
alert('heyy');
}
}
}],
items:[ {
xtype: 'chart',
id: 'chartComp',
store: store,
shadow: true,
hideMode: 'visibility',
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'datageo',
showInLegend: true,
tips: {
trackMouse: true,
width: 280,
height: 50,
renderer: function(storeItem, item)
{
//calculate percentage.
var total = 0;
store.each(function(rec)
{
total += rec.get('datageo');
});
this.setTitle(storeItem.get('namegeo') + ' : ' + storeItem.get('datageo') + '-Attendees');
}
},
highlight:
{
segment:
{
margin: 20
}
},
label: {
field: 'namegeo',
display: 'rotate',
contrast: true,
font: '15px Arial'
}
}]
},
{
xtype: 'grid',
id: 'gridComp',
layout: 'fit',
store: simpsonsStore,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
}]

friend
23 Jul 2012, 5:05 AM
An easier approach is to use a Card (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Card) layout on the parent container for the chart/grid. This eliminates the tedium/hassle of trying to manage z-index on components.