PDA

View Full Version : Setting the active item in card layout inside a form



ycindepalle
8 Mar 2012, 8:49 AM
Hello

I am new to ext js 4..I appreciate in advance if you can help me with this..

a) i have a form with few buttons at the top, then a card layout (chart and grid) and few form fields (radio buttons, check box and buttons) at the bottom.

My question: how to retrieve the panel and set the activeitem to grid and viceversa. I need to do it when i clicked the chart or table button at the bottom.

i tried few ways by using Ext.getCmp etc. but in vain..

Here is my view code and controller code:
------------------View code--------------
Ext.define('CDATADashboard.view.CDATAView', {
extend: 'Ext.form.Panel',
alias: 'widget.cdataview',
height: 840,
width: 1000,
layout: {
align: 'stretch',
type: 'vbox'
},
store: 'CDATADashboard.store.Chart',
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
name:'pnlviewbuttons',
height: 42,
width: 1291,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'button',
id: 'view-by-day',
text: 'View By Day',
tooltip: 'Click this for Viewing by Day',
flex: 1
},
{
xtype: 'button',
id: 'view-by-day-of-week',
text: 'View By Day Of Week',
tooltip : 'Click this for Viewing by Day of the week',
flex: 1
},
{
xtype: 'button',
id: 'view-by-interval',
text: 'View By Interval',
tooltip : 'Click this for Viewing by Interval time',
flex: 1
}
]
},
{
xtype: 'panel',
itemid:'cardpanel',
activeItem: 0,
layout: {
type: 'card'
},
flex: 1,
items: [
{
xtype: 'chart',
height: 250,
width: 400,
animate: true,
legend: {
position: 'right'
},
store: 'Chart',
insetPadding: 20,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['Tier1', 'Tier2', 'Tier3', 'Tier4'],
title: 'Consumption in KWatt Hr', // dynamic value
grid: true,
label: {
renderer: function(v) {
return String(v).replace(/000000$/, 'M');
}
},
roundToDecimal: false
}, {
type: 'Category',
position: 'bottom',
fields: ['Month'],
title: 'Month',

}
],
series: [{
type: 'column',
axis: 'bottom',
gutter: 80,
highlight: true,
xField: 'Month',
yField: ['Tier1', 'Tier2', 'Tier3', 'Tier4'],
label: 'testing',
stacked: true,
label: {
display: 'insideEnd',
field: ['Tier1', 'Tier2', 'Tier3', 'Tier4'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(String(item.value[1] / 1000000) + 'M');
}
}
}]
},
{
xtype: 'gridpanel',
height: 250,
width: 300,
store: 'Chart',
// title: 'My Grid Panel',
columns: [
{
dataIndex: 'Month',
header: 'Month',
sortable : true,
flex:1

},
{
dataIndex: 'Tier1',
header: 'Tier1',
sortable : true,
flex:1
},
{
dataIndex: 'Tier2',
header: 'Tier2',
sortable : true,
flex:1
},
{
dataIndex: 'Tier3',
header: 'Tier3',
sortable : true,
flex:1
},
{
dataIndex: 'Tier4',
header: 'Tier4',
sortable : true,
flex:1
}

],
viewConfig: {

}
}
]
},
{
xtype: 'panel',
height: 64,
width: 1236,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'radiogroup',
height: 53,
width: 199,
fieldLabel: 'Type',
columns: 1,
name:'rgrptype',
items: [
{
xtype: 'radiofield',
boxLabel: 'Consumption',
name:'rfldtype'
},
{
xtype: 'radiofield',
boxLabel: 'Cost',
name:'rfldtype'
}
]
},
{
xtype: 'radiogroup',
width: 230,
fieldLabel: 'Duration',
columns: 1,
name:'rgrpmonths',
items: [
{
xtype: 'radiofield',
boxLabel: '3 Months',
name:'rfldmonths'
},
{
xtype: 'radiofield',
boxLabel: '13 Months',
name:'rfldmonths'
}
]
},
{
xtype: 'checkboxfield',
boxLabel: 'Display Averages',
flex: 1
},
{
xtype: 'panel',
name:'pnlview',
width: 862,
layout: {
align: 'stretch',
type: 'hbox'
},
title: '',
flex: 1,
items: [
{
xtype: 'button',
text: 'Chart',
tooltip: 'Click this for Chart View.',
id: 'chart-view',
flex: 1
},
{
text: 'Table',
xtype: 'button',
tooltip: 'Click this for Table View.',
id: 'table-view',
flex: 1
}
]
}
]
}
]
});

