码迷,mamicode.com
首页 > Web开发 > 详细

KHL 012 11-计算机-本职-前台-框架-extjs4.1 001 mvc 小例子

时间:2017-11-23 08:37:46      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:argument   created   setup   users   proxy   保存   nis   char   tab   

说明

关于后台代码只贴出Controller部分与pojo部分

完整代码参见:https://gitee.com/laolang2016/extstudy

 

目录结构

技术分享图片

 

 

后台代码

domain

BaseDomain:

技术分享图片
 1 package com.laolang.ext.mvcone.domain;
 2 
 3 import com.fasterxml.jackson.annotation.JsonFormat;
 4 
 5 import java.util.Date;
 6 
 7 /**
 8  * 实体类基类
 9  * @author laolang2016
10  * @version 1.0
11  */
12 public class BaseDomain {
13 
14     /**
15      * 创建时间
16      */
17     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
18     protected Date created;
19 
20     /**
21      * 最后更新时间
22      */
23     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
24     protected Date updated;
25 
26     public Date getCreated() {
27         return created;
28     }
29     public void setCreated(Date created) {
30         this.created = created;
31     }
32     public Date getUpdated() {
33         return updated;
34     }
35     public void setUpdated(Date updated) {
36         this.updated = updated;
37     }
38 
39 
40 
41 }
View Code

 

 

User:

技术分享图片
  1 package com.laolang.ext.mvcone.domain;
  2 
  3 import com.fasterxml.jackson.annotation.JsonFormat;
  4 import org.springframework.format.annotation.DateTimeFormat;
  5 
  6 import java.util.Date;
  7 
  8 import javax.persistence.*;
  9 /**
 10  * 用户实体类
 11  * @author laolang2016
 12  * @version 1.0
 13  */
 14 @Table(name = "tb_user")
 15 public class User extends BaseDomain {
 16 
 17 
 18     public User() {
 19     }
 20 
 21     @Override
 22     public String toString() {
 23         return "User{" +
 24                 "id=" + id +
 25                 ", nickName=‘" + nickName + ‘\‘‘ +
 26                 ", pwd=‘" + pwd + ‘\‘‘ +
 27                 ", sex=" + sex +
 28                 ", email=‘" + email + ‘\‘‘ +
 29                 ", phone=‘" + phone + ‘\‘‘ +
 30                 ", joinTime=" + joinTime +
 31                 ", birthday=" + birthday +
 32                 ‘}‘;
 33     }
 34 
 35     public Integer getId() {
 36         return id;
 37     }
 38 
 39     public void setId(Integer id) {
 40         this.id = id;
 41     }
 42 
 43     public String getNickName() {
 44         return nickName;
 45     }
 46 
 47     public void setNickName(String nickName) {
 48         this.nickName = nickName;
 49     }
 50 
 51     public String getPwd() {
 52         return pwd;
 53     }
 54 
 55     public void setPwd(String pwd) {
 56         this.pwd = pwd;
 57     }
 58 
 59     public boolean isSex() {
 60         return sex;
 61     }
 62 
 63     public void setSex(boolean sex) {
 64         this.sex = sex;
 65     }
 66 
 67     public String getEmail() {
 68         return email;
 69     }
 70 
 71     public void setEmail(String email) {
 72         this.email = email;
 73     }
 74 
 75     public String getPhone() {
 76         return phone;
 77     }
 78 
 79     public void setPhone(String phone) {
 80         this.phone = phone;
 81     }
 82 
 83     public Date getJoinTime() {
 84         return joinTime;
 85     }
 86 
 87     public void setJoinTime(Date joinTime) {
 88         this.joinTime = joinTime;
 89     }
 90 
 91     public Date getBirthday() {
 92         return birthday;
 93     }
 94 
 95     public void setBirthday(Date birthday) {
 96         this.birthday = birthday;
 97     }
 98 
 99     /**
100      * ID
101      */
102     @Id
103     @GeneratedValue(strategy = GenerationType.IDENTITY)
104     private Integer id;
105 
106     @Column(name = "nick_name")
107     private String nickName;
108 
109     private String pwd;
110 
111     private boolean sex;
112 
113     private String email;
114 
115     private String phone;
116 
117     @Column(name = "join_time")
118     @JsonFormat(pattern = "yyyy-MM-dd")
119     private Date joinTime;
120 
121     @DateTimeFormat(pattern = "yyyy-MM-dd")
122     @JsonFormat(pattern = "yyyy-MM-dd")
123     private Date birthday;
124 
125 }
View Code

 

 

 

