ext的grid和queryForm的整合处理

最近一直在考虑将ext进行标签处理，利用简单的标签和属性输出ext的ui效果。将常用的ext方法进行封装，提供统一的js函数给外部调用，以此提高开发的效率。下面是一点尝试的成果，需要改进的东西还很多很多。希望自己在5月份可以多多的整理文档，和做ext开发的朋友分享。

代码还是有不少的问题，不过基本的框架出来了。
下面是jsp代码：

<%@ page contentType="text/html;charset=UTF-8" %>

<%@ taglib uri="/WEB-INF/greatwall.tld" prefix="gw" %>

<%@ include file="/commons/taglibs.jsp" %>

<gw:html>

<gw:head>

<gw:title caption="Extjsptag TextTags Demo"/>

<%@ include file="/commons/button-icon.jsp" %>

</gw:head>

<gw:body>

<gw:script>

function func_button_submitForm(){

queryGrid('sysUserinfoList','sysUserinfo');

}

function func_button_resetForm(){

resetForm('sysUserinfo');

}

function func_button_addRecord(){

var page = new pageDefine('insert-sys_userinfo.jsp',200,600);

page.goPage();

}

function func_button_updateRecord(){

var page = new pageDefine('txn090903.do',200,600);

page.addGridValue('userId','sysUserinfoList:userId');

page.goPage();

}

function func_button_deleteRecord(){

var page = new pageDefine('txn090906.do');

page.addGridValues('userId','sysUserinfoList:userId');

page.deleteRecord('确认删除选中的记录？','sysUserinfoList');

}

</gw:script>

<gw:viewport>

<gw:block title="查询用户管理" name="sysUserinfo" columns="2" height="150" region="north" >

<gw:text name="username" fieldLabel="用户名" colspan="1" />

<gw:text name="email" fieldLabel="电子邮箱" colspan="1" />

<gw:submit name="button_submitForm" handler="func_button_submitForm" />

<gw:reset name="button_resetForm" handler="func_button_resetForm" />

</gw:block>

<gw:grid name="sysUserinfoList" title="用户管理列表" region="center" keyid="userinfoId" rownum="true" checkbox="true" url="txn090902.do" >

<gw:button text="增加用户管理" name="button_addRecord" handler="func_button_addRecord" icon="icon_add.gif" />

<gw:button text="修改用户管理" name="button_updateRecord" handler="func_button_updateRecord" enablerule="1" icon="icon_update.gif" />

<gw:button text="删除用户管理" name="button_deleteRecord" handler="func_button_deleteRecord" enablerule="2" icon="icon_delete.gif" />

<gw:cell dataIndex="userinfoId" header="用户表ID" width="100"/>

<gw:cell dataIndex="username" sortable="true" header="用户名" width="100" />

<gw:cell dataIndex="email" header="电子邮箱" width="100"/>

</gw:grid>

</gw:viewport>

</gw:body>

</gw:html>

下面是现实后的html代码：

<html>

<head>

<title>Extjsptag TextTags Demo</title>

<style>

.icon_add {

background: url('/sie/script/button-icon/icon_add.gif') 0 2 no-repeat !important;

}

.icon_delete {

background: url('/sie/script/button-icon/icon_delete.gif') 0 2 no-repeat !important;

}

.icon_update {

background: url('/sie/script/button-icon/icon_update.gif') 0 2 no-repeat !important;

}

.icon-pub1 {

background: url('/sie/script/button-icon/icon-pub1.gif') 0 0 no-repeat !important;

}

</style>

</head>

<body>

var pWinCmpId = null;

Ext.BLANK_IMAGE_URL = 'http://localhost:8080/sie/script/ext/resources/images/default/s.gif';

var basePath = 'http://localhost:8080/sie/module/yhqxgl/sys_userinfo/';

var rootPath = 'http://localhost:8080/sie/';

Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'qtip';

/******************下面开始Body内JavaScript代码输出************************/

/********************************************/

/******开始输出用户自定义JavaScript部分******/

function func_button_submitForm(){

queryGrid('sysUserinfoList','sysUserinfo');

}

function func_button_resetForm(){

resetForm('sysUserinfo');

}

function func_button_addRecord(){

var page = new pageDefine('insert-sys_userinfo.jsp',200,600);

page.goPage();

}

