一个对单表的增加、删除、修改、查看页面，直接使用ext开发，需要大量的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>[用户信息]维护页面</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();}
});
}
//列表处理按钮：详细信息
function bt_detail_click(){
detailWindow.show(true);
loadFormData({
url : rootPath+'selectSysUserinfo.do?uuid='+getGridSelectedValue('sysUserinfoList','uuid'),
formName : 'detailForm',
noFun : function(){detailWindow.hide();}
});
}
//详细信息查看窗口：返回
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内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:'[系统]有效标记',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('调用函数[bt_query_click]错误.');}},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('调用函数[bt_reset_click]错误.');}},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('调用函数[bt_add_click]错误.');}},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('调用函数[bt_update_click]错误.');}},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('调用函数[bt_delete_click]错误.');}},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:'详细信息',enablerule:'1',handler:function(){try{bt_detail_click();}catch(e){alert('调用函数[bt_detail_click]错误.');}},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:'创建时间'},
{dataIndex:'createUsername',type:'string',header:'创建人代码'},
{dataIndex:'updateTime',type:'string',header:'修改时间'},
{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: [' 每页显示数', 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对应的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:'查询[用户信息]结果列表',iconCls:'icon-pub1',checkbox:'true',id:'sysUserinfoList'
});
//当tbar不为空的时候输出这些代码，否则不需要这些无用的代码
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:'密码确认', 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('调用函数[bt_i_save_click]错误.');}},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:'关闭返回',enablerule:'0',handler:function(){try{bt_i_goback_click();}catch(e){alert('调用函数[bt_i_goback_click]错误.');}},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对象到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('调用函数[bt_u_save_click]错误.');}},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:'关闭返回',enablerule:'0',handler:function(){try{bt_u_goback_click();}catch(e){alert('调用函数[bt_u_goback_click]错误.');}},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对象到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:'查看[用户信息]详细信息',
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:'创建时间', 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:'创建人代码', 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:'修改时间', 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:'关闭返回',enablerule:'0',handler:function(){try{bt_detail_goback_click();}catch(e){alert('调用函数[bt_detail_goback_click]错误.');}},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对象到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内JavaScript代码输出结束************************/
});
</SCRIPT>
</BODY>
</HTML>
而使用ext标签开发的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="[用户信息]维护页面"/>
</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();}
});
}
//列表处理按钮：详细信息
function bt_detail_click(){
detailWindow.show(true);
loadFormData({
url : rootPath+'selectSysUserinfo.do?uuid='+getGridSelectedValue('sysUserinfoList','uuid'),
formName : 'detailForm',
noFun : function(){detailWindow.hide();}
});
}
//详细信息查看窗口：返回
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="[系统]有效标记"/>
<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="查询[用户信息]结果列表" 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="详细信息" 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="创建时间"/>
<ext:cell dataIndex="createUsername" header="创建人代码"/>
<ext:cell dataIndex="updateTime" header="修改时间"/>
<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="密码确认"/>
<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="关闭返回" 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="关闭返回" 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="查看[用户信息]详细信息" 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="创建时间"/>
<ext:text name="createUsername" fieldLabel="创建人代码"/>
<ext:text name="updateTime" fieldLabel="修改时间"/>
<ext:text name="updateUsername" fieldLabel="修改人代码"/>
<ext:button name="bt_detail_goback" text="关闭返回" handler="bt_detail_goback_click" icon="scripts/button-icon/icon_goback.gif"/>
</ext:form>
</ext:window>
</ext:body>
</ext:html>