一个ExtJs的最基本的mvc模式示例

　　初学ExtJs，各种纠结。在网上看到过跟本例很类似的博文。但是不甚明了。

　　一来我在学习中感觉不太熟练，体会到“半吊子”的难处，做个笔记，二来相应技术圈“分享时一种美德”的口号。为之后学习ExtJs 4.0及之后版本的朋友们能快速入门，本人贴出第一个用ExtJs 完成的示例。借鉴借鉴。

　　ExtJs,使用原生的js，结合OO的思想，减轻了server的压力，成就了RIA。当前类似的有adobe的flex,ms的silverlight。

　　这是一个完整的ExtJs mvc 的文件结构。这也是ExtJs官方文档中推荐的结构。

　　我们上传代码：

Model:

1 //User模型
2 Ext.define('UA.model.UserModel',{
3     extend:'Ext.data.Model',
4     fields:[
5     {name:'name',type:'string',sortable:true},        
6     {name:'age',type:'int',sortable:true},        
7     {name:'email',type:'string',sortable:true},        
8     ]
9 })

Store:

 1 //数据集合
 2 Ext.define('UA.store.UserStore',{
 3     extend:'Ext.data.Store',
 4     model:'UA.model.UserModel',
 5     proxy:{
 6         type:'ajax',
 7         url:'http://www.cnblogs.com/../myController.do',
 8         reader:{
 9             type:'json',
10             root:'topics'
11         },
12         writer:{
13             type:'json'
14         }
15     },
16     autoLoad:true
17 });

View:

 1 Ext.define('UA.view.UserView',{
 2     extend:'Ext.grid.Panel',
 3     titlle:'My Grid',
 4     alias:'widget.userview',
 5     frame:true,
 6     width:600,
 7     height:300,
 8     columns:[
 9     {text:'Name',dataIndex:'name',width:115},
10     {text:'Age',dataIndex:'age',width:115},
11     {text:'Email',dataIndex:'email',width:350,
12     field:{
13         xtype:'textfield',
14         allowBlank:false
15     }    
16     }],
17     
18     tbar:[
19     {xtype:'button',text:'添加'},      
20     {xtype:'button', id:'delete',text:'删除'},      
21     {xtype:'button',text:'修改'},      
22     {xtype:'button',text:'查看'}            
23     ],
24     dockedItems:[{
25         xtype:'pagingtoolbar',
26         store:'UserStore',
27         dock:'bottom',
28         displayInfo:true
29     }],
30     plugins:[
31              Ext.create('Ext.grid.plugin.CellEditing',{
32                  clicksToEdit:2
33              })
34     ],
35     selType:'checkboxmodel',
36     multiSelect:true,
37     store:'UserStore',
38     
39     initComponent:function(){
40         this.callParent(arguments);
41     }
42 });

　Controller:

 1 Ext.define('UA.controller.UserController',{
 2     extend:'Ext.app.Controller',
 3     init:function(){
 4         this.control({
 5             'userview button[id=delete]':{
 6                 click:function(o){
 7                     
 8                     debugger;
 9                     var grid = o.ownerCt.ownerCt;
10                     var data = grid.getSelectionModel().getSelection();
11                     if(data.length==0){
12                         Ext.Msg.alert('提示','请选择一条数据');
13                     }else{
14                         var st = grid.getStore();
15                         var ids =[];
16                         Ext.Array.each(data,function(record){
17                             ids.push(record.get('name'));
18                         })
19                         
20                         Ext.Ajax.request({
21                             url:'http://www.cnblogs.com/../myController.do',
22                             params:{ids:ids.join(',')},
23                             method:'POST',
24                             timeout:2000,
25                             success:function(response,opts){
26                                 Ext.Array.each(data,function(record){
27                                     st.remove(record);
28                                 })
29                             }
30                         })                
31                     }
32                 }
33             }
34             
35         });
36     },
37     views:['UserView'],
38     stores:['UserStore'],
39     models:['UserModel']
40 })