pojo

Tip:

技术分享图片
 1 package com.laolang.ext.mvcone.pojo;
 2 
 3 /**
 4  * Created by Administrator on 2017/11/22.
 5  */
 6 public class Tip {
 7 
 8     public Tip() {
 9     }
10 
11     public boolean isSuccess() {
12         return success;
13     }
14 
15     public void setSuccess(boolean success) {
16         this.success = success;
17     }
18 
19     public String getMsg() {
20         return msg;
21     }
22 
23     public void setMsg(String msg) {
24         this.msg = msg;
25     }
26 
27     private boolean success;
28 
29     private String msg;
30 }
View Code

 


UserListExtPojo

技术分享图片
 1 package com.laolang.ext.mvcone.pojo;
 2 
 3 
 4 import com.laolang.ext.mvcone.domain.User;
 5 
 6 import java.util.List;
 7 
 8 public class UserListExtPojo {
 9 
10     public UserListExtPojo() {
11     }
12 
13     public Long getTotal() {
14         return total;
15     }
16 
17     public void setTotal(Long total) {
18         this.total = total;
19     }
20 
21     public List<User> getData() {
22         return data;
23     }
24 
25     public void setData(List<User> data) {
26         this.data = data;
27     }
28 
29     private Long total;
30 
31     private List<User> data;
32 }
View Code

 

 

 

controller

技术分享图片
 1 package com.laolang.ext.mvcone.web;
 2 
 3 import com.github.pagehelper.PageInfo;
 4 import com.laolang.ext.mvcone.domain.User;
 5 import com.laolang.ext.mvcone.pojo.Tip;
 6 import com.laolang.ext.mvcone.pojo.UserListExtPojo;
 7 import com.laolang.ext.mvcone.service.UserService;
 8 import com.laolang.ext.mvcone.util.StringUtils;
 9 import org.springframework.beans.factory.annotation.Autowired;
10 import org.springframework.http.HttpStatus;
11 import org.springframework.http.ResponseEntity;
12 import org.springframework.stereotype.Controller;
13 import org.springframework.web.bind.annotation.RequestMapping;
14 import org.springframework.web.bind.annotation.RequestMethod;
15 import org.springframework.web.bind.annotation.RequestParam;
16 
17 import java.util.List;
18 
19 @RequestMapping("user")
20 @Controller
21 public class UserController {
22 
23     @Autowired
24     private UserService userService;
25 
26     @RequestMapping(value = "list",method = RequestMethod.GET)
27     public ResponseEntity<UserListExtPojo> list(@RequestParam(name = "page", defaultValue = "1") Integer page, @RequestParam(name = "limit", defaultValue = "10") Integer size) {
28         try{
29             PageInfo<User> pageInfo = userService.findPageListByWhere(page,size,null);
30             UserListExtPojo users = new UserListExtPojo();
31             users.setTotal(pageInfo.getTotal());
32             users.setData(pageInfo.getList());
33 
34             return ResponseEntity.ok(users);
35         }catch (Exception e){
36 
37         }
38         return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
39     }
40 
41     @RequestMapping(value = "delete/ids",method = RequestMethod.POST)
42     public ResponseEntity<Tip> deleteByIds( @RequestParam(name = "ids") String ids ){
43         Tip tip = new Tip();
44         try{
45             userService.deleteByIds(User.class,"id", StringUtils.idsToList(ids));
46             tip.setSuccess(true);
47             tip.setMsg("删除成功!");
48             return ResponseEntity.ok(tip);
49         }catch (Exception e){
50 
51         }
52         tip.setSuccess(false);
53         tip.setMsg("删除失败!");
54         return ResponseEntity.ok(tip);
55     }
56 
57     @RequestMapping(value = "save",method = RequestMethod.POST)
58     public ResponseEntity<Tip> save( User user){
59         Tip tip = new Tip();
60         try{
61             userService.save(user);
62             tip.setSuccess(true);
63             tip.setMsg("保存成功!");
64             return ResponseEntity.ok(tip);
65         }catch (Exception e){
66 
67         }
68         tip.setSuccess(false);
69         tip.setMsg("保存失败!");
70         return ResponseEntity.ok(tip);
71     }
72 
73     @RequestMapping(value = "update",method = RequestMethod.POST)
74     public ResponseEntity<Tip> update( User user ){
75         Tip tip = new Tip();
76         try{
77             userService.updateByPrimaryKeySelective(user);
78             tip.setSuccess(true);
79             tip.setMsg("修改成功!");
80             return ResponseEntity.ok(tip);
81         }catch (Exception e){
82 
83         }
84         tip.setSuccess(false);
85         tip.setMsg("修改失败!");
86         return ResponseEntity.ok(tip);
87     }
88 }
View Code

 

 



