Neeke

伪全栈攻城狮

ExtJS4 MVC CURD之增删改篇

在[ExtJS4 MVC CURD之查询列表篇]中已经完成了一个拥有“添加”、“删除”、“编辑”三个按钮的用户信息列表,接下来我们对这三个按钮做相应的事件处理,从而完成一个完整纯前端的用户信息CURD。 第一步:处理按钮状态 可以注意到,在上面的列表界面中的“删除”与“编辑”按钮时灰色的,在代码中我默认这两个是“disabled: true”,这算是为了用户体验吧,只有当用户选中了一条记录的时候再去激活这两个操作按钮,下面就来先处理这个问题。 1.打开“UserController.js”编写监听“user_list”(List.js中定义的alias)的选中与取消选中事件代码,详细代码如下:
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	views: ['user.List'],
	init: function(){
		this.control({
			'user_list': {
				select: this.onSelect,
				deselect: this.onDeselect
			}
		});
	},
	
	onSelect: function(){
		//处理选中事件
	},
	
	onDeselect: function(){
		//处理取消选中事件
	}	
})
2.在“UserController.js”增加一个通用方法用于改变按钮状态并在对应的事件中调用:
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	views: ['user.List'],
	//refs简单的说就是根据selector查找到对应的组件并生成一个ref的get方法引用这个组件,详细请查API文档。
	refs: [{
		ref: 'editButton',
		selector: 'user_list button#edit'
	},{
		ref: 'deleteButton',
		selector: 'user_list button#delete'
	}],
	init: function(){
		this.control({
			'user_list': {
				select: this.onSelect,
				deselect: this.onDeselect
			}
		});
	},
	
	onSelect: function(){
		this.setButtonsDisabled(false, false);
	},
	
	onDeselect: function(){
		this.setButtonsDisabled(true, true);
	},
	
	setButtonsDisabled: function(e, d){
		this.getEditButton().setDisabled(e);
		this.getDeleteButton().setDisabled(d);
	}
})
现在,跑起来,随便选中一条记录,按钮状态就会发生改变! 第二步:完成增删改 1.创建用户信息编辑界面。在“app/view/user”目录下创建一个名为“Edit.js”的文件,并写入如下代码:
/**
 * @作者 Neeke
 * @Blog http://ineeke.com
 * @描述 用户信息编辑
 */