function func_button_updateRecord(){

var page = new pageDefine('txn090903.do',200,600);

page.addGridValue('userId','sysUserinfoList:userId');

page.goPage();

}

function func_button_deleteRecord(){

var page = new pageDefine('txn090906.do');

page.addGridValues('userId','sysUserinfoList:userId');

page.deleteRecord('确认删除选中的记录？','sysUserinfoList');

}

/******用户自定义JavaScript部分结束********/

/******************************************/

var sysUserinfo_bodyWidth = document.body.clientWidth ;

var sysUserinfo_columns = 2 * 2;

var sysUserinfo_perWidth = sysUserinfo_bodyWidth/sysUserinfo_columns;

var sysUserinfo = new Ext.form.FormPanel({

region:'north',

buttonAlign:'center',frame:true,layout:'table',

name:'sysUserinfo',id:'sysUserinfo',height:150,title:'查询用户管理',

layoutConfig: {columns:sysUserinfo_columns},

defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:sysUserinfo_bodyWidth ,height:30}

});

sysUserinfo.add({

name:'sysUserinfo_item_username',id:'sysUserinfo_item_username',

colspan:2,bodyStyle:'padding:2px',

width:sysUserinfo_perWidth*2-15 ,

items:{

xtype:'textfield',name:'username',anchor:'100%',fieldLabel:'用户名',id:'username'

}

});

sysUserinfo.add({

name:'sysUserinfo_item_email',id:'sysUserinfo_item_email',

colspan:2,bodyStyle:'padding:2px',

width:sysUserinfo_perWidth*2-15 ,

items:{

xtype:'textfield',name:'email',anchor:'100%',fieldLabel:'电子邮箱',id:'email'

}

});

sysUserinfo.addButton({xtype:'button',name:'button_submitForm',handler:func_button_submitForm,text:'确定',type:'submit',id:'button_submitForm'});

sysUserinfo.addButton({xtype:'button',name:'button_resetForm',handler:func_button_resetForm,text:'重置',type:'reset',id:'button_resetForm'});

sysUserinfo.on("bodyresize", function(){

var _bodyWidth = document.body.clientWidth ;

var sysUserinfo_columns = 2 * 2;

var _perWidth = _bodyWidth/sysUserinfo_columns;

sysUserinfo.getComponent("sysUserinfo_item_username").setWidth(_perWidth * 2-15);

sysUserinfo.getComponent("sysUserinfo_item_email").setWidth(_perWidth * 2-15);

});

var sysUserinfoList_grid_record = Ext.data.Record.create([

{name:'userinfoId',type:'string'},

{name:'username',type:'string'},

{name:'email',type:'string'}

]);

var sysUserinfoList_grid_store = new Ext.data.Store({

proxy : new Ext.data.HttpProxy({url : 'http://localhost:8080/sie/txn090902.do'}),

reader : new Ext.data.JsonReader({root : 'result',totalProperty : 'totalCount',id : 'userinfoId'}, sysUserinfoList_grid_record)

});

var sysUserinfoList_grid_sm = new Ext.grid.CheckboxSelectionModel({dataIndex : 'userinfoId'});

var sysUserinfoList_grid_rownum = new Ext.grid.RowNumberer();

var sysUserinfoList_grid_cm = new Ext.grid.ColumnModel([

sysUserinfoList_grid_sm,

sysUserinfoList_grid_rownum,

{dataIndex:'userinfoId',width:100,type:'string',header:'用户表ID'},

{dataIndex:'username',sortable:true,width:100,type:'string',header:'用户名'},

{dataIndex:'email',width:100,type:'string',header:'电子邮箱'}

]);

var displayMsg = '显示第【<b><font color=red>{0}</font></b>】条至第【<b><font color=red>{1}</font></b>】条 / 共【<b><font color=red>{2}</font></b>】条记录';

