View Full Version : Need help to break down my view in Extjs MVC.

24 Jul 2013, 6:42 AM
Im using Extjs4 MVC framework for my application.
We load views dynamically using a controller...One of my view looks like below:

Ext.define('app.view.Graph', {
extend: 'Ext.panel.Panel',
alias: 'widget.graph',
title: 'Graph',
closable: true,
layout: {
type: 'vbox',
align : 'stretch'
initComponent: function () {
//This needs to go to store
var graphInput = new Ext.data.JsonStore({
fields: ['cob_date', 'taskTimeInMin'],
data: []

var now = new Date();
var fromCob = new Ext.form.DateField({
xtype: 'datefield',
fieldLabel: 'From COB date',
name: 'fromCob',

//set defaults

//form panel
var graph_form = new Ext.FormPanel({
//labelWidth: 75, // label settings here cascade unless overridden
title: 'Graph criteria',
//bodyStyle:'padding:5px 5px 0',
// width: 1000,
defaults: {width: 250},
defaultType: 'textfield',

items: [fromCob

buttons: [{
text: 'Refresh',
handler: function() {

var varChart = new Ext.chart.Chart({
//width: 1000,
height: 500,
animate: true,
store: graphInput,
//renderTo: graphplace,
shadow: true,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['taskTimeInMin'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
title: 'Time in minutes',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['cob_date'],
label: {
rotate: {
degrees: 270
title: 'cob date'

this.items = [graph_form,varChart];


It works perfectly fine!! (when i have the graph_form,varChart ..everything on same page)

The question is..I need to break this view down. Could you please make sugesstions on breaking down this view?

Renan Cunha
24 Jul 2013, 2:38 PM
You can make two separately classes, one for your form and another to your chart (in this way you will treat them as components).
Then make a third class where you will create two instances of yours components and use them inside your container.

Ps.: Sencha devs recommend to avoid the use of new keyword. Instead of use it, use the Ext.create or Ext.widget.

25 Jul 2013, 11:53 AM
Say i break this into 4 components:
1 store(graphInput)
2 components(graph_form,varChart )
1 container(Graph)
say container contaions the 2 components.

graphInput is a store required by both components(graph_form,varChart) ...where should its instance be created(in graph_form or varChart or Graph )
I belive it needs to be created in Graph.

So how will graph_form and varChart refer to graphInput store?

Renan Cunha
25 Jul 2013, 2:43 PM
You can put the store instance in the options when you create your components.

In the graph initialization:

initComponent: function () {
var store = Ext.create('MyStore'),
graph_form = Ext.create('GraphForm', { store: store });

And in the initialization of your 'GraphForm', you get the store and attach it to what you want...

initComponent: function () {
var store = this.store;

//use the store...

All components will share the same instance of the store.