Ext JS 4.0 Grid实战

cnyangqi

浏览: 110128 次
性别:
来自: 杭州

最近访客更多访客>>

524898107

sheng012

thinkerAndThinker

picksun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS4

EXT ITeye Ajax json JavaScript

最近公司新项目决定前台采用ExtJS4，于是小弟只有。。。
说明：
小弟编写的这个模块，表单数据CRUD都在一个表单上完成，没有创建新的窗口，用户查询结果共用了一个grid。
ExtJS4环境需要加载的东东不多，详见我JSP文件及图。

返回数据形式：

{'totalCount': 27,'result':[{"uum0401":103,"uum0402":"a81","uum0405":false,"uum0406":false},{"uum0401":104,"uum0402":"9","uum0405":false,"uum0406":false},{"uum0401":105,"uum0402":"a9","uum0405":false,"uum0406":false},{"uum0401":127,"uum0402":"2","uum0405":false,"uum0406":false},{"uum0401":122,"uum0402":"aa"},{"uum0401":123,"uum0402":"ok"},{"uum0401":124,"uum0402":"asas"},{"uum0401":125,"uum0402":"aaa","uum0405":false,"uum0406":false},{"uum0401":129,"uum0402":"a1","uum0405":false,"uum0406":false},{"uum0401":130,"uum0402":"a2","uum0405":false,"uum0406":false}]}

为了方便大虾路过方便过目，最后只贴出js源码，其余东东附件提供，good luck。项目繁忙，就不多说了，有问题短我吧，我会尽力尽快回复，大家见谅。

/**
 * @author cnyangqi@126.com
 * @version 1.0
 * @since 1.0
 */

Ext.Loader.setConfig({
			enabled : true
		});
Ext.Loader.setPath('Ext.ux', '../js/extjs4/ux/');

Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging',
		'Ext.ModelManager', 'Ext.tip.QuickTipManager',
		'Ext.ux.ProgressBarPager']);

Ext.onReady(function() {
	Ext.tip.QuickTipManager.init();

	// 定义领域模型
	Ext.define('Ecwuum04', {
				extend : 'Ext.data.Model',
				fields : ['uum0401', 'uum0402', 'uum0403', 'uum0404',
						'uum0405', 'uum0406'],
				idProperty : 'uum0401'// 实体主键
			});

	var itemsPerPage = 10;
	var key;// 搜索关键字

	// 创建数据仓库
	var store = Ext.create('Ext.data.Store', {
				autoDestroy : true,
				model : 'Ecwuum04',
				proxy : {
					type : 'ajax',
					url : 'ecwuum04!list.action',
					reader : {
						type : 'json',
						root : 'result',// JSON数组对象名
						totalProperty : 'totalCount'// 数据集记录总数
					}
				},
				pageSize : itemsPerPage,
				autoLoad : true
			});

	// beforeload( Ext.data.Store store, Ext.data.Operation operation)
	store.on('beforeload', function(s, o) {
				if (Ext.getCmp('key').getValue()) {
					key = Ext.getCmp('key').getValue();
				} else {
					key = 'undefined';
				}
				s.proxy.extraParams['key'] = key;
			});

	var selModel = Ext.create('Ext.selection.CheckboxModel');

	var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
				// clicksToEdit : 2,//默认双击修改行数据
				clicksToMoveEditor : 1,
				autoCancel : false
			});

	// 创建表格
	var grid = Ext.create('Ext.grid.Panel', {
		width : 650,
		height : 300,
		title : '角色信息',
		frame : true,
		disableSelection : false, // 允许选择行 *
		selType : 'rowmodel', // 选择类型设置为：行选择
		plugins : [rowEditing],// 加载行编辑插件
		listeners : {
			'selectionchange' : function(sm, selections) {
				grid.down('#removeButton').setDisabled(selections.length == 0);
			}
		},
		selModel : selModel,
		store : store,
		columns : [{
					text : "角色编号",
					dataIndex : "uum0401"
				}, {
					text : "角色名称",
					dataIndex : 'uum0402',
					sortable : true, // 此列数据可排序
					hideable : false, // 此列数据不可隐藏
					renderer : function(value) { // 一般用于添加EMail
						return Ext.String.format(
								'<a href="mailto:{0}@qq.com">{1}</a>', value,
								value);
					},
					field : {
						xtype : 'textfield',
						allowBlank : false
					}
				}, {
					text : "角色类型",
					dataIndex : 'uum0403',
					sortable : true,
					field : {
						xtype : 'textfield'
					}
				}, {
					text : "关联业务系统",
					dataIndex : 'uum0404',
					sortable : true
				}, {
					text : "标记",
					dataIndex : 'uum0405',
					sortable : true
				}, {
					text : "默认角色",
					dataIndex : "uum0406"
				}],
		// bbar : bbar,
		dockedItems : [{
					xtype : 'toolbar',
					dock : 'top',
					items : [{
								xtype : 'button',
								text : '添加',
								tooltip : '添加角色',
								iconCls : 'add',
								handler : function() {
									var r = Ext.ModelManager.create({
												uum0402 : '',
												uum0403 : '',
												uum0404 : '',
												uum0405 : '',
												uum0406 : ''
											}, 'Ecwuum04');
									store.insert(0, r);

									rowEditing.startEdit(0, 0);
								}
							}, '-', {
								xtype : 'button',
								text : '修改',
								tooltip : '修改选择的角色',
								iconCls : 'option',
								handler : function() {
									var sm = grid.getSelectionModel();
									rowEditing.startEdit(sm.getSelection()[0],
											0);// records
								}
							}, '-', {
								itemId : 'removeButton',
								xtype : 'button',
								text : '删除',
								tooltip : '删除选择的角色',
								iconCls : 'remove',
								handler : function() {
									var sm = grid.getSelectionModel();
									var records = sm.getSelection();
									rowEditing.cancelEdit();
									store.remove(records);
									sm.select(0);
									for (var i = 0; i < records.length; i++) {
										delEcwuum04(records[i].data['uum0401']);
									}
								},
								disabled : true
							}, '->', {
								xtype : "label",
								text : "角色名称："
							}, {
								xtype : "textfield",
								id : "key"
							}, {
								text : "搜索",
								iconCls : 'search',
								handler : function() {
									// searchEcwuum04();
									store.load();
								}
							}]
				}, {
					xtype : 'pagingtoolbar',
					id : 'pt',
					store : store, // 分页store与grid一致
					dock : 'bottom',
					displayInfo : true,
					plugins : Ext.create('Ext.ux.ProgressBarPager', {})
				}],
		iconCls : 'icon-grid',
		renderTo : 'grid'
	});

	grid.on('edit', onEdit, this);

	function onEdit(e) {
		e.record.commit();
		Ext.Ajax.request({
					url : 'ecwuum04!save.action',
					params : {
						"ecwUum04.uum0401" : e.record.data['uum0401'],
						"ecwUum04.uum0402" : e.record.data['uum0402'],
						"ecwUum04.uum0403" : e.record.data['uum0403'],
						"ecwUum04.uum0404" : e.record.data['uum0404'],
						"ecwUum04.uum0405" : e.record.data['uum0405'],
						"ecwUum04.uum0406" : e.record.data['uum0406']
					},
					success : function(response) {
						var text = response.responseText;
						alert(text);
					}
				});
		store.load();
	};

	function delEcwuum04(id) {
		Ext.Ajax.request({
					url : 'ecwuum04!delete.action',
					params : {
						"ecwUum04.uum0401" : id
					},
					success : function(response) {
					}
				});
		store.load();
		Ext.MessageBox.alert("信息", "删除成功");
	}

});

