一个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.上传完毕。。。。