userApp:

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     Ext.Loader.setConfig({
 4         enabled:true
 5     });
 6     
 7     Ext.application({
 8         name:'UA',
 9         appFolder:'userApp',
10         launch:function(){
11             Ext.create('Ext.container.Viewport',{
12                 layout:'auto',
13                 items:{
14                    xtype:'userview',
15                    title:'UserList',
16                    html:"List of users will come here"
17                 }
18             });
19         },
20         controllers:[
21             'UserController'
22         ]
23     });
24         
25 })

　　这就是全部的JS代码了。这之间注释很少，可能不太利于新手学习。但是我依然建议大家在做这样一个Demo的时候，多看看官方提供的API。这对我们深入的理解和学习很有帮助。

　　在HTML页面上，我们引入相关的文件。当然你需要跟你的extjs代码文件在的位置对应。

<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../ext-4.1.1a/resources/css/ext-all.css">
<script type="text/javascript" src="http://www.cnblogs.com/../ext-4.1.1a/bootstrap.js"></script>
<script type="text/javascript" src="userApp.js"></script>

　　由于使用了ajax请求方式。将该小程序放到了spring MVC 框架下。

　　将后台控制器的代码传上来:

 1 package com.gavin.app;
 2 
 3 import java.io.Writer;
 4 import java.util.HashSet;
 5 import java.util.Set;
 6 
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9 
10 import org.springframework.web.servlet.ModelAndView;
11 import org.springframework.web.servlet.mvc.Controller;
12 
13 import com.gavin.bean.User;
14 
15 
16 public class MyController implements Controller{
17     
18     
19     private static Set<User> users = new HashSet<User>();
20     
21     static{
22         User user1 = new User("ry01",11,"ry01@ronyao.com");
23         User user2 = new User("ry02",11,"ry02@ronyao.com");
24         User user3 = new User("ry03",11,"ry03@ronyao.com");
25         User user4 = new User("ry04",11,"ry04@ronyao.com");
26         User user5 = new User("ry05",11,"ry05@ronyao.com");
27         User user6 = new User("ry06",11,"ry06@ronyao.com");
28         users.add(user1);
29         users.add(user2);
30         users.add(user3);
31         users.add(user4);
32         users.add(user5);
33         users.add(user6);
34     }
35     
36     
37     public String getJson(){
38         String myJson = "{\"total\":\""+users.size()+"\",\"topics\":[";
39         for (User u: users) {
40             myJson +="{\"name\":\""+u.getName()+"\",\"age\":\""+u.getAge()+"\",\"email\":\""+u.getEmail()+"\"},";
41         }
42         myJson = myJson.substring(0, myJson.length()-1)+"]}";
43         return myJson;
44     }
45 
46     @Override
47     public ModelAndView handleRequest(HttpServletRequest request,
48             HttpServletResponse response) throws Exception {
49             System.out.println("myController is reacted");
50             Writer writer = response.getWriter();
51             String json = this.getJson();
52             writer.write(json);
53             writer.close();
54             return null;
55     }
56         
57 }

　　同时也将spring的配置文件上传。

web.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.5" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 7     
 8     <servlet>
 9         <servlet-name>springMVC</servlet-name>
10         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
11         <load-on-startup>1</load-on-startup>
12     </servlet>
13     
14     <servlet-mapping>
15         <servlet-name>springMVC</servlet-name>
16         <url-pattern>*.do</url-pattern>
17     </servlet-mapping>
18     
19 </web-app>

springMVC-servlet.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans xmlns="http://www.springframework.org/schema/beans"
 3      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4      xmlns:context="http://www.springframework.org/schema/context"
 5      xsi:schemaLocation="http://www.springframework.org/schema/beans
 6          http://www.springframework.org/schema/beans/spring-beans.xsd
 7          http://www.springframework.org/schema/context
 8          http://www.springframework.org/schema/context/spring-context.xsd">
 9          
10          
11     <bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
12         <property name="mappings">
13             <props>
14                 <prop key="myController.do">myController</prop>
15             </props>
16         </property>
17     </bean>
18     
19     <bean id="myController" class="com.gavin.app.MyController"></bean>
20             
21 </beans>

　　OK.上传完毕。。。。

 

 

 

 

 

转载于:https://www.cnblogs.com/iceman-wx/archive/2013/03/21/2973619.html