Ext.define('REST.view.user.Edit', {
	extend: 'Ext.window.Window',
	alias: 'widget.user_edit',
	initComponent: function(){
		Ext.apply(this, {
			layout: 'fit',
			modal: true,
			maximizable: true,
			minimizable: true,
			resizable: false,
			items: {
				xtype: 'form',
				margin: 5,
				frame: true,
				fieldDefaults: {
					allowBlank: false,
					anchor: '100%',
					labelAlign: 'right',
					labelWidth: 40
				},
				items: [{
					xtype: 'textfield',
					name: 'username',
					fieldLabel: '账号'
				},{
					xtype: 'textfield',
					name: 'realName',
					fieldLabel: '姓名'
				},{
					xtype: 'numberfield',
					fieldLabel: '年龄',
					name: 'age',
					hideTrigger: true,
					minValue: 1,
					maxValue: 100
				}]
			},
			buttonAlign: 'center',
			buttons: [{
				text: '保存',
				itemId: 'save'
			},{
				text: '取消',
				itemId: 'cancel'
			}]
		});
		this.callParent(arguments);
	}
})
2.打开“UserController.js”分别在“添加”与“编辑”按钮点击事件中调用用户信息编辑界面,现在完整代码应该像这样:
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	views: ['user.List', 'user.Edit'],
	refs: [{
		ref: 'editButton',
		selector: 'user_list button#edit'
	},{
		ref: 'deleteButton',
		selector: 'user_list button#delete'
	}],
	init: function(){
		this.control({
			'user_list': {
				select: this.onSelect,
				deselect: this.onDeselect
			},
			
			'user_list button#add': {
				click: this.onAddButtonClick
			},
			
			'user_list button#edit': {
				click: this.onEditButtonClick
			}
		});
	},
	
	onSelect: function(){
		this.setButtonsDisabled(false, false);
	},
	
	onDeselect: function(){
		this.setButtonsDisabled(true, true);
	},
	
	setButtonsDisabled: function(e, d){
		this.getEditButton().setDisabled(e);
		this.getDeleteButton().setDisabled(d);
	},
	
	onAddButtonClick: function(btn){
		Ext.widget('user_edit', {animateTarget: document.body, title: btn.getText()}).show();
	},
	
	onEditButtonClick: function(btn){
		var win = Ext.widget('user_edit', {animateTarget: document.body, title: btn.getText()});
		var record = btn.up('user_list').getSelectionModel().getLastSelected();
		win.down('form').getForm().loadRecord(record);
		win.show();
	}
})
再次跑起程序,“添加”与“编辑”被点击时都会出现信息编辑窗口了,但是还不能保存与取消编辑。 3.打开“UserController.js”分别监听处理“user_edit”(Edit.js的alias)中的保存与取消按钮以及删除按钮:
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	models: ['User'],
	views: ['user.List', 'user.Edit'],
	refs: [{
		ref: 'editButton',
		selector: 'user_list button#edit'
	},{
		ref: 'deleteButton',
		selector: 'user_list button#delete'
	}],
	init: function(){
		this.control({
			'user_list': {
				select: this.onSelect,
				deselect: this.onDeselect
			},
			
			'user_list button#add': {
				click: this.onAddButtonClick
			},
			
			'user_list button#edit': {
				click: this.onEditButtonClick
			},
			
			'user_edit button#save': {
				click: this.onSaveButtonClick
			},
			
			'user_edit button#cancel': {
				click: this.onCancelButtonClick
			},
			
			'user_list button#delete': {
				click: this.onDeleteButtonClick
			}
		});
	},
	
	onSelect: function(){
		this.setButtonsDisabled(false, false);
	},
	
	onDeselect: function(){
		this.setButtonsDisabled(true, true);
	},
	
	setButtonsDisabled: function(e, d){
		this.getEditButton().setDisabled(e);
		this.getDeleteButton().setDisabled(d);
	},
	
	onAddButtonClick: function(btn){
		Ext.widget('user_edit', {animateTarget: document.body, title: btn.getText()}).show();
	},
	
	onEditButtonClick: function(btn){
		var win = Ext.widget('user_edit', {animateTarget: document.body, title: btn.getText()});
		var record = btn.up('user_list').getSelectionModel().getLastSelected();
		win.down('form').getForm().loadRecord(record);
		win.show();
	},
	
	onSaveButtonClick: function(btn){
		var me = this;
		var win = btn.up('window');
		var form = win.down('form').getForm();
		if(form.isValid()){
			var record = form.getRecord();
			if(record){
				record.beginEdit();
				record.set(form.getValues());
				record.endEdit();
			}else{
				record = Ext.create(me.getUserModel(), form.getValues());
				record.setDirty();
				me.getUsersStore().insert(0, record);
			}
			win.close();
		}
	},
	
	onCancelButtonClick: function(btn){
		btn.up('window').close();
	},
	
	onDeleteButtonClick: function(btn){
		this.setButtonsDisabled(true, true);
		var record = btn.up('user_list').getSelectionModel().getLastSelected();
		this.getUsersStore().remove(record);
	}
})
[caption id="attachment_1472" align="aligncenter" width="500"] ExtJS4 MVC[/caption] 至此,仅限于前端的CURD已经完成了!
  • 评论列表:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2016年11月   »
123456
78910111213
14151617181920
21222324252627
282930
网站分类
搜索
最新留言
文章归档
友情链接

Powered By Z-BlogPHP 1.5 Zero

Copyright Your WebSite.Some Rights Reserved.