me.callParent(arguments);
}
});
----------------------

Controller code:

---------------
Ext.define('CDATADashboard.controller.CDATAController', {
extend : 'Ext.app.Controller',

// stores : ['Chart'],
// models : ['Chart'],

views : [
'CDATADashboard.view.CDATAView'
],

refs : [{
ref :'CDATAView',
selector :'CDATAView'
}],

init : function() {
console.log('Inside initcomponent - CDATA Controller');
this.control({
'cdataview #chart-view' : {
click : this.chartClicked
},

'cdataview #table-view' : {
click : this.tableClicked
}

});
},

// click the chart
chartClicked : function(btn) {
alert('You clicked Chart Button!');
var form = btn.up('form').getForm();
Ext.getCmp('cardpanel').setActiveItem(1); // i was trying with this


},

// click the table
tableClicked : function(btn) {
alert('You clicked Table Button!');
}

});
--------

neenhouse
8 Mar 2012, 12:36 PM
Are you implementing something with ExtJS 4.x? This is the Ext Core forum- you probably want to post this under the general forum in ExtJS 4.

Also- wrap & indent your code, its totally unreadable (http://jsbeautifier.org/ is a wonderful tool):


Ext.define('CDATADashboard.view.CDATAView', {
extend: 'Ext.form.Panel',
alias: 'widget.cdataview',
height: 840,
width: 1000,
layout: {
align: 'stretch',
type: 'vbox'
},
store: 'CDATADashboard.store.Chart',
initComponent: function () {
var me = this;

Ext.applyIf(me, {
items: [{
xtype: 'panel',
name: 'pnlviewbuttons',
height: 42,
width: 1291,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'button',
id: 'view-by-day',
text: 'View By Day',
tooltip: 'Click this for Viewing by Day',
flex: 1
}, {
xtype: 'button',
id: 'view-by-day-of-week',
text: 'View By Day Of Week',
tooltip: 'Click this for Viewing by Day of the week',
flex: 1
}, {
xtype: 'button',
id: 'view-by-interval',
text: 'View By Interval',
tooltip: 'Click this for Viewing by Interval time',
flex: 1
}]
}, {
xtype: 'panel',
itemid: 'cardpanel',
activeItem: 0,
layout: {
type: 'card'
},
flex: 1,
items: [{
xtype: 'chart',
height: 250,
width: 400,
animate: true,
legend: {
position: 'right'
},
store: 'Chart',
insetPadding: 20,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Tier1', 'Tier2', 'Tier3', 'Tier4'],
title: 'Consumption in KWatt Hr',
// dynamic value
grid: true,
label: {
renderer: function (v) {
return String(v).replace(/000000$/, 'M');
}
},
roundToDecimal: false
}, {
type: 'Category',
position: 'bottom',
fields: ['Month'],
title: 'Month',

}],
series: [{
type: 'column',
axis: 'bottom',
gutter: 80,
highlight: true,
xField: 'Month',
yField: ['Tier1', 'Tier2', 'Tier3', 'Tier4'],
label: 'testing',
stacked: true,
label: {
display: 'insideEnd',
field: ['Tier1', 'Tier2', 'Tier3', 'Tier4'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(String(item.value[1] / 1000000) + 'M');
}
}
}]
}, {
xtype: 'gridpanel',
height: 250,
width: 300,
store: 'Chart',
// title: 'My Grid Panel',
columns: [{
dataIndex: 'Month',
header: 'Month',
sortable: true,
flex: 1

}, {
dataIndex: 'Tier1',
header: 'Tier1',
sortable: true,
flex: 1
}, {
dataIndex: 'Tier2',
header: 'Tier2',
sortable: true,
flex: 1
}, {
dataIndex: 'Tier3',
header: 'Tier3',
sortable: true,
flex: 1
}, {
dataIndex: 'Tier4',
header: 'Tier4',
sortable: true,
flex: 1
}

],
viewConfig: {

}
}]
}, {
xtype: 'panel',
height: 64,
width: 1236,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'radiogroup',
height: 53,
width: 199,
fieldLabel: 'Type',
columns: 1,
name: 'rgrptype',
items: [{
xtype: 'radiofield',
boxLabel: 'Consumption',
name: 'rfldtype'
}, {
xtype: 'radiofield',
boxLabel: 'Cost',
name: 'rfldtype'
}]
}, {
xtype: 'radiogroup',
width: 230,
fieldLabel: 'Duration',
columns: 1,
name: 'rgrpmonths',
items: [{
xtype: 'radiofield',
boxLabel: '3 Months',
name: 'rfldmonths'
}, {
xtype: 'radiofield',
boxLabel: '13 Months',
name: 'rfldmonths'
}]
}, {
xtype: 'checkboxfield',
boxLabel: 'Display Averages',
flex: 1
}, {
xtype: 'panel',
name: 'pnlview',
width: 862,
layout: {
align: 'stretch',
type: 'hbox'
},
title: '',
flex: 1,
items: [{
xtype: 'button',
text: 'Chart',
tooltip: 'Click this for Chart View.',
id: 'chart-view',
flex: 1
}, {
text: 'Table',
xtype: 'button',
tooltip: 'Click this for Table View.',
id: 'table-view',
flex: 1
}]
}]
}]
});

