Extjs入门三层架构搭建

Java代码  

1. Ext MVC 三层详解：  
2. // 程序入口 --  app.js  
3. Ext.onReady(function(){    
4.    Ext.QuickTips.init();    
5.    Ext.Loader.setConfig({  //开启自动加载功能    
6.        enabled:true    
7.    });    
8.    Ext.application({      
9.       name:'AM',                //自定义命名空间，通常都定义为AM    
10.       appFolder:'app',          //配置Ext框架所在的文件目录    
11.       launch:function(){        //在所有资源都载入成功后运行    
12.           Ext.create('Ext.container.Viewport',{      
13.               items:{    
14.                   width:1500,    
15.                   height:500,    
16.                   xtype:'mainlayout' //这里引用了自定义的组件mainlayout(视图层的MainLayout的别称)    
17.               }    
18.           });    
19.       },    
20.       controllers:[  //加载所有的控制器    
21.           'UserController'    
22.       ]    
23.    });    
24. });    
25.   
26. // 控制层 UserController.js  
27. Ext.define('AM.controller.UserController',{    
28.     extend:'Ext.app.Controller',    //继承Ext.app.Controller类    
29.     init:function(){    
30.         this.control({              //控制事件处理    
31.             'userlist button[id=add]':{      
32.                 click:function(){    
33.                       //do something    
34.                 }    
35.             }                 
36.         });    
37.     },    
38.     views:[    
39.          'UserList',   //放在MainLayout之前加载    
40.          'DeptList',    
41.          'MainLayout'         
42.     ],    
43.     stores:[    
44.          'UserStore',    
45.          'DeptStore'    
46.     ],    
47.     models:[    
48.          'UserModel'    
49.     ]    
50. });    
51.   
52. // Model层 UserModel.js  
53. Ext.define('AM.model.UserModel',{    
54.      extend:'Ext.data.Model',  //用来绑定到grid表字段    
55.      fields:[    
56.         {name:'id',type:'string'},    
57.         {name:'name',type:'auto'},      
58.         {name:'password',type:'string'},    
59.         {name:'birth',type:'auto'},    
60.         {name:'email',type:'auto'},    
61.         {name:'intro',type:'string'}    
62.     ]    
63. });    
64.   
65. // Store层：UserStore.js  
66. Ext.define('AM.store.UserStore',{    
67.     extend:'Ext.data.Store',    
68.     model:'AM.model.UserModel',    
69.     proxy:{    
70.        type:'ajax',    
71.        url:'/ExtjsTest/test/readuser',    
72.        reader:{    
73.             type:'json',    
74.             root:'userinfo'    
75.        },    
76.        writer:{    
77.            type:'json'    
78.        }    
79.     },    
80.     autoLoad:true    
81. });    
82.   
83. // 视图层  
84. Ext.define('AM.view.UserList',{    
85.         extend:'Ext.grid.Panel', //GridPanel组件    
86.         alias:'widget.userlist', //别名    
87.     //  title:'用户信息',    
88.         width:500,    
89.         height:500,    
90.         store:'UserStore',  //绑定UserStore数据集    
91.         selModel:{    
92.            selType:'checkboxmodel'    
93.         },    
94.         tbar:[{text:"添加",id:'add'},{text:'删除',id:'del'},{text:'保存',id:'save'}],  //按钮事件在控制层写    
95.         columns:[{header:'编号',dataIndex:'id',field:{xtype:'textfield',allowBlank:false}},      
96.              {header:'姓名',dataIndex:'name',field:{xtype:'textfield',allowBlank:false}},    
97.              {header:'密码',dataIndex:'password',field:{xtype:'textfield',allowBlank:false}},    
98.              {header:'生日',dataIndex:'birth',field:{xtype:'datefield',allowBlank:false}},    
99.              {header:'邮件',dataIndex:'email',field:{xtype:'textfield',allowBlank:false}},    
100.              {header:'简介',dataIndex:'intro',field:{xtype:'textfield',allowBlank:false}}],    
101.        ]    
102. });