一個(gè)對(duì)單表的增加、刪除、修改、查看頁面，直接使用ext開發(fā)，需要大量的js代碼來渲染UI。具體代碼如下：
<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/jeasyweb/scripts/ext-3.0.0/ext-base.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/ext-all.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/ext-all-debug.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/locale/ext-lang-zh_CN.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<SCRIPT SRC="http://localhost:8080/jeasyweb/scripts/common-func.js" TYPE="TEXT/JAVASCRIPT"></SCRIPT>
<LINK HREF="http://localhost:8080/jeasyweb/scripts/ext-3.0.0/resources/css/ext-all.css" TYPE="TEXT/CSS" REL="STYLESHEET">
<LINK HREF="http://localhost:8080/jeasyweb/scripts/button-icon.css" TYPE="TEXT/CSS" REL="STYLESHEET">
<TITLE>[用戶信息]維護(hù)頁面</TITLE>
</HEAD>
<script>
//頁面初始化操作
function doPageInit(){
bt_query_click();
}
//查詢域處理按鈕：查詢
function bt_query_click(){
loadGridData({gridName : 'sysUserinfoList',formName : 'queryForm'});
}
//查詢域處理按鈕：重置
function bt_reset_click(){
queryForm.getForm().reset();
}
//列表處理按鈕：添加
function bt_add_click(){
insertWindow.show(true);
insertForm.getForm().reset();
}
//列表處理按鈕：修改
function bt_update_click(){
updateWindow.show(true);
loadFormData({
url : rootPath+'selectSysUserinfo.do?uuid='+getGridSelectedValue('sysUserinfoList','uuid'),
formName : 'updateForm',
noFun : function(){updateWindow.hide();}
});
}
//列表處理按鈕：刪除
function bt_delete_click(){
deleteRecords({
url : rootPath+'deleteSysUserinfo.do?uuids='+getGridSelectedValue('sysUserinfoList','uuid'),
yesFun : function(){bt_query_click();}
});
}
//列表處理按鈕：詳細(xì)信息
function bt_detail_click(){
detailWindow.show(true);
loadFormData({
url : rootPath+'selectSysUserinfo.do?uuid='+getGridSelectedValue('sysUserinfoList','uuid'),
formName : 'detailForm',
noFun : function(){detailWindow.hide();}
});
}
//詳細(xì)信息查看窗口：返回
function bt_detail_goback_click(){
detailWindow.hide();
}
//新建處理按鈕：保存
function bt_i_save_click(){
saveForm({
formName : 'insertForm',
yesFun : function(form,action){
insertWindow.hide();
bt_query_click();
},
noFun : function(form,action){insertWindow.hide()}
});
}
//新建處理按鈕：返回
function bt_i_goback_click(){
insertWindow.hide();
}
//修改處理按鈕：保存
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function(form,action){
updateWindow.hide();
bt_query_click();
},
noFun : function(form,action){updateWindow.hide()}
});
}
//修改處理按鈕：返回
function bt_u_goback_click(){
updateWindow.hide();
}
</script>
<BODY>
<SCRIPT>
var pWinCmpId = null;
Ext.BLANK_IMAGE_URL = 'http://localhost:8080/jeasyweb/scripts/ext-3.0.0/resources/images/default/s.gif';
var basePath = 'http://localhost:8080/jeasyweb/null';
var rootPath = 'http://localhost:8080/jeasyweb/';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
/******************下面開始BODY內(nèi)JavaScript代碼輸出************************/
var queryForm_columns = 2 * 3;
queryForm = new Ext.form.FormPanel({
region:'north',
frame:true,
title:'查詢[用戶信息]信息',
buttonAlign:'center',frame:true,layout:'table',
name:'queryForm',id:'queryForm',height:120,
layoutConfig: {columns:queryForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
queryForm.add({
name:'queryForm_item_username',id:'queryForm_item_username',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'username',fullname:'queryForm:username',colspan:'1',fieldLabel:'用戶名', id:'queryForm:username'
}
});
queryForm.add({
name:'queryForm_item_email',id:'queryForm_item_email',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'email',fullname:'queryForm:email',colspan:'1',fieldLabel:'電子郵箱', id:'queryForm:email'
}
});
var codedata_isValid=[
['','NULL','NULL'],
['0','有效','0-有效'],
['1','無效','1-無效']
];
queryForm.add({
name:'queryForm_item_isValid',id:'queryForm_item_isValid',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'combo',anchor:'90%',name:'comboBox_isValid',valueset:'[系統(tǒng)]有效標(biāo)記',show:'name',colspan:'1',editable:false,mode:'local',store: new Ext.data.SimpleStore({fields: ['codevalue','codename','codevalue_codename'],data: codedata_isValid}),displayField: 'codename',valueField:'codevalue',emptyText:'請選擇',fieldLabel:'是否有效',hiddenId:'isValid',hiddenName:'isValid',triggerAction: 'all',id:'comboBox_null'
}
});
queryForm.addButton({xtype:'button',name:'bt_query',text:'查詢',enablerule:'0',handler:function(){try{bt_query_click();}catch(e){alert('調(diào)用函數(shù)[bt_query_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_query'});
queryForm.addButton({xtype:'button',name:'bt_reset',text:'重置',enablerule:'0',handler:function(){try{bt_reset_click();}catch(e){alert('調(diào)用函數(shù)[bt_reset_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_redo.gif',type:'button',cls:'x-btn-text-icon',id:'bt_reset'});
queryForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('queryForm').style.width);
var queryForm_columns = 2 * 3;
var _perWidth = _bodyWidth/queryForm_columns;
queryForm.getComponent("queryForm_item_username").setWidth(_perWidth * 2-15);
queryForm.getComponent("queryForm_item_email").setWidth(_perWidth * 2-15);
queryForm.getComponent("queryForm_item_isValid").setWidth(_perWidth * 2-15);
});
//開始輸出grid record
var sysUserinfoList_grid_record = Ext.data.Record.create([
{name:'uuid',type:'string'},
{name:'username',type:'string'},
{name:'password',type:'string'},
{name:'email',type:'string'},
{name:'isValid',type:'string'},
{name:'createTime',type:'string'},
{name:'createUsername',type:'string'},
{name:'updateTime',type:'string'},
{name:'updateUsername',type:'string'}
]);
//輸出grid的store代碼
var sysUserinfoList_grid_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'http://localhost:8080/jeasyweb/querySysUserinfo.do'}),
reader : new Ext.data.JsonReader({root : 'result',totalProperty : 'totalCount',id : 'null'}, sysUserinfoList_grid_record)
});
sysUserinfoList_grid_store.on('load',function(){
sysUserinfoList_grid_bt_setting();
});
//輸出tbar按鈕列表
var sysUserinfoList_grid_tbar = [
{xtype:'button',name:'bt_add',text:'增加',enablerule:'0',handler:function(){try{bt_add_click();}catch(e){alert('調(diào)用函數(shù)[bt_add_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_add.gif',type:'button',cls:'x-btn-text-icon',id:'bt_add'},'-',
{xtype:'button',name:'bt_update',text:'修改',enablerule:'1',handler:function(){try{bt_update_click();}catch(e){alert('調(diào)用函數(shù)[bt_update_click]錯(cuò)誤.');}},disabled:true,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_update.gif',type:'button',cls:'x-btn-text-icon',id:'bt_update'},'-',
{xtype:'button',name:'bt_delete',text:'刪除',enablerule:'2',handler:function(){try{bt_delete_click();}catch(e){alert('調(diào)用函數(shù)[bt_delete_click]錯(cuò)誤.');}},disabled:true,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_delete.gif',type:'button',cls:'x-btn-text-icon',id:'bt_delete'},'-',
{xtype:'button',name:'bt_detail',text:'詳細(xì)信息',enablerule:'1',handler:function(){try{bt_detail_click();}catch(e){alert('調(diào)用函數(shù)[bt_detail_click]錯(cuò)誤.');}},disabled:true,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_view.gif',type:'button',cls:'x-btn-text-icon',id:'bt_detail'}
];
//輸出grid的列模型
var sysUserinfoList_grid_sm = new Ext.grid.CheckboxSelectionModel({dataIndex : 'null'});
var sysUserinfoList_grid_cm = new Ext.grid.ColumnModel([
sysUserinfoList_grid_sm,
{dataIndex:'uuid',type:'string',header:'主鍵UUID'},
{dataIndex:'username',type:'string',header:'用戶名'},
{dataIndex:'password',type:'string',header:'密碼'},
{dataIndex:'email',type:'string',header:'電子郵箱'},
{dataIndex:'isValid',type:'string',header:'是否有效'},
{dataIndex:'createTime',type:'string',header:'創(chuàng)建時(shí)間'},
{dataIndex:'createUsername',type:'string',header:'創(chuàng)建人代碼'},
{dataIndex:'updateTime',type:'string',header:'修改時(shí)間'},
{dataIndex:'updateUsername',type:'string',header:'修改人代碼'}
]);
//輸出grid的分頁條
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: [' 每頁顯示數(shù)', 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']=parseInt(newValue);
sysUserinfoList.store.reload({ params : { start : 0, limit : newValue } });
};
//輸出grid對(duì)應(yīng)的js代碼
sysUserinfoList = new Ext.grid.EditorGridPanel({
viewConfig: { forceFit: true },clicksToEdit:1,
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/jeasyweb/querySysUserinfo.do',
name:'sysUserinfoList',region:'center',url_data:'/querySysUserinfo.do',title:'查詢[用戶信息]結(jié)果列表',iconCls:'icon-pub1',checkbox:'true',id:'sysUserinfoList'
});
//當(dāng)tbar不為空的時(shí)候輸出這些代碼，否則不需要這些無用的代碼
function sysUserinfoList_grid_bt_setting(){
var records = sysUserinfoList.getSelectionModel().getSelections();
if (!records || records.length == 0) {
Ext.getCmp("bt_update").disable();
Ext.getCmp("bt_delete").disable();
Ext.getCmp("bt_detail").disable();
}
if (records.length == 1) {
Ext.getCmp("bt_update").enable();
Ext.getCmp("bt_delete").enable();
Ext.getCmp("bt_detail").enable();
}
if (records.length > 1) {
Ext.getCmp("bt_update").disable();
Ext.getCmp("bt_delete").enable();
Ext.getCmp("bt_detail").disable();
}
}
sysUserinfoList.on("cellclick", function(){
sysUserinfoList_grid_bt_setting();
});
var viewport_3a8d813570d144e29961b792b68eb3ac = new Ext.Viewport({
layout:'border',
items:[queryForm,sysUserinfoList]
});
var insertForm_columns = 2 * 2;
insertForm = new Ext.form.FormPanel({
region:'center',
url:'http://localhost:8080/jeasyweb/insertSysUserinfo.do',
frame:true,
title:'增加[用戶信息]',
buttonAlign:'center',frame:true,layout:'table',
name:'insertForm',id:'insertForm',height:200,
layoutConfig: {columns:insertForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
insertForm.add({
name:'insertForm_item_username',id:'insertForm_item_username',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'username',fullname:'insertForm:username',colspan:'1',fieldLabel:'用戶名', id:'insertForm:username'
}
});
insertForm.add({
name:'insertForm_item_password',id:'insertForm_item_password',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'password',fullname:'insertForm:password',colspan:'1',fieldLabel:'密碼', id:'insertForm:password'
}
});
insertForm.add({
name:'insertForm_item_password2',id:'insertForm_item_password2',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'password2',fullname:'insertForm:password2',colspan:'1',fieldLabel:'密碼確認(rèn)', id:'insertForm:password2'
}
});
insertForm.add({
name:'insertForm_item_email',id:'insertForm_item_email',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'email',fullname:'insertForm:email',colspan:'1',fieldLabel:'電子郵箱', id:'insertForm:email'
}
});
insertForm.addButton({xtype:'button',name:'bt_insert',text:'保存記錄',enablerule:'0',handler:function(){try{bt_i_save_click();}catch(e){alert('調(diào)用函數(shù)[bt_i_save_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_insert'});
insertForm.addButton({xtype:'button',name:'bt_goback',text:'關(guān)閉返回',enablerule:'0',handler:function(){try{bt_i_goback_click();}catch(e){alert('調(diào)用函數(shù)[bt_i_goback_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_goback'});
insertForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('insertForm').style.width);
var insertForm_columns = 2 * 2;
var _perWidth = _bodyWidth/insertForm_columns;
insertForm.getComponent("insertForm_item_username").setWidth(_perWidth * 2-15);
insertForm.getComponent("insertForm_item_password").setWidth(_perWidth * 2-15);
insertForm.getComponent("insertForm_item_password2").setWidth(_perWidth * 2-15);
insertForm.getComponent("insertForm_item_email").setWidth(_perWidth * 2-15);
});
//開始輸出Window對(duì)象到JSP頁面.
insertWindow = new Ext.Window({
name:'insertWindow',closeAction:'hide',width:600,height:300,modal:true,plain:true,layout:'border',id:'insertWindow',
items:[insertForm]
});
var updateForm_columns = 2 * 2;
updateForm = new Ext.form.FormPanel({
region:'center',
url:'http://localhost:8080/jeasyweb/updateSysUserinfo.do',
frame:true,
title:'修改[用戶信息]',
buttonAlign:'center',frame:true,layout:'table',
name:'updateForm',id:'updateForm',height:200,
layoutConfig: {columns:updateForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
updateForm.add({
name:'updateForm_item_uuid',id:'updateForm_item_uuid',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'uuid',fullname:'updateForm:uuid',colspan:'1',fieldLabel:'主鍵UUID', id:'updateForm:uuid'
}
});
updateForm.add({
name:'updateForm_item_username',id:'updateForm_item_username',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'username',fullname:'updateForm:username',colspan:'1',fieldLabel:'用戶名', id:'updateForm:username'
}
});
updateForm.add({
name:'updateForm_item_email',id:'updateForm_item_email',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'email',fullname:'updateForm:email',colspan:'1',fieldLabel:'電子郵箱', id:'updateForm:email'
}
});
updateForm.addButton({xtype:'button',name:'bt_save',text:'保存記錄',enablerule:'0',handler:function(){try{bt_u_save_click();}catch(e){alert('調(diào)用函數(shù)[bt_u_save_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_save'});
updateForm.addButton({xtype:'button',name:'bt_goback',text:'關(guān)閉返回',enablerule:'0',handler:function(){try{bt_u_goback_click();}catch(e){alert('調(diào)用函數(shù)[bt_u_goback_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_goback'});
updateForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('updateForm').style.width);
var updateForm_columns = 2 * 2;
var _perWidth = _bodyWidth/updateForm_columns;
updateForm.getComponent("updateForm_item_uuid").setWidth(_perWidth * 2-15);
updateForm.getComponent("updateForm_item_username").setWidth(_perWidth * 2-15);
updateForm.getComponent("updateForm_item_email").setWidth(_perWidth * 2-15);
});
//開始輸出Window對(duì)象到JSP頁面.
updateWindow = new Ext.Window({
name:'updateWindow',closeAction:'hide',width:600,height:300,modal:true,plain:true,layout:'border',id:'updateWindow',
items:[updateForm]
});
var detailForm_columns = 2 * 2;
detailForm = new Ext.form.FormPanel({
region:'center',
frame:true,
title:'查看[用戶信息]詳細(xì)信息',
buttonAlign:'center',frame:true,layout:'table',
name:'detailForm',id:'detailForm',height:200,
layoutConfig: {columns:detailForm_columns},
defaults:{labelSeparator:'：',border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:100,height:30}
});
detailForm.add({
name:'detailForm_item_uuid',id:'detailForm_item_uuid',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'uuid',fullname:'detailForm:uuid',colspan:'1',fieldLabel:'主鍵UUID', id:'detailForm:uuid'
}
});
detailForm.add({
name:'detailForm_item_username',id:'detailForm_item_username',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'username',fullname:'detailForm:username',colspan:'1',fieldLabel:'用戶名', id:'detailForm:username'
}
});
detailForm.add({
name:'detailForm_item_password',id:'detailForm_item_password',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'password',fullname:'detailForm:password',colspan:'1',fieldLabel:'密碼', id:'detailForm:password'
}
});
detailForm.add({
name:'detailForm_item_email',id:'detailForm_item_email',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'email',fullname:'detailForm:email',colspan:'1',fieldLabel:'電子郵箱', id:'detailForm:email'
}
});
detailForm.add({
name:'detailForm_item_isValid',id:'detailForm_item_isValid',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'isValid',fullname:'detailForm:isValid',colspan:'1',fieldLabel:'是否有效', id:'detailForm:isValid'
}
});
detailForm.add({
name:'detailForm_item_createTime',id:'detailForm_item_createTime',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'createTime',fullname:'detailForm:createTime',colspan:'1',fieldLabel:'創(chuàng)建時(shí)間', id:'detailForm:createTime'
}
});
detailForm.add({
name:'detailForm_item_createUsername',id:'detailForm_item_createUsername',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'createUsername',fullname:'detailForm:createUsername',colspan:'1',fieldLabel:'創(chuàng)建人代碼', id:'detailForm:createUsername'
}
});
detailForm.add({
name:'detailForm_item_updateTime',id:'detailForm_item_updateTime',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'updateTime',fullname:'detailForm:updateTime',colspan:'1',fieldLabel:'修改時(shí)間', id:'detailForm:updateTime'
}
});
detailForm.add({
name:'detailForm_item_updateUsername',id:'detailForm_item_updateUsername',
colspan:2,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:'100%',name:'updateUsername',fullname:'detailForm:updateUsername',colspan:'1',fieldLabel:'修改人代碼', id:'detailForm:updateUsername'
}
});
detailForm.addButton({xtype:'button',name:'bt_detail_goback',text:'關(guān)閉返回',enablerule:'0',handler:function(){try{bt_detail_goback_click();}catch(e){alert('調(diào)用函數(shù)[bt_detail_goback_click]錯(cuò)誤.');}},disabled:false,icon:'http://localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_detail_goback'});
detailForm.on("bodyresize", function(){
var _bodyWidth = parseInt(document.getElementById('detailForm').style.width);
var detailForm_columns = 2 * 2;
var _perWidth = _bodyWidth/detailForm_columns;
detailForm.getComponent("detailForm_item_uuid").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_username").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_password").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_email").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_isValid").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_createTime").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_createUsername").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_updateTime").setWidth(_perWidth * 2-15);
detailForm.getComponent("detailForm_item_updateUsername").setWidth(_perWidth * 2-15);
});
//開始輸出Window對(duì)象到JSP頁面.
detailWindow = new Ext.Window({
name:'detailWindow',closeAction:'hide',width:600,height:300,modal:true,plain:true,layout:'border',id:'detailWindow',
items:[detailForm]
});
try{doPageInit();}catch(e){alert(e)}
/******************BODY內(nèi)JavaScript代碼輸出結(jié)束************************/
});
</SCRIPT>
</BODY>
</HTML>
而使用ext標(biāo)簽開發(fā)的jsp代碼如下：
<?xml version="1.0" encoding="UTF-8"?>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/extjsptags.tld" prefix="ext" %>
<ext:html>
<ext:head>
<ext:title caption="[用戶信息]維護(hù)頁面"/>
</ext:head>
<script>
//頁面初始化操作
function doPageInit(){
bt_query_click();
}
//查詢域處理按鈕：查詢
function bt_query_click(){
loadGridData({gridName : 'sysUserinfoList',formName : 'queryForm'});
}
//查詢域處理按鈕：重置
function bt_reset_click(){
queryForm.getForm().reset();
}
//列表處理按鈕：添加
function bt_add_click(){
insertWindow.show(true);
insertForm.getForm().reset();
}
//列表處理按鈕：修改
function bt_update_click(){
updateWindow.show(true);
loadFormData({
url : rootPath+'selectSysUserinfo.do?uuid='+getGridSelectedValue('sysUserinfoList','uuid'),
formName : 'updateForm',
noFun : function(){updateWindow.hide();}
});
}
//列表處理按鈕：刪除
function bt_delete_click(){
deleteRecords({
url : rootPath+'deleteSysUserinfo.do?uuids='+getGridSelectedValue('sysUserinfoList','uuid'),
yesFun : function(){bt_query_click();}
});
}
//列表處理按鈕：詳細(xì)信息
function bt_detail_click(){
detailWindow.show(true);
loadFormData({
url : rootPath+'selectSysUserinfo.do?uuid='+getGridSelectedValue('sysUserinfoList','uuid'),
formName : 'detailForm',
noFun : function(){detailWindow.hide();}
});
}
//詳細(xì)信息查看窗口：返回
function bt_detail_goback_click(){
detailWindow.hide();
}
//新建處理按鈕：保存
function bt_i_save_click(){
saveForm({
formName : 'insertForm',
yesFun : function(form,action){
insertWindow.hide();
bt_query_click();
},
noFun : function(form,action){insertWindow.hide()}
});
}
//新建處理按鈕：返回
function bt_i_goback_click(){
insertWindow.hide();
}
//修改處理按鈕：保存
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function(form,action){
updateWindow.hide();
bt_query_click();
},
noFun : function(form,action){updateWindow.hide()}
});
}
//修改處理按鈕：返回
function bt_u_goback_click(){
updateWindow.hide();
}
</script>
<ext:body>
<ext:viewport>
<ext:form name="queryForm" title="查詢[用戶信息]信息" region="north" height="120" columns="3">
<ext:text name="username" fieldLabel="用戶名"/>
<ext:text name="email" fieldLabel="電子郵箱"/>
<ext:comboBox name="isValid" fieldLabel="是否有效" valueset="[系統(tǒng)]有效標(biāo)記"/>
<ext:button name="bt_query" text="查詢" handler="bt_query_click" icon="scripts/button-icon/icon-ok.png"/>
<ext:button name="bt_reset" text="重置" handler="bt_reset_click" icon="scripts/button-icon/icon_redo.gif"/>
</ext:form>
<ext:grid name="sysUserinfoList" title="查詢[用戶信息]結(jié)果列表" region="center" checkbox="true" url="/querySysUserinfo.do">
<ext:button name="bt_add" text="增加" enablerule="0" icon="scripts/button-icon/icon_add.gif" handler="bt_add_click"/>
<ext:button name="bt_update" text="修改" enablerule="1" icon="scripts/button-icon/icon_update.gif" handler="bt_update_click"/>
<ext:button name="bt_delete" text="刪除" enablerule="2" icon="scripts/button-icon/icon_delete.gif" handler="bt_delete_click"/>
<ext:button name="bt_detail" text="詳細(xì)信息" enablerule="1" icon="scripts/button-icon/icon_view.gif" handler="bt_detail_click"/>
<ext:cell dataIndex="uuid" header="主鍵UUID"/>
<ext:cell dataIndex="username" header="用戶名"/>
<ext:cell dataIndex="password" header="密碼"/>
<ext:cell dataIndex="email" header="電子郵箱"/>
<ext:cell dataIndex="isValid" header="是否有效"/>
<ext:cell dataIndex="createTime" header="創(chuàng)建時(shí)間"/>
<ext:cell dataIndex="createUsername" header="創(chuàng)建人代碼"/>
<ext:cell dataIndex="updateTime" header="修改時(shí)間"/>
<ext:cell dataIndex="updateUsername" header="修改人代碼"/>
</ext:grid>
</ext:viewport>
<ext:window name="insertWindow" modal="true" width="600" height="300">
<ext:form name="insertForm" title="增加[用戶信息]" region="center" url="/insertSysUserinfo.do">
<ext:text name="username" fieldLabel="用戶名"/>
<ext:text name="password" fieldLabel="密碼"/>
<ext:text name="password2" fieldLabel="密碼確認(rèn)"/>
<ext:text name="email" fieldLabel="電子郵箱"/>
<ext:button name="bt_insert" text="保存記錄" handler="bt_i_save_click" icon="scripts/button-icon/icon-ok.png"/>
<ext:button name="bt_goback" text="關(guān)閉返回" handler="bt_i_goback_click" icon="scripts/button-icon/icon_goback.gif"/>
</ext:form>
</ext:window>
<ext:window name="updateWindow" modal="true" width="600" height="300">
<ext:form name="updateForm" title="修改[用戶信息]" region="center" url="/updateSysUserinfo.do">
<ext:text name="uuid" fieldLabel="主鍵UUID"/>
<ext:text name="username" fieldLabel="用戶名"/>
<ext:text name="email" fieldLabel="電子郵箱"/>
<ext:button name="bt_save" text="保存記錄" handler="bt_u_save_click" icon="scripts/button-icon/icon-ok.png"/>
<ext:button name="bt_goback" text="關(guān)閉返回" handler="bt_u_goback_click" icon="scripts/button-icon/icon_goback.gif"/>
</ext:form>
</ext:window>
<ext:window name="detailWindow" modal="true" width="600" height="300">
<ext:form name="detailForm" title="查看[用戶信息]詳細(xì)信息" region="center" >
<ext:text name="uuid" fieldLabel="主鍵UUID"/>
<ext:text name="username" fieldLabel="用戶名"/>
<ext:text name="password" fieldLabel="密碼"/>
<ext:text name="email" fieldLabel="電子郵箱"/>
<ext:text name="isValid" fieldLabel="是否有效"/>
<ext:text name="createTime" fieldLabel="創(chuàng)建時(shí)間"/>
<ext:text name="createUsername" fieldLabel="創(chuàng)建人代碼"/>
<ext:text name="updateTime" fieldLabel="修改時(shí)間"/>
<ext:text name="updateUsername" fieldLabel="修改人代碼"/>
<ext:button name="bt_detail_goback" text="關(guān)閉返回" handler="bt_detail_goback_click" icon="scripts/button-icon/icon_goback.gif"/>
</ext:form>
</ext:window>
</ext:body>
</ext:html>