Neeke

伪全栈攻城狮

ExtJS4 MVC CURD之查询列表篇

先来看看经过上一步[通过Sencha Cmd辅助开发基于ExtJS4 MVC的项目],Sencha Cmd为我们生成了哪些东西。 [caption id="attachment_1467" align="aligncenter" width="185"] ExtJS4 MVC结构[/caption] 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');
    }
})
现在,在浏览器里面看看吧!正常情况下应该如下图所示: [caption id="attachment_1468" align="aligncenter" width="500"] ExtJS4 MVC[/caption] 最后,关于这里涉及到的Ext中的一些方法、组件以及组件的配置属性我就不详解了,具体的就查API文档吧!
  • 评论列表:
  •  supinfo
     发布于 2013-04-18 11:27:21  回复该评论
  • 麻烦问下为何我的ext和packages文件报错?我用的是MyEclipse
    •  neeke
       发布于 2013-04-25 17:17:51  回复该评论
    • 应该是里面的某些文件存在语法错误之类的,没关系。

发表评论:

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

«   2017年8月   »
123456
78910111213
14151617181920
21222324252627
28293031
网站分类
搜索
控制面板
您好,欢迎到访网站!
  查看权限
最新留言
文章归档
友情链接

Powered By Z-BlogPHP 1.5.1 Zero

Copyright Your WebSite.Some Rights Reserved.