分享到：

5.8 | 5.5

2011-05-06 14:52
浏览 9675
评论(49)
论坛回复 / 浏览 (57 / 28729)
分类:Web前端
查看更多

49 楼 DGCX 2013-08-01

楼主啊，我想知道怎么给行添加双击事件啊？？

48 楼 chnitzql 2011-06-13

楼主，有没有后台返回list或者Map的grid或者Tree的例子啊
有没有前台用dwr获取后台数据的例子

47 楼 cnyangqi 2011-05-26

hexawing 写道

cnyangqi 写道

hexawing 写道

请教一下LZ，row-editor出不来那些控件框框，可能会是怎么回事啊？

Firebug报错如下：

我就是把它官网上的例子代码全部拷贝下来(改了一处ux的路径)，结果都不行……

Ext.Loader.setPath('Ext.ux', '/javascripts/ext/examples/ux');

之前是

Ext.Loader.setPath('Ext.ux', '../ux');

这应该不是问题所在吧……

浏览了一下，初步怀疑是你提供的JSON数据格式与你下载的表格JSON格式不匹配造成的。检查下reader设置。

我又检查了一下，是因为之前写的一个给必填项加上红*号的语句找不到组件，把那个屏蔽了就好了……

帅。

46 楼 hexawing 2011-05-25

cnyangqi 写道

hexawing 写道

请教一下LZ，row-editor出不来那些控件框框，可能会是怎么回事啊？

Firebug报错如下：

我就是把它官网上的例子代码全部拷贝下来(改了一处ux的路径)，结果都不行……

Ext.Loader.setPath('Ext.ux', '/javascripts/ext/examples/ux');

之前是

Ext.Loader.setPath('Ext.ux', '../ux');

这应该不是问题所在吧……

浏览了一下，初步怀疑是你提供的JSON数据格式与你下载的表格JSON格式不匹配造成的。检查下reader设置。

我又检查了一下，是因为之前写的一个给必填项加上红*号的语句找不到组件，把那个屏蔽了就好了……

45 楼 cnyangqi 2011-05-25

zhangshaomin39 写道

使用楼主的代码怎么有错呢？
Chrome 报 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

