First Create a Project Folder
With in the Project Folder Create Two Folders
First One is app Folder and Second one is extjs Folder
Now with in the app Folder we need to Create 4 Folders They are as follows
First one is model
second one is Store
third one is view and finally controller
with in the extjs folder we need to place the library files related to extjs
next create two files one is app.js and other one is index.html
with in the index.html file we need to write the following code
<html>
<head>
<title>Ext JS 4 MVC</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
next with in the app.js file we need to write the following code
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'app/ux');
/*
* BUG: suspentEvents not honoured in Ext.app.EventBus
*
* note: this fix does not queue events when asked.
*
* http://www.sencha.com/forum/showthread.php?171525
*/
Ext.syncRequire('Ext.app.EventBus');
Ext.override(Ext.app.EventBus, {
constructor: function() {
this.mixins.observable.constructor.call(this);
this.bus = {};
var me = this;
Ext.override(Ext.Component, {
fireEvent: function(ev) {
return me.dispatch.call(me, ev, this, arguments);
}
return false;
}
});
}
});
Ext.application({
name: 'ExtMvc',
controllers: [
'chartsController'
],
autoCreateViewport: true
});
next with in the model folder create a js file like chartModel.js and write the following code
Ext.define('ExtMvc.model.chartModel', {
extend: 'Ext.data.Model',
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5']
});
next with in the store folder create a js file like chartStores.js and write the following code
Ext.define('ExtMvc.store.chartStores', {
extend: 'Ext.data.JsonStore',
model: 'ExtMvc.model.chartModel',
data:generateData()
/*[
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
]*/
});
//function abc(){alert('hai');}
function generateData(n, floor){
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0)? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
next with in the view folder create a js file like piechartView.js and write the following code
var donut=false;
Ext.define('ExtMvc.view.piechartView', {
extend: 'Ext.panel.Panel',
alias : 'widget.userchart',
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
'chartStores'.loadData(generateData(6, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: 'chartStores',
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
'chartStores'.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
next with in the view folder create another js file called Viewport.js and write the following code
/**
* The main application viewport, which displays the whole application
* @extends Ext.Viewport
*/
Ext.define('ExtMvc.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',
requires: [
'ExtMvc.view.piechartView'
],
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [
{
xtype: 'userchart'
}
]
});
me.callParent(arguments);
}
});
next with in the controller folder create a js file like chartsController.js and write the following code
Ext.define('ExtMvc.controller.chartsController', {
extend: 'Ext.app.Controller',
models: ['chartModel'],
stores: ['chartStores'],
views: [
'piechartView'
],
init: function() {
}
});
With in the Project Folder Create Two Folders
First One is app Folder and Second one is extjs Folder
Now with in the app Folder we need to Create 4 Folders They are as follows
First one is model
second one is Store
third one is view and finally controller
with in the extjs folder we need to place the library files related to extjs
next create two files one is app.js and other one is index.html
with in the index.html file we need to write the following code
<html>
<head>
<title>Ext JS 4 MVC</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
next with in the app.js file we need to write the following code
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'app/ux');
/*
* BUG: suspentEvents not honoured in Ext.app.EventBus
*
* note: this fix does not queue events when asked.
*
* http://www.sencha.com/forum/showthread.php?171525
*/
Ext.syncRequire('Ext.app.EventBus');
Ext.override(Ext.app.EventBus, {
constructor: function() {
this.mixins.observable.constructor.call(this);
this.bus = {};
var me = this;
Ext.override(Ext.Component, {
fireEvent: function(ev) {
return me.dispatch.call(me, ev, this, arguments);
}
return false;
}
});
}
});
Ext.application({
name: 'ExtMvc',
controllers: [
'chartsController'
],
autoCreateViewport: true
});
next with in the model folder create a js file like chartModel.js and write the following code
Ext.define('ExtMvc.model.chartModel', {
extend: 'Ext.data.Model',
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5']
});
next with in the store folder create a js file like chartStores.js and write the following code
Ext.define('ExtMvc.store.chartStores', {
extend: 'Ext.data.JsonStore',
model: 'ExtMvc.model.chartModel',
data:generateData()
/*[
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }
]*/
});
//function abc(){alert('hai');}
function generateData(n, floor){
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0)? 20 : floor;
for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
next with in the view folder create a js file like piechartView.js and write the following code
var donut=false;
Ext.define('ExtMvc.view.piechartView', {
extend: 'Ext.panel.Panel',
alias : 'widget.userchart',
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
'chartStores'.loadData(generateData(6, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: 'chartStores',
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
'chartStores'.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
next with in the view folder create another js file called Viewport.js and write the following code
/**
* The main application viewport, which displays the whole application
* @extends Ext.Viewport
*/
Ext.define('ExtMvc.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',
requires: [
'ExtMvc.view.piechartView'
],
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [
{
xtype: 'userchart'
}
]
});
me.callParent(arguments);
}
});
next with in the controller folder create a js file like chartsController.js and write the following code
Ext.define('ExtMvc.controller.chartsController', {
extend: 'Ext.app.Controller',
models: ['chartModel'],
stores: ['chartStores'],
views: [
'piechartView'
],
init: function() {
}
});
No comments:
Post a Comment