var sysUserinfoList_grid_bbar = new Ext.PagingToolbar({

store: sysUserinfoList_grid_store,

displayMsg: displayMsg,

emptyMsg: '没有信息',

pageSize: 10,

displayInfo: true,

items: ['    每页显示数', new Ext.form.ComboBox({

store: new Ext.data.SimpleStore({

fields: ['abbr', 'state'],

data: [[10, 10], [15, 15], [20, 20], [30, 30], [40, 40], [60, 60], [80, 80], [100, 100]]

}),

width: 50,displayField: 'state',typeAhead: true,mode: 'local',value: 10,triggerAction: 'all',selectOnFocus: true,

listeners: {

change: {

fn: function(box, newValue, oldValue){

sysUserinfoList_grid_bbar_change_PageSize(newValue);

}

select: {

fn: function(combo, value){

//sysUserinfoList_grid_bbar_change_PageSize(combo.getValue());

}

})]

});

function sysUserinfoList_grid_bbar_change_PageSize(newValue){

sysUserinfoList_grid_bbar['pageSize']=newValue;

sysUserinfoList.store.reload({ params : { start : 0, limit : newValue } });

};

var sysUserinfoList_grid_tbar = [

{xtype:'button',name:'button_addRecord',cls:'x-btn-text-icon',handler:func_button_addRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_add.gif',text:'增加用户管理',type:'button',id:'button_addRecord'},'-',

{xtype:'button',name:'button_updateRecord',cls:'x-btn-text-icon',disabled:true,handler:func_button_updateRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_update.gif',text:'修改用户管理',type:'button',id:'button_updateRecord'},'-',

{xtype:'button',name:'button_deleteRecord',cls:'x-btn-text-icon',disabled:true,handler:func_button_deleteRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_delete.gif',text:'删除用户管理',type:'button',id:'button_deleteRecord'}

];

var sysUserinfoList = new Ext.grid.GridPanel({

viewConfig: { forceFit: true },

ds : sysUserinfoList_grid_store,

cm : sysUserinfoList_grid_cm,

selModel : new Ext.grid.RowSelectionModel(),loadMask : true,

tbar:sysUserinfoList_grid_tbar,

bbar : sysUserinfoList_grid_bbar,

bodyStyle:'width:100%',

url:'http://localhost:8080/sie/txn090902.do',

name:'sysUserinfoList',region:'center',title:'用户管理列表',iconCls:'icon-pub1',id:'sysUserinfoList'

});

sysUserinfoList.on("cellclick", function(){

var records = sysUserinfoList.getSelections();

if (!records || records.length == 0) {

Ext.getCmp("button_updateRecord").disable();

Ext.getCmp("button_deleteRecord").disable();

}

if (records.length == 1) {

Ext.getCmp("button_updateRecord").enable();

Ext.getCmp("button_deleteRecord").enable();

}

if (records.length > 1) {

Ext.getCmp("button_updateRecord").disable();

Ext.getCmp("button_deleteRecord").enable();

}

});

var viewport = new Ext.Viewport({

layout:'border',

items:[sysUserinfo,sysUserinfoList]

});

/******************Body内JavaScript代码输出结束************************/

});

</script>

</body>

</html>

posted on 2009-05-04 16:49 王总兵阅读(1904) 评论(5) 编辑收藏所属分类: Ext

# re: ext的grid和queryForm的整合处理 2009-05-04 17:31 阳衡锋

ext 好像有一个taglib吧 http://www.exttld.com/ 回复更多评论

# re: ext的grid和queryForm的整合处理 2009-05-04 17:42 王兵

@阳衡锋
确实有一个并且还有不少
我希望我的这个标签可以和一部分的后台程序结合起来使用，完成用户权限的控制。回复更多评论

# re: ext的grid和queryForm的整合处理 2009-05-05 13:09 tee

一直在想，那么多人那么痛苦的要把b/s整成c/s，大量精力都花在了UI而不是业务逻辑上，何必呢？回复更多评论

# re: ext的grid和queryForm的整合处理 2009-05-05 13:40 王兵

@tee
业务逻辑其实是核心的东西
但是架构师是不需要关心具体的业务逻辑
我们公司有自己的产品自己的平台、UI、快速开发环境等等
这些都和业务没关系回复更多评论

# re: ext的grid和queryForm的整合处理[未登录] 2009-05-07 09:27 陈亮

我认为用模板比用标签封装方便，标签调试起来太麻烦回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: json和javascript的关系 extjs查找树节点的2种方法带checkbox的treepanel实例 ext树实例bug修改记录标签开发ext树的完整例子利用ext标签的好处 GXT与EXT-GWT GWT-EXT 以及收费问题 javascript动态调用时参数传递 ext中使用iframe的tabs页带checkbox框的树菜单例子

沉睡森林@漂在北京

随笔分类(115)

随笔档案(154)

技术blog

搜索

最新评论

评论