Steps to Create Extjs MVC Application
1. Create a Project Folder (Example Name of the Project Folder is 'MVC')
Please follow the below structure to create the files and folder with the Project Folder.
MVC--->ExtJS Framework Folder
|------>Index.html File
|------>app.js File
|------>app Folder
|--------------> controller Folder
|--------------------> MainController.js File
|--------------> view Folder
|--------------------> MainView.js File
|--------------> store Folder
|--------------------> MainStore.js File
|--------------> model Folder
|--------------------> MainModel.js File
|--------------> Application.js File
Index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="C:\MVC\ext-5.1.0\packages\ext-theme-classic\build\resources\ext-theme-classic-all.css" type="text/css" rel="stylesheet"/>
<script src="C:\MVC\ext-5.1.0\build\ext-all-debug.js" type="text/javascript"></script>
<script src="C:\MVC\app.js" type="text/javascript"></script>
</head>
</html>
app.js
Ext.application({
name:'MVC',
extend:'MVC.Application',
autoCreateViewport:'MVC.view.MainView'
});
Application.js
Ext.define('MVC.Application',{
extend:'Ext.app.Application',
name:'MVC',
views:['MVC.view.MainView'],
controllers:['MVC.controller.MainController'],
stores:['MVC.store.MainStore']
});
MainController.js
Ext.define('MVC.controller.MainController',{
extend:'Ext.app.Controller',
models:['MVC.model.MainModel'],
stores:['MVC.store.MainStore'],
views:['MVC.view.MainView']
});
MainView.js
Ext.define('MVC.view.MainView',{
extend:'Ext.container.Viewport',
items:[{
xtype:'grid',
height:300,
title:'MVC Grid',
store:'MVC.store.MainStore',
columns:[{header:'First Name',dataIndex:'fname'},
{header:'Last Name',dataIndex:'lname'}]
}]
});
MainModel.js
Ext.define('MVC.model.MainModel',{
extend:'Ext.data.Model',
fields:[{name: 'fname', type: 'string'},
{name: 'lname', type: 'string'}]
});
MainStore.js
Ext.define('MVC.store.MainStore',{
extend:'Ext.data.Store',
model:'MVC.model.MainModel',
autoLoad:true,
/*proxy:{
type:'ajax',
url:'Data/name.json',
reader:{
type:'json'
}
}*/
data : [
{fname: 'Ed',lname: 'Spencer'},
{fname: 'Tommy', lname: 'Maintz'},
{fname: 'Aaron', lname: 'Conran'},
{fname: 'Jamie', lname: 'Avins'}
]
});
No comments:
Post a Comment