extjs代码

index.html

技术分享图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ext hello</title>
 6 
 7     <!-- extjs css-->
 8     <link href="/assets/extjs-4.1.1/resources/css/ext-all.css" type="text/css" rel="stylesheet" />
 9 </head>
10 <body>
11 
12 
13 
14 <script type="text/javascript" src="/assets/extjs-4.1.1/bootstrap.js"></script>
15 <script type="text/javascript" src="/assets/extjs-4.1.1/locale/ext-lang-zh_CN.js"></script>
16 
17 <script type="text/javascript" src="/app/app.js"></script>
18 <script type="text/javascript" src="/assets/js/lib.js"></script>
19 
20 </body>
21 </html>
View Code

 

 

 

lib.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 var KM = {
 5     timeType : {
 6         DATE : ‘date‘,
 7         DATETIME : ‘datetime‘
 8     },
 9     /**
10      * 转换时间戳
11      * @param time
12      * @param type
13      * @returns {string}
14      */
15     converDate : function(time,type) {
16         if ( type == KM.timeType.DATE ){
17             return Ext.util.Format.date(time,‘Y-m-d‘);
18         }
19         if( type == KM.timeType.DATETIME ){
20             return Ext.util.Format.date(time,‘Y-m-d H:m:s‘);
21         }
22     },
23     /**
24      * 性别转换
25      * @param sex
26      * @returns {string}
27      */
28     convertSex : function( sex ){
29         if( sex ){
30             return ‘男‘;
31         }else{
32             return ‘女‘;
33         }
34     },
35     url:{
36         user:{
37             list:‘http://www.extmvcone.com/user/list‘,
38             deleteByIds:‘http://www.extmvcone.com/user/delete/ids‘,
39             save : ‘http://www.extmvcone.com/user/save‘,
40             update : ‘http://www.extmvcone.com/user/update‘
41         }
42     }
43 };
View Code

 

 

app.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.onReady(function () {
 5     Ext.QuickTips.init();
 6     Ext.Loader.setConfig({
 7         enabled : true
 8     });
 9 
10     Ext.application({
11         name : ‘KM‘,
12         appFolder : ‘app‘,
13         launch : function(){
14             //Ext.MessageBox.alert(‘hello‘,‘hello world!‘);
15             Ext.create(‘Ext.container.Viewport‘,{
16                 layout : "fit",
17                 border : 0,
18                 items : [{
19                     xtype : "mainviewLayout"
20                 }]
21             });
22         },
23         controllers : [
24             ‘KM.controller.MainController‘
25         ]
26     });
27 });
View Code

 

 

MainViewLayout.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.view.MainViewLayout‘,{
 5     extend : ‘Ext.panel.Panel‘,
 6     layout : ‘border‘,
 7     alias  : ‘widget.mainviewLayout‘,
 8     items : [{
 9         region : ‘north‘,
10         xtype : ‘topview‘
11     },{
12         region : ‘west‘,
13         xtype : ‘leftview‘
14     },{
15         xtype : ‘panel‘,
16         region : ‘center‘,
17         layout : ‘fit‘,
18         items : [{
19             xtype : ‘centerview‘,
20             border : 0
21         }]
22     }],
23     initComponent : function(){
24         this.callParent(arguments);
25     }
26 });
View Code

 

TopView.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.view.TopView‘,{
 5     extend : ‘Ext.panel.Panel‘,
 6     alias  : ‘widget.topview‘,
 7     id : ‘topview‘,
 8     height : 50,
 9     html : ‘topview‘
10 });
View Code

 

