Need to convert ExtJs sample app to MVC application - extjs

Question

i have a problem with this example see this link
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/buffer-grid.html
i want to convert in MVC application. So anybody please help me .

Answer 1

Firstly your model in your app/model folder
Ext.define('AppName.model.Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
and store in your app/store folder
Ext.define('AppName.store.Employee', {
extend:'Ext.data.Store',
buffered: true,
pageSize: 5000,
model: 'Employee',
proxy: { type: 'memory' }
});
And your grid view in your app/view folder
Ext.define('AppName.view.EmployeeGrid', {
alias:'employeegrid',
extend:'Ext.grid.Panel',
width: 700,
height: 500,
title: 'Bufffered Grid of 5,000 random records',
store: 'Employee',
loadMask: true,
disableSelection: true,
viewConfig: { trackOver: false },
columns:[{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex:1 ,
sortable: true,
dataIndex: 'name'
},{
text: 'Rating',
width: 125,
sortable: true,
dataIndex: 'rating'
},{
text: 'Salary',
width: 125,
sortable: true,
dataIndex: 'salary',
align: 'right',
renderer: Ext.util.Format.usMoney
}]
});
And your controller in your app/controller folder
Ext.define('AppName.controller.Employee',{
extend:'Ext.app.Controller',
stores:['Employee'],
views:['EmployeeGrid'],
refs:[
{ref:'employeeGrid',selector:'employeegrid'}
],
init:function(){
var me = this;
me.getEmployeeStore().loadData(me.createFakeData(5000));
},
createFakeData:function(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];
var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),
rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
});
Funally u have to create App in your app folder
Ext.application({
requires:[
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller',
'AppName.view.EmployeeGrid'
],
name:'AppName',
models:['Employee'],
stores:['Employee'],
controllers:['Employee'],
launch:function () {
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
layout: 'fit',
items:[{xtype:'emplyeegrid'}]
});
});
}
});