最近一直在考虑将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>
<base href="${ctx}/${basePath}">
<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>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<script src="http://localhost:8080/sie/script/ext/ext-base.js" type="text/javascript"></script>
<script src="http://localhost:8080/sie/script/ext/ext-all.js" type="text/javascript"></script>
<script src="http://localhost:8080/sie/script/ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<link href="http://localhost:8080/sie/script/ext/resources/css/ext-all.css" type="text/css" rel="stylesheet">
<script src="http://localhost:8080/sie/script/extjsptag-form.js" type="text/javascript"></script>
<script src="http://localhost:8080/sie/script/extjsptag-public.js" type="text/javascript"></script>
<script src="http://localhost:8080/sie/script/extjsptag-grid.js" type="text/javascript"></script>
<script src="http://localhost:8080/sie/script/extjsptag-page.js" type="text/javascript"></script>
<base href="/sie/module/yhqxgl/sys_userinfo/">
<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>
<script>
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>