初学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:true17 });

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:false15     }    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:true29     }],30     plugins:[31              Ext.create('Ext.grid.plugin.CellEditing',{32                  clicksToEdit:233              })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代码文件在的位置对应。

　　由于使用了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
     
       users = new HashSet
      
       ();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     @Override47     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 
      2 
     
       7      8     
      
        9         
       
        springMVC
       10         
       
        org.springframework.web.servlet.DispatcherServlet
       11         
       
        1
       12     
      13     14     
      
       15         
       
        springMVC
       16         
       
        *.do
       17     
      18     19 
     

springMVC-servlet.xml

1 
      2 
     
       9          10          11     
      
       12         
       
        13             
        
         14                 
         
          myController
         15             
        16         
       17     
      18     19     
      20             21 
     

　　OK.上传完毕。。。。