LeftView.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.view.LeftView‘,{
 5     extend : ‘Ext.panel.Panel‘,
 6     alias  : ‘widget.leftview‘,
 7     id : ‘leftview‘,
 8     collapsible: true,
 9     split: true,
10     width : 180,
11     minWidth: 100,
12     title:"功能模块导航",
13     layout : ‘accordion‘,
14     layoutConfig :{
15         titleCollapse: false,
16         animate: true,
17         activeOnTop: true
18     },
19     items:[{
20         title:"用户管理",
21         items:[{
22             xtype:"treepanel",
23             rootVisible : false,// 不展示根节点
24             displayField : "text",
25             border:0,
26             root: {
27                 expanded: true,
28                 children: [{
29                         id:"lvUserManage",
30                         text: "用户管理",
31                         leaf: true
32                 }]
33             }
34         }]
35     },{
36         title:"系统设置",
37         html: "权限管理"
38     }],
39     initComponent: function(){
40         this.callParent(arguments);
41     }
42 });
View Code

 

CenterView.js

 

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define("KM.view.CenterView",{
 5     extend: ‘Ext.tab.Panel‘,
 6     alias : ‘widget.centerview‘,
 7     id:‘centerview‘,
 8     //margins: ‘2 0 0 0‘,
 9     border : 0,
10     bodyStyle: ‘padding:0px‘,
11     menuAlign:"center",
12     items:[{
13         title:‘首页‘,
14 //        iconCls:‘home‘,
15         bodyPadding :5,
16         layout:‘fit‘,
17         items:{
18             //xtype:‘taskjobgrid‘
19         },
20         tabConfig  : {//标签配置参数
21 
22         }
23     }],
24     initComponent:function(){
25         this.callParent(arguments);
26     }
27 });
View Code

 

 

 MainController.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.controller.MainController‘,{
 5     extend : ‘Ext.app.Controller‘,
 6     init : function(){
 7         var me = this;
 8         me.control({
 9             ‘leftview treepanel‘:{
10                 itemclick : function( tree, record,item,index, e, eOpts){
11                     var centerView = tree.up(‘mainviewLayout‘).down(‘centerview‘);
12                     if(record.data[‘id‘]==‘lvUserManage‘){
13 
14                         addTab(me,{
15                             parentView : centerView,
16                             viewXtype : ‘userlayout‘,
17                             controller : ‘KM.controller.UserController‘,
18                             viewName : ‘KM.view.user.UserLayout‘
19                         });
20                     }
21                 }
22             }
23         });
24 
25     },
26     views : [
27         ‘KM.view.LeftView‘,
28         ‘KM.view.MainViewLayout‘,
29         ‘KM.view.TopView‘,
30         ‘KM.view.CenterView‘
31     ],
32     stores : [],
33     models : []
34 });
35 
36 /**
37  *
38  * @param controller
39  * @param tabConfig
40  * {
41  * parentView : 父级view
42  * viewXtype : 要添加的view的alias
43  * controller : 要添加的view对应的controller
44  * viewName : 要添加的view的全名
45  * }
46  */
47 function addTab( controller , tabConfig){
48     if( tabConfig){
49         var parentView = tabConfig.parentView;
50         var tab = parentView.down(tabConfig.viewXtype);
51         if( !tab ){
52             controller.application.getController(tabConfig.controller).init();
53             tab = Ext.create(tabConfig.viewName);
54             parentView.add(tab);
55             parentView.setActiveTab(tab)
56         }else{
57             parentView.setActiveTab(tab);
58         }
59     }
60 }
View Code

 

UserLayout.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.view.user.UserLayout‘,{
 5     extend : ‘Ext.panel.Panel‘,
 6     alias : ‘widget.userlayout‘,
 7     title : ‘用户管理‘,
 8     layout : ‘fit‘,
 9     closable : true,
10     items : [{
11         xtype : ‘usergrid‘
12     },{
13         xtype : ‘userform‘,
14         hidden : true
15     }]
16 });
View Code

 

