1、Extjs应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护。
2、这个事例的配置资料请参考之前的配置，另外关于数据访问我采用的是jsonp跨域访问，数据格式json，整个文件的结构如下图：
效果图：
test.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="../ext-4.2/resources/css/ext-all.css" />
<style type="text/css">
.table_add{
background-image: url(../ext-4.2/icons/table/table_add.png)
}
.table_delete{
background-image: url(../ext-4.2/icons/table/table_delete.png)
}
.table_edit{
background-image: url(../ext-4.2/icons/table/table_edit.png)
}
.table_comm{
background-image: url(../ext-4.2/icons/table/table.png)
}
</style>
<script type="text/javascript" src="../ext-4.2/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>app.js：
Ext.onReady(function(){
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name:'AM',//应用的名字
appFolder:'app',//应用的目录
launch:function(){
// Ext.create('Ext.container.Viewport',{
// layout:'auto',
// items:{
// xtype :'userlist',
// title:'User',
// html:'here'
// }
// })
Ext.create('Ext.window.Window',{
items:{
xtype :'userlist',
title:'User',
html:'here'
}
}).show();
},
controllers:[
'Controller'
]
});
})mvc模式中view.js：
Ext.define('AM.view.View', {
extend: 'Ext.grid.Panel',
alias: ['widget.userlist'],//别名
frame: true,
//forceFit: true,
width: 900,
height: 280,
features: [{
ftype: 'summary'
}],
viewConfig:{
plugins:[
Ext.create('Ext.grid.plugin.DragDrop',{
ddGroup:'ddTree',
dragGroup:'userlist',
dropGroup:'userlist',
enableDrag:true,
enableDrop:true
})
],
listeners:{
drop:function(node,data,dropRec,dropPosition){
var st = this.getStore();
for(var i=0;len=st.getCount(),i<len;i++){
st.getAt(i).set('index',i+1);
}
}
}
},
columns: [
//行号两种方法
//Ext.create(Ext.grid.RowNumberer,{/*locked:true*/})
{
xtype : 'rownumberer'
},{
text: 'name',
dataIndex: 'name',
width:100,
// locked:true
}, {
text: 'age',
dataIndex: 'age',
width:80,
summaryType:'average',
summaryRenderer:function(value,summaryData,dataIndex){
return Ext.String.format('平均年龄：'+value);
}
},{
text:'sex',
dataIndex:'sex',
width:50,
renderer:function(o){
if(o){
if(o=='女'){
return '<font color="red">'+o+'</font>'
}else{
return '<font color="green">'+o+'</font>'
}
}
}
}, {
text: 'email',
dataIndex: 'email',
field: {
xtype: 'textfield',
allowBlank: false
},
width:130
},{
text: 'index',
dataIndex: 'index',
width:50
},{
text:'isIT',
dataIndex:'isIT',
xtype:'booleancolumn',
width:50,
trueText:'是',
falseText:'不是'
},{
text:'birthday',
dataIndex:'birthday',
xtype:'datecolumn',
width:180,
format:'Y-m-d h:i:s'
},{
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
width:150
//format:'0.00'
},{
text:'描述',
xtype:'templatecolumn',
tpl:'姓名是{name}年龄是{age}',
width:150
},{
text:'Action',
xtype:'actioncolumn',
id:'delete',
icon:'../ext-4.2/icons/used/delete.png',
width:50
}],
renderTo: Ext.getBody(),
store: 'Store',
tbar: [{
xtype: 'button',
text: '添加',
iconCls: 'table_add'
}, {
xtype: 'button',
text: '删除',
iconCls: 'table_delete',
id: 'deletebutton'
}, {
xtype: 'button',
text: '修改',
iconCls: 'table_edit'
}, {
xtype: 'button',
text: '查看',
id:'selection',
iconCls: 'table_comm'
},{
xtype:'button',
id:'save',
text:'保存',
icon:'../ext-4.2/icons/table/table_save.png'
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'Store',
dock: 'bottom',
displayInfo: true
}],
plugins: [
/*Ext.create(Ext.grid.plugin.CellEditing, {
clicksToEdit: 1
})*/
Ext.create('Ext.grid.plugin.RowEditing',{
clicksToEdit: 1
})
],
//selType: 'checkboxmodel', // 设置选择模式
//multiSelect: true, // 运行多选
//selType:'rowmodel',//行选择
selType:'cellmodel',
enableKeyNav:true,
initComponent: function() {
this.callParent(arguments);
}
})
mvc中controller.js：
Ext.define('AM.controller.Controller',{
extend:'Ext.app.Controller',
init:function(){
this.control({
userlist:{
edit:function(editor,e,opt){
//e.record.commit();
alert(e.record.data.email)
}
},
'userlist button[id=save]':{
click:function(o){
var grid = o.ownerCt.ownerCt;
var st = grid.getStore();
//st.sync();
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
model.commit();
})
}
},
/*'userlist':{
itemclick:function(view,record,item,index,e,opt){
alert(2342)
//alert(Ext.encode(record.data))
var sm = view.getSelectionModel();
//alert(sm.getCurrentPosition().row+' '+sm.getCurrentPosition().column);
}
},*/
'userlist button[id=selection]':{
click:function(o){
var grid = o.ownerCt.ownerCt;
var sm = grid.getSelectionModel();
//sm.deselect();//取消选择
//alert(sm.getLastSelected().get('name'));
//alert(sm.isSelected(0));
//sm.selectRange(1,2,true);
//sm.selectByPosition({'row':1,'column':2})
var models = grid.getSelectionModel().getSelection();
if(models.length == 0){
Ext.Msg.alert('提示','你至少选择一条数据');
}else{
var data = Ext.encode(models[0].getData());
alert(data)
}
}
},
'userlist button[id=deletebutton]':{
click:function(o){
var grid = o.ownerCt.ownerCt;
var models = grid.getSelectionModel().getSelection();
if(models.length == 0){
Ext.Msg.alert('提示','你至少选择一条数据');
}else{
var st = grid.getStore();
Ext.each(models,function(record){
st.remove(record)
})
}
}
},
'userlist actioncolumn[id=delete]':{
click:function(o,item,rowIndex,colIndex,e){
alert(rowIndex+' '+colIndex)
}
}
})
},
views:['View'],
stores:['Store'],
models:['Model']
})mvc中的model.js、store.js：
Ext.define('AM.model.Model',{
extend:'Ext.data.Model',
fields:[
{name:'name',type:'string'},
{name:'age',type:'int'},
{name:'email',type:'string'},
{name:'birthday',type:'string'},
{name:'deposit',type:'int'},
{name:'isIT',type:'string'},
{name:'sex',type:'string'},
{name:'index',type:'int'}
]
})Ext.define('AM.store.Store',{
extend:'Ext.data.Store',
//storeId:'s_user',
model:'AM.model.Model',
autoLoad:true,
proxy:{
type:'jsonp',
url:'app/json/app.json',
reader:{
type:'json',
root:'topics',
totalProperty:'total'
}
}
})app.json:
Ext.data.JsonP.callback1({
'total' : 6,
'topics' : [{
'age' : 1,
'email' : 'qwer',
'name' : 'tom',
'birthday' : new Date(),
'deposit' : 100000000.8,
'isIT' : true,
sex : '男',
'index' : 1
}, {
sex : '女',
'age' : 2,
'email' : 'qwer',
'name' : 'jerry',
'index' : 2
}, {
'age' : 3,
'email' : 'qwer',
'name' : 'lily',
'index' : 5
}, {
'age' : 4,
'email' : 'qwer',
'name' : 'lucy',
'index' : 4
}, {
'age' : 5,
'email' : 'qwer',
'name' : 'jay',
'index' : 6
}, {
'age' : 6,
'email' : 'qwer',
'name' : 'july',
'index' : 3
}
]
});