记录黑客技术中优秀的内容, 传播黑客文化,分享黑客技术精华

ExtJS4 MVC CURD之查询列表篇

2013-01-22 17:55

先来看看经过上一步[通过Sencha Cmd辅助开发基于ExtJS4 MVC的项目],Sencha Cmd为我们生成了哪些东西。

ExtJS4 MVC结构

ExtJS4 MVC结构



Sencha Cmd为我们自动生成了整个MVC的目录结构,这个结构是ExtJS MVC固定,必须是这样的。可以看到默认生成的首页文件名为“index.html”,我们要用的是JSP,所以首先要把这个文件名改掉,接下来进入目录(E:\workspace\REST\WebContent\.sencha\app),打开“build-impl.xml”并将其中的“index.html”替换成“index.jsp”,不修改的话,后期用Sencha Cmd打包的时候会报错。
再做一点清理工作:
1.回到eclipse中分别删掉自动生成的两个“Main.js”分别位于controller与view目录。
2.打开“app.js”修改成这样:
/**
 * @作者 Neeke
 * @描述 ExtJS MVC应用程序入口
 */
Ext.application({
	controllers: [],
	name: 'REST'
})

现在正式进入开发阶段!我们来做一个用户信息的CURD界面!
第一步:创建controller
1.在contoller目录下创建一个名为“UserController.js”的文件,打开并键入如下代码:
/**
 * @作者 Neeke
 * @描述 用户控制器
 */
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller'
})

2.将这个controller加入到“app.js”中,此时“app.js”看起来是这样的:
/**
 * @作者 Neeke
 * @描述 ExtJS MVC应用程序入口
 */
Ext.application({
	controllers: ['UserController'],
	name: 'REST'
})

第二步:创建model
在model目录下创建一个名为“User.js”的文件,打开并键入如下代码:
/**
 * @作者 Neeke
 * @描述 用户模型
 */
Ext.define('REST.model.User', {
	extend: 'Ext.data.Model',
	idProperty: 'uid',
	fields: [
	         {name: 'uid', mapping: 'uid', type: 'string'},
	         {name: 'username', mapping: 'username', type: 'string'},
	         {name: 'realName', mapping: 'realName', type: 'string'},
	         {name: 'age', mapping: 'age', type: 'int'}
	]
})

第三步:创建store
1.在store目录下创建一个名为“Users.js”的文件,打开并键入如下代码:
/**
 * @作者 Neeke
 * @描述 用户数据源
 */
Ext.define('REST.store.Users', {
	extend: 'Ext.data.Store',
	autoSync: true,
	model: 'REST.model.User',
	data: (function(){
		var list = new Array();
		for(var i = 0; i < 10; i++){
			var o = {};
			o.uid = i;
			o.username = 'neeke' + i;
			o.realName = 'neeke的真名' + i;
			o.age = i;
			list.push(o);
		}
		return list;
	})(),
	proxy: {
		type: 'rest',
		url: 'user',
		reader: {
			type: 'json',
			root: 'data',
			messageProperty: 'msg'
		},
		writer: {
			type: 'json'
		}
	}
})

2.将这个store加入到“UserContoller.js”中,此时“UserContoller.js”看起来是这样的:
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller',
	stores: ['Users']
})

第四步:创建用户信息列表
1.在view目录下新建一个“user”目录,接着在“user”目录下创建一个名为“List.js”的文件,打开并键入如下代码:
/**
 * @作者 Neeke
 * @描述 用户信息列表
 */
Ext.define('REST.view.user.List', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.user_list',
	requires: ['Ext.grid.plugin.CellEditing'],
	initComponent: function(){
		Ext.apply(this, {
			columns: {
				defaults: {
					flex: 1
				},
				items: [{
					text: '账号',
					editor: 'textfield',
					dataIndex: 'username'
				},{
					text: '姓名',
					editor: 'textfield',
					dataIndex: 'realName'
				},{
					text: '年龄',
					editor: {
						xtype: 'numberfield',
						minValue: 1,
						maxValue: 100,
						hideTrigger: true
					},
					dataIndex: 'age'
				}]
			},
			plugins: [{
				ptype: 'cellediting'
			}],
			dockedItems: [{
				xtype: 'toolbar',
				dock: 'top',
				items: [{
					text: '添加',
					itemId: 'add'
				},'-',{
					text: '删除',
					disabled: true,
					itemId: 'delete'
				},'-',{
					text: '编辑',
					disabled: true,
					itemId: 'edit'
				}]
			},{
				xtype: 'pagingtoolbar',
				dock: 'bottom',
				displayInfo: true,
				store: 'Users'
			}],
			store: 'Users'
		});
		this.callParent();
	}
})

2.将这个view加入到“UserContoller.js”中,此时“UserContoller.js”看起来是这样的:
Ext.define('REST.controller.UserController', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	views: ['user.List']
})

3.将view下的“Viewport.js”修改成这样:
Ext.define('REST.view.Viewport', {
    renderTo: Ext.getBody(),
    extend: 'Ext.container.Viewport',
    alias: 'widget.main_viewport',
    requires:[
        'Ext.tab.Panel',
        'Ext.layout.container.Border'
    ],
    layout: {
        type: 'border'
    },
    items: [{
        region: 'west',
        tbar: [{
        	text: '退出'
        }],
        xtype: 'treepanel',
        title: 'west',
        width: 150,
        store: Ext.create('Ext.data.TreeStore', {
        	root: {
        		expanded: true,
        		children: [
        		           {text: '用户信息管理', page: 'user_list', leaf: true}
        		]
        	}
        }),
        listeners: {
        	'itemclick': function(view, record){
        		if(record.isLeaf()){
        			var id = 'tab-' + record.internalId;
        			var center = view.up('viewport').down('tabpanel');
        			var tab = center.queryById(id);
        			if(!tab){
        				tab = center.add(Ext.widget(record.raw.page, {itemId: id, title: record.get('text')}));
        			}
        			center.setActiveTab(tab);
        		}
        	}
        }
    },{
        region: 'center',
        xtype: 'tabpanel',
        itemId: 'center'
    }]
})

4.将“app.js”修改成这样:
Ext.application({
	controllers: ['UserController'],
	name: 'REST',
	requires: ['REST.view.Viewport'],
	launch: function(){
    	Ext.widget('main_viewport');
    }
})

现在,在浏览器里面看看吧!正常情况下应该如下图所示:
ExtJS4 MVC

ExtJS4 MVC


最后,关于这里涉及到的Ext中的一些方法、组件以及组建的配置属性我就不详解了,具体的就查API文档吧!

知识来源: www.ineeke.com/archives/1466/

阅读:125753 | 评论:0 | 标签:ExtJS extjs api ExtJS4

想收藏或者和大家分享这篇好文章→复制链接地址

“ExtJS4 MVC CURD之查询列表篇”共有0条留言

发表评论

姓名:

邮箱:

网址:

验证码:

公告

关注公众号hackdig,学习最新黑客技术

推广

工具

标签云