UserGrid.js 

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.view.user.UserGrid‘, {
 5     extend: ‘Ext.grid.Panel‘,
 6     alias: ‘widget.usergrid‘,
 7     store: "KM.store.UserStore",
 8     selModel: {
 9         selType: "checkboxmodel"
10     },
11     border: 0,
12     multiSelect: true,
13     frame: true,
14     enableKeyNav: true,  //可以使用键盘控制上下
15     columnLines: true, //展示竖线
16     stripeRows: true, // 斑马线效果
17     tbar: [{
18         xtype: ‘button‘,
19         text: ‘新增用户‘,
20         id : ‘userGridBtnAdd‘
21     },{
22         xtype: ‘button‘,
23         text: ‘修改用户‘,
24         id : ‘userGridBtnUpdate‘
25     },{
26         xtype: ‘button‘,
27         text: ‘删除用户‘,
28         id : ‘userGridBtnDel‘
29     }],
30     bbar:{
31         xtype:‘pagingtoolbar‘,
32         store:‘KM.store.UserStore‘,
33         dock:‘bottom‘,
34         displayInfo:true
35     },
36     columns : [{
37         xtype : ‘rownumberer‘
38     },{
39         text : ‘用户昵称‘,
40         dataIndex : ‘nickName‘,
41         width : 130
42     },{
43         text : ‘性别‘,
44         dataIndex : ‘sex‘,
45         width : 50,
46         renderer : function( value ){
47             return KM.convertSex(value);
48         }
49     },{
50         text : ‘邮箱‘,
51         dataIndex : ‘email‘,
52         width : 200
53     },{
54         text : ‘手机号码‘,
55         dataIndex : ‘phone‘,
56         width : 150
57     },{
58         text : ‘加入日期‘,
59         dataIndex : ‘joinTime‘,
60         width : 100,
61         renderer : function (value) {
62             return KM.converDate(value,KM.timeType.DATE);
63         }
64     },{
65         text : ‘出生日期‘,
66         dataIndex : ‘birthday‘,
67         width : 100,
68         renderer : function (value) {
69             return KM.converDate(value,KM.timeType.DATE);
70         }
71     },{
72         text : ‘created‘,
73         dataIndex : ‘created‘,
74         width : 130,
75         renderer : function (value) {
76             return KM.converDate(value,KM.timeType.DATETIME);
77         }
78     },{
79         text : ‘updated‘,
80         dataIndex : ‘updated‘,
81         width : 130,
82         renderer : function (value) {
83             return KM.converDate(value,KM.timeType.DATETIME);
84         }
85     }],
86     initComponent: function () {
87         this.callParent(arguments);
88     }
89 });
View Code

 

UserForm.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.view.user.UserForm‘,{
 5     extend:"Ext.form.Panel",
 6     alias:"widget.userform",
 7     layout : {
 8         type : "table",
 9         columns : 2
10     },
11     align:"left",
12     defaults:{
13         margin:"10 0 0 15",
14         selectOnFocus:true,
15         width:300,
16         msgTarget:"side" //提示信息现在的位置
17     },
18     tbar:[{
19         xtype:"button",
20         id : ‘userFormBtnSave‘,
21         text:"保存"
22     },{
23         xtype:"button",
24         id : ‘userFormBtnCancel‘,
25         text:"返回"
26     }],
27     items:[{
28         xtype:"textfield",
29         fieldLabel:"ID",
30         name:"id",
31         hidden:true
32     },{
33         xtype:"textfield",
34         fieldLabel:"昵称",
35         name:"nickName",
36         allowBlank : false,//不允许为空
37         blankText : ‘用户名不能为空‘,//错误提示内容
38         readOnly:false
39     },{
40         xtype:"textfield",
41         fieldLabel:"密码",
42         inputType : ‘password‘,
43         name:"pwd",
44         allowBlank : false,//不允许为空
45         blankText : ‘密码不能为空‘,//错误提示内容
46         readOnly:false
47     },{
48         xtype:"textfield",
49         fieldLabel:"手机号码",
50         name:"phone",
51         allowBlank : false,//不允许为空
52         blankText : ‘电话不能为空‘,//错误提示内容
53         readOnly:false
54     },{
55         xtype:"datefield",
56         fieldLabel:"出生日期",
57         name:‘birthday‘,
58         readOnly:false,
59         format : ‘Y-m-d‘
60     },{
61         xtype:"radiogroup",
62         fieldLabel:"性别",
63         items : [{
64             name : ‘sex‘,
65             inputValue : true,
66             boxLabel : ‘男‘,
67             id : ‘userFormRadioMale‘
68         },{
69             name : ‘sex‘,
70             inputValue : false,
71             boxLabel : ‘女‘,
72             id : ‘userFormRadioFemale‘
73         }]
74     },{
75         xtype:"textfield",
76         fieldLabel:"邮箱地址",
77         name:‘email‘,
78         readOnly:false
79     }],
80     initComponent:function(){
81         this.callParent(arguments);
82     }
83 });
View Code

 

