一个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

一个ExtJs的最基本的mvc模式示例相关推荐

(iOS-框架封装)iOS设计模式——MVC模式
MVC模式是iOS编程中提到的最多次的设计模式,也是使用最频繁的设计模式之一.网络上有很多的MVC模式的分析文章,但都是从原理上来解释,很少能找到配套的案例来说明到底在实际的项目中要如何的使用这种模式 ...
java mvc模式_Java MVC模式
MVC模式表示:模型 -视图 - 控制器模式.此模式用于分离应用程序的问题. 模型(Model) - 模型表示携带数据的对象或JAVA POJO.如果其数据改变它也可以具有逻辑来更新控制器. 视图(V ...
MVC 模式/Servlet/JSP 编译原理剖析：Servlet 组件到底属于 MVC 模式的哪一层？
文章目录前言一.回忆什么是 MVC 模式? 1.1.Model.View.Controller 组件介绍 1.2.明确 View 与 Controller 组件区别二.什么是 Servlet? ...
FleaPHP 开发指南 - 2. FleaPHP 中的 MVC 模式
理解 FleaPHP 中,MVC 模式是如何实现的,以及其特点,可以帮助你更好的运用 FleaPHP. 什么叫做设计模式? 简单来说,设计模式(Pattern)就是解决某一类问题的特定方法.由于这种特 ...
基于 MVC 模式实现简单航班查询系统
文章目录一.前言二.功能要求: 三.代码展示: View: Model层: Cotroller层: 四.效果展示: 后记: 一.前言本文 MVC 模式的一个简单案例,可以作为练习 MVC 模式 ...
ExtJS学习：MVC模式案例（三）
在ExtJS案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网 ...
使用MVC模式实现一个超简单的网上书店系统
使用MVC模式实现网上书店(大二实验报告) 1.问题描述: 主页面要求实现如下图所示: 登录前,若选择"个人中心",则提示请登录:登录后,页面显示如图所示: 在主页面显示" ...
[期末]MVC模式写一个Java五子棋（含完整源码及简单AI）
GobangGame 一个下五子棋的java小程序本程序参考翁恺老师细胞模拟机的控制模式编写概述及目标五子棋是一种两人对弈的纯策略型棋类游戏,通常双方分别使用两色的棋子,下在棋盘上,先形成5子连 ...
Standup Timer的MVC模式及项目结构分析
前言学习android一段时间了,为了进一步了解android的应用是如何设计开发的,决定详细研究几个开源的android应用.从一些开源应用中吸收点东西,一边进行量的积累,一边探索android的 ...
谈三层结构与MVC模式的区别
谈三层结构与MVC模式的区别在CSDN和园子里有朋友谈到三层与MVC的区别,以前也有人抛出这个问题,本人对来公司面试的朋友也偶乐会提这方面的问题. 那么我也来讲讲我对这两者的理解吧. ...

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

一个ExtJs的最基本的mvc模式示例相关推荐

最新文章

热门文章