me.callParent(arguments);
}
});
----------------------

Controller code:

---------------Ext.define('CDATADashboard.controller.CDATAController', {
extend: 'Ext.app.Controller',

// stores : ['Chart'],
// models : ['Chart'],
views: ['CDATADashboard.view.CDATAView'],

refs: [{
ref: 'CDATAView',
selector: 'CDATAView'
}],

init: function () {
console.log('Inside initcomponent - CDATA Controller');
this.control({
'cdataview #chart-view': {
click: this.chartClicked
},

'cdataview #table-view': {
click: this.tableClicked
}

});
},

// click the chart
chartClicked: function (btn) {
alert('You clicked Chart Button!');
var form = btn.up('form').getForm();
Ext.getCmp('cardpanel').setActiveItem(1); // i was trying with this

},

// click the table
tableClicked: function (btn) {
alert('You clicked Table Button!');
}

});



Ok... going to re-read your code now...

neenhouse
8 Mar 2012, 12:54 PM
You need to create a reference to your card panel, then invoke setActiveItem(_your_instan) on it inside your button handlers. When you define a panel with a card layout, you really just get a couple of extra methods / layout logic injected into a panel class. So you should be able to say CARDCLASS.setActiveItem(_card_panel_) or CARDCLASS.layout.setActiveItem()

You should break up your classes into smaller, easier to understand problems though. Having all inline like that is really messy. Also, don't define "id" properties on your buttons. Instead, use "itemId". The reason why is defining "id" will create problems if you instantiate more than 1 copy of your class definition.

Kinda like this (I DID NOT TEST THIS, JUST OFF THE TOP OF MY HEAD):



VIEW CLASS:
.....
}]
}, {
xtype: 'panel',
itemid: 'cardpanel', Needs to be itemId, camel cased
activeItem: 0,
layout: {
type: 'card'
},


.....
CONTROLLER CLASS
.....
refs: [{
ref: 'CDATAView',
selector: 'CDATAView'
},{
ref: 'cardpanel',
selector:'cardpanel'
}],

.....

// click the table
tableClicked: function (btn) {
alert('You clicked Table Button!');
this.getCardPanel().setActiveItem(1); // this works because things defined on the propery "ref" automatically get a reference method created that is prepended with this.get[REF_NAME]()
}

});



Hope this helps. Read "Using Refs" in the API Docs Here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller

ycindepalle
8 Mar 2012, 1:43 PM
thanks very much for the quick reply and for valuable suggestions...I will post this to general forum next time onwards with proper indent..

Yes we are implementing in EXT JS 4.0.7.

This is very helpful for a new comer and we have started liking ext js 4 especially the innovative MVC on the client side..

regards