firefox 报 el is null
[在此错误处中断] if (el.insertAdjacentHTML) {
ext-all-debug.js (第 6655 行）

咋回事呢？

忘记了，是页面没有grid元素哈

44 楼 cnyangqi 2011-05-25

SE7EN 写道

jsp 图呢

jsp 无内容，除了导入ExtJS4运行环境，貌似第一页附件包里有。
图鉴于某种原因我和谐了^^

43 楼 zhangshaomin39 2011-05-24

42 楼 SE7EN 2011-05-24

jsp 图呢

41 楼 cnyangqi 2011-05-22

hexawing 写道

请教一下LZ，row-editor出不来那些控件框框，可能会是怎么回事啊？

Firebug报错如下：

我就是把它官网上的例子代码全部拷贝下来(改了一处ux的路径)，结果都不行……

Ext.Loader.setPath('Ext.ux', '/javascripts/ext/examples/ux');

之前是

Ext.Loader.setPath('Ext.ux', '../ux');

这应该不是问题所在吧……

浏览了一下，初步怀疑是你提供的JSON数据格式与你下载的表格JSON格式不匹配造成的。检查下reader设置。

40 楼 hexawing 2011-05-19

请教一下LZ，row-editor出不来那些控件框框，可能会是怎么回事啊？

Firebug报错如下：

我就是把它官网上的例子代码全部拷贝下来(改了一处ux的路径)，结果都不行……

Ext.Loader.setPath('Ext.ux', '/javascripts/ext/examples/ux');

之前是

Ext.Loader.setPath('Ext.ux', '../ux');

这应该不是问题所在吧……

39 楼 cnyangqi 2011-05-17

yangming103 写道

EXTJS3用过，4.0则还没关注过，有空要看看区别

Ext4.0改动还是比较大的^^

38 楼 cnyangqi 2011-05-17

gaowei52306 写道

楼主，请问grid有两条数据但只显示一条数据，怎么办啊？

应该不会吧，你仔细检查代码吧。

37 楼 yangming103 2011-05-16

EXTJS3用过，4.0则还没关注过，有空要看看区别

36 楼 gaowei52306 2011-05-14

楼主，请问grid有两条数据但只显示一条数据，怎么办啊？

35 楼 cnyangqi 2011-05-12

646158013 写道

cnyangqi 写道

chinafather 写道

3-4可以混起来用

官方也给出了一个混用的例子，但不知道混用会不会产生什么污染呢？

我在官网下载了一个 ext-3-to-4-migration-pack.zip 的文件。这个文件大志的罗列和概述了一下 3.X 和4.0 的一些区别

提供了一个 3.X 迁移到 4 的建议。。(FF+firebug 貌似是教你怎么用这个区跟踪错误和需要兼荣的代码块。然后手动改)- -||
还给了一个example是一个业绩曲线图。
4.0版本实现的。
3.x版本实现的。
3.3.1版本实现的
（这个版本他直接迁移到了3.3.1和4.0版本做出来的效果一样。写法是3.0的写法，但是导入的JS是4.0版本的js。同样去除适配器（ext/adapter/ext/ext-base.js），另外还在HTML页面导入了两个js/ext3-core-compat.js/ext3-compat.js）。
PS：英文文档理解和阅读有点吃力。有发现的朋友交流一下

升级比重造累。

34 楼 cnyangqi 2011-05-12

Dev|il 写道

和Extjs 3.2 写法完全不一样,lz高深了

呵呵，应该说ExtJS4进步了^^

33 楼 cnyangqi 2011-05-12

<div class="quote_title">senhui19 写道</div>
<div class="quote_div">
<p>不知楼主有研究过EXTJS4 DESKTOP的模块不？最近小弟遇到一个问题：怎么样能使当第一列排满图标后自动切换到第二列(最好用户调整窗口大小后能自动切换)，查了看了官方的源码还是没有弄明白，不知你能否帮我解决下呢？谢谢了<img src="/images/smiles/icon_biggrin.gif" alt=""></p>
<p> </p>
<p> </p>
</div>
<p><br>抱歉，项目繁忙，暂时没有时间和精力去研究这个例子。</p>

32 楼 646158013 2011-05-11

cnyangqi 写道

chinafather 写道

3-4可以混起来用

官方也给出了一个混用的例子，但不知道混用会不会产生什么污染呢？

31 楼 Dev|il 2011-05-11

和Extjs 3.2 写法完全不一样,lz高深了

30 楼 senhui19 2011-05-10

<p>不知楼主有研究过EXTJS4 DESKTOP的模块不？最近小弟遇到一个问题：怎么样能使当第一列排满图标后自动切换到第二列(最好用户调整窗口大小后能自动切换)，查了看了官方的源码还是没有弄明白，不知你能否帮我解决下呢？谢谢了<img src="/images/smiles/icon_biggrin.gif" alt=""></p>
<p> </p>
<p> </p>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论