`
pjwqq
  • 浏览: 81192 次
社区版块
存档分类
最新评论

Extjs4.2 MVC Grid的CURD简单例子

    博客分类:
  • js
阅读更多
  Grid是第一个要学的,Ext也一样,体验了一把,感觉MVC下用起来还是很爽的啊!
记录一下,免得忘了。
  功能很简单,显示用户密码,然后CURD
view在此
Ext.define('PJ.view.UserInfoPanel', {
    extend: 'Ext.panel.Panel',
	alias : 'widget.userinfopanel',	
	store : 'UserInfo',
    layout: {
        type: 'border'
    },
    title: '用户管理',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
        	tbar : [{
        		text : '添加',
        		action : 'add',
        		iconCls : 'add_btn'
        	},{
        		text : '删除',
        		action : 'del',
        		iconCls : 'del_btn'
        	},{
        		text : '保存',
        		action : 'save',
        		iconCls : 'save_btn'
        	}],
            items: [
                {
                    xtype: 'gridpanel',
                    region: 'center',
                    
                    selType: 'rowmodel',
     				plugins: [
        				Ext.create('Ext.grid.plugin.RowEditing', {
        				id : 'rowEditing',	
            			clicksToEdit: 1
        				})
    				],                   
                    
                    store : 'UserInfo',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'username',
                            text: '用户名',
                            editor : {
                            	xtype : 'textfield',
                            	allowBlank : false
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'password',
                            text: '密码',
                            editor : {
                            	xtype : 'textfield',
                            	allowBlank : false
                            }
                        }
                    ],
                    dockedItems: [{
        				xtype: 'pagingtoolbar',
        				store: 'UserInfo',   
        				dock: 'bottom',
        				displayInfo: true
    				}]
                }
            ]
        });
        me.callParent(arguments);
    }
});

简单的model
Ext.define('PJ.model.UserInfo',{
	extend : 'Ext.data.Model',
	fields : ['username','password']
});

小小的store
Ext.define('PJ.store.UserInfo',{
	extend : 'Ext.data.Store',
	model : 'PJ.model.UserInfo',
	autoLoad : false,
	autoSync : false,
	proxy : {
		type : 'ajax',
		api : {
			read : '/sshe/userAction!userlist.action',
			create : '/sshe/userAction!reg.action',
			update : '/sshe/userAction!changepassword.action',
			destroy : '/sshe/userAction!delUser.action'
		},
        reader: {
        	root : 'obj',
        	type: 'json',
        	successProperty: 'success'
        },
        writer : {
        	type : 'singlepost'
        }
	}	
}); 

最后是核心controller
Ext.define('PJ.controller.UserInfoList',{
	extend : 'Ext.app.Controller',
	views : ['UserInfoPanel'],
	stores : ['UserInfo'],
	models : ['UserInfo'],
	
	init : function(){
		this.control({
			'userinfopanel>gridpanel':{
				render : this.loadUserInfo
			},
			'userinfopanel>toolbar button[action=add]':{
				click : this.addUser
			},
			'userinfopanel>toolbar button[action=del]':{
				click : this.delUser
			},			
			'userinfopanel>toolbar button[action=save]' : {
				click : this.saveUserInfo
			}
		});
	},
	
	loadUserInfo : function(obj){
		var store = obj.getStore();
		store.load();
	},
	
	addUser : function(btn){
		var store = btn.up('panel').down('gridpanel').getStore();
		var r = Ext.create('PJ.model.UserInfo',{
			username : '用户名',
			password : '密码'
		});
		store.insert(0,r);
		var rowEditing = btn.up('panel').down('gridpanel').editingPlugin;
		rowEditing.startEdit(0, 0);
	},
	
	delUser : function(btn){
		var store = btn.up('panel').down('gridpanel').getStore();
		var grid = btn.up('panel').down('gridpanel');
        var sm = grid.getSelectionModel();
        store.remove(sm.getSelection());
        if (store.getCount() > 0) {
        	sm.select(0);
        }; 
	},
	
	saveUserInfo : function(btn){
		var store = btn.up('panel').down('gridpanel').getStore();
		store.sync({
			callback : function(store){	          		
                   Ext.Msg.alert('提示',store.proxy.reader.jsonData.msg);		
			}
		});
	}
});

层次分明,结构合理,一目了然,咳咳,当然这个是一次递交一个修改,批量的话还是要修改一下
截图留念


  • 大小: 8.1 KB
1
0
分享到:
评论

相关推荐

    EXTJS4.2 MVC环境搭建并显示数据

    通过以上步骤,我们就完成了EXTJS 4.2环境下基于MVC的简单数据展示应用。在实际项目中,你可能还需要处理更多复杂的逻辑,如分页、过滤、排序等,这都需要通过扩展模型、存储和控制器来实现。EXTJS提供了丰富的API和...

    extJs4.2MVC示例

    严格按照MVC架构分的曾,可以运行的extJs4.2MVC示例,在myclipse加到一个项目里的的webroot文件夹下,运行index.html即可

    ExtJS4.2 MVC

    通过学习这个小例子,你可以了解到ExtJS4.2 MVC的架构是如何工作的,如何组织代码,以及如何利用MVC模式开发复杂的Web应用。这对你提升JavaScript编程技巧,尤其是前端开发技能,特别是对于需要处理大量数据和交互的...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    extjs4.2 desktop mvc

    EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库,专门用于创建...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化...

    SpringMVC+ExtJs4.2实例

    ExtJs4.2强调MVC模式,将应用划分为Model(数据模型)、View(视图)和Controller(控制器)三部分,这样可以保持前端代码结构清晰,便于管理。 在本实例中,我们完全遵循ExtJs4.2的MVC模式,将应用分为对应的Model...

    Extjs 4.2.0 MVC 架构 官方文档例子中文

    ### Extjs 4.2.0 MVC 架构详解及官方文档中文示例 #### 一、文件结构 在Extjs 4.2.0中,为了更好地组织和管理代码,采用了一种标准的文件结构。这种结构不仅有助于提高代码的可读性和可维护性,还能确保团队成员...

    EXTjs4.2中文版

    EXTjs4.2中文版是EXTjs框架的一个重要版本,EXTjs是一个强大的JavaScript库,专门用于构建用户界面,尤其适用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。它以其组件化的设计理念,丰富的UI...

    基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2

    WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

    Extjs4.2 MVC 左菜单动态加载功能

    ExtJS 4.2 是一个流行的JavaScript框架,用于...以上就是关于在ExtJS 4.2中实现MVC模式下左菜单动态加载功能的基本步骤和关键知识点。实际开发中,还需要根据具体需求进行调整和完善,例如增加权限控制、错误处理等。

    ExtJS4.2 MVC + VS2012 MVC + EntityFramework 搭建系統框架

    注:用到了 EXTJS 的 MVC 修改webconfig的sql密碼後 遠行項目 隨便輸入什麼點登錄 會自動生成數據庫 生成數據庫之後執行下面的語句 添加種子數據 --數據庫種子數據 use EXTMVC insert [dbo].[users] values('...

    extjs 4.2 开发 参考书

    ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括数据管理、图表、表格、菜单、工具栏等,使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...

    EXTJS4.2学习入门教程

    EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程

    extjs4.2官方文档

    Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整,最规范的。

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...

    Extjs4.2中文教程

    Extjs4.2入门教程详解,及API文档。

Global site tag (gtag.js) - Google Analytics