User.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.model.User‘,{
 5     extend : ‘Ext.data.Model‘,
 6     fields:[{
 7         name : ‘id‘,
 8         type : ‘int‘
 9     },{
10         name : ‘nickName‘,
11         type : ‘string‘
12     },{
13         name : ‘email‘,
14         type : ‘string‘
15     },{
16         name : ‘phone‘,
17         type : ‘string‘
18     },{
19         name : ‘birthday‘,
20         type : ‘date‘
21     },{
22         name : ‘sex‘,
23         type : ‘bool‘
24     },{
25         name : ‘joinTime‘,
26         type : ‘date‘
27     },{
28         name : ‘pwd‘,
29         type : ‘string‘
30     },{
31         name : ‘created‘,
32         type : ‘date‘
33     },{
34         name : ‘updated‘,
35         type : ‘date‘
36     }]
37 });
View Code

 

UserStore.js

技术分享图片
 1 /**
 2  * Created by Administrator on 2017/11/22.
 3  */
 4 Ext.define(‘KM.store.UserStore‘,{
 5     extend : ‘Ext.data.Store‘,
 6     storeId : ‘UserStore‘,
 7     model : ‘KM.model.User‘,
 8     autoLoad : true,
 9     pageSize : 10,
10     proxy : {
11         type : ‘ajax‘,
12         url : KM.url.user.list,
13         reader : {
14             type : ‘json‘,
15             root : ‘data‘
16         },
17         writer : {
18             type : ‘json‘
19         }
20     }
21 });
View Code

 

UserController.js

