MVC学习

从这个图中我们可以很清楚的看到M 、V、C在ExtJS4.0里面所对应数据类型。

 靠右边是对应的代码结构。

 

 下描述一下这model、store、view、controller以及application这几者之间的关系。

 

（1）application：它是MVC的入口，用来告诉ExtJS到那里去找对应js文件以及启动加载controller与view连个模块的代码。

//打开动态加载js功能
 Ext.Loader.setConfig({
  enabled:true
 });
 Ext.application({
  name : 'AM',//应用的名字 (根) 利用MVC时这时定义的包路径需要与命名空间的层次关系一致
  appFolder : "app",//应用的目录
  launch:function(){//当前页面加载完成执行的函数
         Ext.create('Ext.container.Viewport', { //简单创建一个试图（填充整个浏览器）
          layout:'auto',//自动填充布局
             items: {
              xtype: 'userlist', //引用已经定义的别名进行初始化类
                 title: 'Users',
                 html : 'List of users will go here'
             }
         });
  },
  controllers:[
   'Users'
  ]
 });

（2）controller：这一层主要是用来处理业务逻辑，即View上一些动作所触发要执行的操作都在此实现。同时它也是关联view、store以及model的地方。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
 init:function(){
  this.control({
   'userlist button[id=delete]':{
    click:function(o){
     var gird = o.ownerCt.ownerCt;
      var data = gird.getSelectionModel().getSelection();
      if(data.length == 0){
       Ext.Msg.alert("提示","您最少要选择一条数据");
      }else{
       //1.先得到ID的数据(name)
       var st = gird.getStore();
       var ids = [];
       Ext.Array.each(data,function(record){
        ids.push(record.get('name'));
       })
       //2.后台操作(delet)
       Ext.Ajax.request({
        url:'/extjs/extjs!deleteData.action',
        params:{ids:ids.join(",")},
        method:'POST',
        timeout:2000,
        success:function(response,opts){
         Ext.Array.each(data,function(record){
          st.remove(record);
         })
        }
       })
       //3.前端操作DOM进行删除(ExtJs)
      }
    }
   }
  });
 },
 views:[
  'List' //必须是文件名称
 ],
 stores :[
  "Users" //
 ],
 models :[
  "User" //这个就是store里面引用的model，所在js文件的名字，保持和定义model的类名一样。eg:AM.model.User
         //（这个主要是给store层用的，当store在当前缓存中找不到指定命名空间定义的model时，再去加载User.js文件，
         //再根据文件内容初始化定义model。如果缓存中已经有了model的定义，其实这个是可以不要的。）
      //同样views、store都可以通过各种各样的工厂生成，来去掉。
 ] 
});

（3）model、store：它们俩主要做为模型数据层。主要是给view层提供数据展示的。

//User数据集合
Ext.define('AM.store.Users', {
 extend: 'Ext.data.Store',
 model: 'AM.model.User',
 storeId: 's_user',
 proxy:{
     type:'ajax',
     url:'/extjs/extjs!getUserList.action',
     reader: {
         type: 'json',
         root: 'topics'
     },writer:{
   type:'json'
  }
 },
 autoLoad: true //很关键
});

（4）view：这一层主要负责页面展示，也是确确实实能看见的一层。

 

<SPAN style="COLOR: #008000">Ext.define("AM.view.List",{
 extend:'Ext.grid.Panel',
 title : 'Grid Demo',//标题
 alias: 'widget.userlist',//别名定义
 frame : true,//面板渲染
 width : 600,
 height: 280,
 columns : [ //列模式
    {text:"Name",dataIndex:'name',100},
    {text:"age",dataIndex:'age',100},
    {text:"email",dataIndex:'email',350,
     field:{
      xtype:'textfield',
      allowBlank:false
     }
    }
 ],
 tbar :[
    {xtype:'button',text:'添加',iconCls:'table_add'},
    {xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
    {xtype:'button',text:'修改',iconCls:'table_edit'},
    {xtype:'button',text:'查看',iconCls:'table_comm'}
 ], 
 dockedItems :[{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
 }],
 plugins:[
    Ext.create("Ext.grid.plugin.CellEditing",{
     clicksToEdit : 2
    })
 ],
 selType:'checkboxmodel',//设定选择模式
 multiSelect:true,//运行多选
 store : 'Users',
 initComponent:function(){
  this.callParent(arguments);
 }
});

</SPAN>