最近一直在考慮將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>