技术分享图片
  1 /**
  2  * Created by Administrator on 2017/11/22.
  3  */
  4 Ext.define(‘KM.controller.UserController‘,{
  5     extend : ‘Ext.app.Controller‘,
  6     init : function() {
  7         var me = this;
  8         me.control({
  9             // userform cancel
 10             ‘userform button[id=userFormBtnCancel]‘ : {
 11                 click : function(btn){
 12                     var form = btn.up("userform");
 13                     var grid = form.up("userlayout").down("usergrid");
 14                     form.hide();
 15                     grid.show();
 16                 }
 17             },
 18             // userform save
 19             ‘userform button[id=userFormBtnSave]‘ : {
 20                 click : function (btn) {
 21                     //根据id值来做判断,如果id为null说明是做添加操作,否则就是做修改操作
 22 
 23                     //1获得form
 24                     var form = btn.up("userform");
 25                     var grid = form.up("userlayout").down("usergrid");
 26                     var id = form.getForm().findField("id").getValue();
 27                     var url = "";
 28                     if(id == "" || null == id){
 29                         url = KM.url.user.save;
 30                     }else{
 31                         url = KM.url.user.update;
 32                     }
 33                     //2.把数据保存到数据库中去
 34                     form.submit({
 35                         clientValidation : true,
 36                         waitMsg : ‘正在进行处理,请稍后...‘,
 37                         url : url,
 38                         method : ‘POST‘,
 39                         success : function(form, action) {
 40                             var resObj = Ext.decode(action.response.responseText);
 41                             if (resObj.success) {
 42                                 form.reset();
 43                                 //3.把这条数据加到grid中
 44                                 grid.getStore().load();
 45                                 Ext.Msg.alert("提示", resObj.msg);
 46                             } else {
 47                                 Ext.Msg.alert("提示", resObj.msg);
 48                             }
 49                         },
 50                         failure : function(form, action) {
 51                             Ext.Msg.alert("提示","请求处理失败!");
 52                         }
 53                     });
 54                 }
 55             },
 56             // 添加用户
 57             ‘usergrid button[id=userGridBtnAdd]‘ : {
 58                 click : function(btn){
 59                     var form = btn.up("userlayout").down("userform");
 60                     //清空数据
 61                     form.getForm().reset();
 62                     grid = form.up("userlayout").down("usergrid");
 63                     grid.hide();
 64                     form.show();
 65                 }
 66             },
 67             // 修改用户
 68             ‘usergrid button[id=userGridBtnUpdate]‘:{
 69                 click : function(btn){
 70                     Ext.Msg.alert("提示", "双击需要修改的记录进行修改!");
 71 
 72                 }
 73             },
 74             // 双击进入表单修改数据
 75             ‘usergrid‘ : {
 76                 itemdblclick : function(_grid, record, item, index, e, eOpts) {
 77                     var form = _grid.up("userlayout").down("userform");
 78                     var grid = form.up("userlayout").down("usergrid");
 79                     //把选择的数据加载到form中去
 80                     var _record = grid.getSelectionModel().getSelection();
 81                     form.loadRecord(_record[0]);
 82                     grid.hide();
 83                     form.show();
 84                     // 解决表单回显时性别赋值不正确的问题
 85                     var sex = record.get(‘sex‘);
 86                     if( sex ){
 87                         Ext.getCmp(‘userFormRadioMale‘).setValue(true);
 88                     }else{
 89                         Ext.getCmp(‘userFormRadioFemale‘).setValue(true);
 90                     }
 91                 }
 92             },
 93             // 删除用户
 94             ‘usergrid button[id=userGridBtnDel]‘:{
 95                 click : function(btn){
 96                     console.log(‘删除用户‘);
 97                     var grid = btn.up("usergrid");
 98                     var store = grid.getStore();
 99                     var records = grid.getSelectionModel().getSelection();
100                     if (!records || records.length <= 0) {
101                         Ext.Msg.alert("提示", "请选择需要删除的数据!");
102                         return;
103                     }
104                     // 根据id删除多条记录
105                     var data = [];
106                     Ext.Array.each(records, function(model) {
107                         data.push(Ext.JSON.encode(model.get(‘id‘)));
108                     });
109                     Ext.Ajax.request({
110                         waitMsg : ‘正在进行处理,请稍后...‘,
111                         url : KM.url.user.deleteByIds,
112                         params : {
113                             ids : data.join(",")
114                         },// 根据id删除
115                         method : "POST",
116                         //timeout : 4000,
117                         success : function(response, opts) {
118                             var resObj = Ext.decode(response.responseText);
119                             if (resObj.success) {
120                                 // 不用查询,从grid中去掉对应的记录就OK了
121                                 store.load();
122                                 Ext.Msg.alert("提示", resObj.msg);
123                             } else {
124                                 Ext.Msg.alert("提示", resObj.msg);
125                             }
126                         }
127                     });
128                 }
129             }
130         });
131     },
132     views : [
133         ‘KM.view.user.UserLayout‘,
134         ‘KM.view.user.UserGrid‘,
135         ‘KM.view.user.UserForm‘
136     ],
137     models : [
138         ‘KM.model.User‘
139     ],
140     stores : [
141         ‘KM.store.UserStore‘
142     ]
143 });
View Code

 

 

 

 相关文件说明

  • Tip.java用来输出提示信息
  • UserLiseExtPojo.java输出Ext JS 中 Store所需要的json格式
  • lib.js主要用来实现一些通用方法,比如日期格式化,以及保存需要用到的URL地址

 

注意事项

  • form组件回显的时候,如果性别为男则可以正常显示,如果性别为女则无法显示,相应的解决方法是直接查询到radio组件再直接赋值
  • JS文件名与JS类名要一致
  • 输出的JSON数据,日期格式最好进行格式化,否则form组件回显的时候会出问题
  • ----------------------------
  • 本项目配置了nginx,如果你不想用相关配置,注意要把lib.js中的地址修改一下

 运行效果

技术分享图片

 

 

技术分享图片

 

KHL 012 11-计算机-本职-前台-框架-extjs4.1 001 mvc 小例子

标签:argument   created   setup   users   proxy   保存   nis   char   tab   

原文地址:http://www.cnblogs.com/khlbat/p/7881518.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!