ExtJs4入门之七: Grid组件示例的MVC重构

文件结构图

一:Model层

1.model

//模型类(自定义的类 都不能放在Ext.onReady()中,且js文件名和类名必须都是小写 )
Ext.define("RT.model.user" ,{
extend : "Ext.data.Model",
fields:[
{ name : "userId" , type : "int" , sortable : true },
{ name : "name" , type : "string" , sortable : true },
{ name : "age" , type : "int" , sortable : true },
{ name : "male" , type : "string" , sortable : true }
]
});

2.store

//数据集合
Ext.define("RT.store.userstore",{
extend:"Ext.data.Store",
model :"RT.model.user",
//storeId : "store",//创建id,供组件调用
autoLoad:true,//不自动加载的话就拿不到数据
proxy:{
type : "ajax",
url: "/ExtJs4_Demo/extDemo/gridApp/fakeData.jsp",
reader:{
type:"json",
root:"users",
},
writer:{
type:"json",

}
}
})

二:View层

//renderTo : "divId",//渲染的锚点
//去掉handler:grid_delete

//表格编辑插件
var cellEditor = Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
});

Ext.define("RT.view.usergrid",{
extend:"Ext.grid.Panel",
alias:"widget.usergrid",//别名
width : 600,
height: 300,
frame : true,//面板边框
forceFit : true,//横行的拉抻
//获取M层指定的数据集合
store : "userstore",//这里是model层的入口.Ext.data.StoreManager.lookup("store_user"),
//表头
columns : [
{text:"userId" , dataIndex : "userId" ,width:"10%"},//dataIndex类会去寻找Store类或者对应Model中的键值
{text:"name" , dataIndex : "name" ,width:"30%" },
{text:"age" , dataIndex : "age" ,width:"30%",
field:{xtype : "textfield", allowBlank:false}
},
{text:"male" , dataIndex : "male" ,width:"10%"}
],
tbar:[
{ xtype:"button" , text:"添加" , iconCls:"table_add"},
{ xtype:"button" , text:"删除" ,id:"del"},//去掉handler:grid_delete
{ xtype:"button" , text:"修改" },
{ xtype:"button" , text:"刷新" },
],
//组件集
dockedItems:[
//分页组件要和store挂钩, 否则是灰色的
{ xtype:"pagingtoolbar" , dock:"bottom" , displayInfo:true,  store:"userstore"}
],
//选择方式, 还有rowmodel,cellmodel什么的
selType:'checkboxmodel',
//多选框
multiSelect:true,
//可编辑的plugin插件
plugins:[
cellEditor
],
//初始化
initComponent:function(){
this.callParent(arguments);
}
});

三:Controller层

Ext.define("RT.controller.userController",{
extend:"Ext.app.Controller",
init:function(){
this.control({
"usergrid button[id=del]":{//选择器
click:function(o){
//alert(o.text);
grid_delete(o)
}
}
});
},
//==>实践证明以下名字必须全小写,像"userGrid"这类驼峰的名字ext找不到对应的js文件
views:[
"usergrid"//v层的名字
],
stores:[
"userstore"//m层的名字
],
models:[
"user"
]

});

//操作函数
function grid_delete(btnObj)
{
//alert("==>grid_delete()"+btnObj.text);
//按钮对象的父对象是工具条, 再父级才是所属表格
var gird = btnObj.ownerCt.ownerCt;
var dataArray = gird.getSelectionModel().getSelection();
if( 0 == dataArray.length )
{
Ext.Msg.alert("提示","至少要选择一条数据");
}
else
{
var ids = [];
$.each(dataArray , function(i,model){
//alert( model.get("name") );//model.data.name
ids.push( model.get("userId") );
});

Ext.Ajax.request({
url:"/ExtJs4_Demo/extDemo/gridApp/fakeData.jsp",
params:{'ids':ids},
method:"POST",
timeout:3000,//请求超时时间3秒
success:function( response , options){
//alert("==>成功" + response.responseText +"__" + options);
var store = gird.getStore();
//成功后删除数据 , 还从dataArray拿值
$.each(dataArray , function(i,model){
store.remove(model);//store类的删除一个model
});
},
failure:function( response , options){
alert("==>失败" + response.responseText +"__" + options);
}
});
}//end if else
}//end of function

四:程序入口 app.js

1.jsp

<!-- 1.jQuery -->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.1.min.js"></script>
<!-- 2.Ext -->
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>extDemo/gridApp/view/images.css" />
<script type="text/javascript" src="<%=basePath %>js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=basePath %>js/extjs/locale/ext-lang-zh_CN.js"></script>
<!-- 3.OthersJs -->
<script type="text/javascript" src="<%=basePath %>extDemo/gridApp/gridApp.js"></script>

2.app.js

//只有app.js在Ext.onReady()内部
Ext.onReady( function(){

//异步加载 , 其他Js声明对象 , app中实例化
Ext.Loader.setConfig({
enabled:true
});

Ext.QuickTips.init();

Ext.application({
name : "RT",//命名空间
appFolder : "/ExtJs4_Demo/extDemo/gridApp",//根目录地址
launch : function(){ //回调函数
Ext.create("Ext.container.Viewport",{//把表格扔到Viewport中显示
layout : "auto", //布局
items :[
{ 	//Viewport中元素的配置
xtype:"usergrid",
title:"用户表格" ,
//html:"用户表格测试内容"
}
]
});
},
//==>controller的入口,ext会去appFolder/controller中找你指定的文件
controllers:[
"userController"
]
});

})

   Ext的程序不太好调, 换个结构我弄了一晚上... 遇上几个问题让人很郁闷:

   1.如果程序的netWork里GET404,就把文件名和类名换成纯小写 

   2.如果ext-all-debug.js报什么subString错误, 检查类名和controller中的配置, 都换成纯小写

   3.加载js文件成功, 可是自定义类没起作用, 还是检查大小写

   程序找到文件之后 ,在报错就比较准确了,除了大小写 根据行号和提示修修改改就行了