Extjs4 MVC有别于其他MVC架构，Extjs有他自己定义：
本篇文章，我们将创建一个非常简单的应用程序，即用户数据管理，最后，你就会知道如何利用Extjs4 MVC去创建简单应用程序。Extjs4 MVC应用程序架构提供应用程序的结构性和一致性。这样的模式带来了一些重要的好处：
<span style="font-family:Courier New;font-size:14px;"><html> <head> <title>Account Manager</title> <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css"> <script type="text/javascript" src="ext-4.0/ext-debug.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body></body> </html></span>
<span style="font-family:Courier New;font-size:14px;">Ext.application({
name : 'AM',
appFolder : 'app',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [ {
xtype : 'panel',
title : 'Users',
html : 'List of users will go here'
} ]
});
}
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});</span>
<span style="font-family:Courier New;font-size:14px;">Ext.application({
...
controllers: [
'Users'
],
...
});</span>
<span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
extend : 'Ext.app.Controller',
init : function() {
this.control({
'viewport > panel' : {
render : this.onPanelRendered
}
});
},
onPanelRendered : function() {
console.log('The panel was rendered');
}
});</span> 在Users.js中，init凼数使用this.control来负责监听，由于使用了新的ComponentQuery引擎，所以可以快速方便的找到页面上组件的引用(viewport > panel),这有些类似CSS选择器，通过匹配，快速的找到相匹配的组件。<span style="font-family:Courier New;font-size:14px;">Ext.define('AM.view.user.List', {
extend : 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
initComponent : function() {
this.store = {
fields : [ 'name', 'email' ],
data : [ {
name : 'Ed',
email : 'ed@sencha.com'
}, {
name : 'Tommy',
email : 'tommy@sencha.com'
} ]
};
this.columns = [ {
header : 'Name',
dataIndex : 'name',
flex : 1
}, {
header : 'Email',
dataIndex : 'email',
flex : 1
} ];
this.callParent(arguments);
}
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: ...
onPanelRendered: ...
});</span><span style="font-family:Courier New;font-size:14px;">Ext.application({
...
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
extend : 'Ext.app.Controller',
views : [ 'user.List' ],
init : function() {
this.control({
'userlist' : {
itemdblclick : this.editUser
}
});
},
editUser : function(grid, record) {
console.log('Double clicked on ' + record.get('name'));
}
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.view.user.Edit', {
extend : 'Ext.window.Window',
alias : 'widget.useredit',
title : 'Edit User',
layout : 'fit',
autoShow : true,
initComponent : function() {
this.items = [ {
xtype : 'form',
items : [ {
xtype : 'textfield',
name : 'name',
fieldLabel : 'Name'
}, {
xtype : 'textfield',
name : 'email',
fieldLabel : 'Email'
} ]
} ];
this.buttons = [ {
text : 'Save',
action : 'save'
}, {
text : 'Cancel',
scope : this,
handler : this.close
} ];
this.callParent(arguments);
}
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List',
'user.Edit'
],
init: ...
editUser: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
}
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.store.Users', {
extend : 'Ext.data.Store',
fields : [ 'name', 'email' ],
data : [ {
name : 'Ed',
email : 'ed@sencha.com'
}, {
name : 'Tommy',
email : 'tommy@sencha.com'
} ]
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users'
],
...
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
//we no longer define the Users store in the `initComponent` method
store: 'Users',
...
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.model.User', {
extend : 'Ext.data.Model',
fields : [ 'name', 'email' ]
});</span><span style="font-family:Courier New;font-size:14px;">//the Users controller will make sure that the User model is included on the page and available to our app
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
models: ['User'],
...
});
// we now reference the Model instead of defining fields inline
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
});</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.controller.Users', {
init : function() {
this.control({
'viewport > userlist' : {
itemdblclick : this.editUser
},
'useredit button[action=save]' : {
click : this.updateUser
}
});
},
updateUser : function(button) {
console.log('clicked the Save button');
}
});</span><span style="font-family:Courier New;font-size:14px;">updateUser：function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
}</span><span style="font-family:Courier New;font-size:14px;">Ext.define('AM.store.Users', {
extend : 'Ext.data.Store',
model : 'AM.model.User',
autoLoad : true,
proxy : {
type : 'ajax',
url : 'data/users.json',
reader : {
type : 'json',
root : 'users',
successProperty : 'success'
}
}
});</span><span style="font-family:Courier New;font-size:14px;">{
success:true,
users:[
{id: 1, name: 'Ed', email: 'ed@sencha.com'},
{id: 2, name: 'Tommy', email: 'tommy@sencha.com'}
]
}</span><span style="font-family:Courier New;font-size:14px;">proxy: {
type: 'ajax',
api: {
read: 'data/users.json',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}</span><span style="font-family:Courier New;font-size:14px;">updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
}</span>原文地址：http://blog.csdn.net/lovesomnus/article/details/42581941
