标签开发ext树的完整例子
具体的JSP代码如下：
最终解析后的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/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?ver=20100103111808" 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 treeClick(node,e){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':node.id}});
}
var treeMenu = null ;
// 创建右键菜单
function treeContextMenu(node, e) {
if (treeMenu != null ){
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
return ;
}
treeMenu = new Ext.menu.Menu( {
id : 'treeMenu',
items : [
new Ext.menu.Item({
text : '增加节点', iconCls : 'icon_add',
handler: function (){
treeAdd(node);
}
}),
new Ext.menu.Item({
text : '修改节点', iconCls : 'icon_update',
handler: function (){
treeUpdate(node);
}
}),
new Ext.menu.Item({
text : '删除节点', iconCls : 'icon_delete',
handler: function (){
treeDelete(node);
}
})
]
});
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
}
// 增加节点打开页面
function treeAdd(node){
insertWindow_sysFunClass.show( true );
insertForm_sysFunClass.getForm().reset();
Ext.getCmp('insertForm_sysFunClass:parentClassIdFk').setValue(node.id);
}
// 增加节点保存操作
function bt_i_class_save_click(){
saveForm({
formName : 'insertForm_sysFunClass',
yesFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 增加节点返回操作
function bt_i_class_goback_click(){
insertWindow_sysFunClass.hide();
}
// 修改节点打开页面
function treeUpdate(node){
updateWindow_sysFunClass.show( true );
updateForm_sysFunClass.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunClass. do ? uuid = ' + node.id,
formName : 'updateForm_sysFunClass',
noFun : function (){
updateWindow_sysFunClass.hide();
}
});
}
// 修改节点保存操作
function bt_u_class_save_click(){
saveForm({
formName : 'updateForm_sysFunClass',
yesFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 修改节点返回操作
function bt_u_class_goback_click(){
updateWindow_sysFunClass.hide();
}
// 删除节点操作
function treeDelete(node){
if (node.childNodes != null && node.childNodes.length > 0 ){
Ext.MessageBox.show({title:'删除失败', msg:'树节点下有子节点,请先删除子节点后继续操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
deleteRecords({
url : rootPath + 'deleteSysFunClass. do ? uuids = ' + node.id,
yesFun : function (){
sysFunClassTree.getLoader().load();
},
noFun: function (){
sysFunClassTree.getLoader().load();
}
});
}
// /////////////////////////////////////////////////////////////////////////////////////
// ////下面是对功能的操作，上面是对功能分类树菜单的操作/////////////////
// /////////////////////////////////////////////////////////////////////////////////////
function reloadGrid(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode != null ){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':selectedNode.id}});
}
}
// 列表处理按钮：添加
function bt_add_click(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode == null || selectedNode == ''){
Ext.MessageBox.show({title:'增加失败', msg:'请选择左边的功能分类后继续点击添加操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
insertWindow.show( true );
insertForm.getForm().reset();
Ext.getCmp('insertForm:funClassIdFk').setValue(selectedNode.id);
}
// 列表处理按钮：修改
function bt_update_click(){
updateWindow.show( true );
updateForm.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','uuid'),
formName : 'updateForm',
noFun : function (){updateWindow.hide();}
});
}
// 列表处理按钮：删除
function bt_delete_click(){
deleteRecords({
url : rootPath + 'deleteSysFunction. do ? uuids = ' + getGridSelectedValue('sysFunctionList','uuid'),
yesFun : function (){
reloadGrid();
},
noFun: function (){
reloadGrid();
}
});
}
// 列表处理按钮：详细信息
function bt_detail_click(){
detailWindow.show( true );
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','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();
reloadGrid();
},
noFun : function (form,action){
insertWindow.hide();
reloadGrid();
}
});
}
// 新建处理按钮：返回
function bt_i_goback_click(){
insertWindow.hide();
}
// 修改处理按钮：保存
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function (form,action){
updateWindow.hide();
reloadGrid();
},
noFun : function (form,action){
updateWindow.hide();
reloadGrid();
}
});
}
// 修改处理按钮：返回
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代码输出*********************** */
sysFunClassTree = new Ext.tree.TreePanel({
id:'sysFunClassTree',split: true ,collapsible: true ,rootVisible : false ,name:'sysFunClassTree',autoScroll: true ,border: true ,
region:'west',title:'功能分类树',width: 200 ,
loader: new Ext.tree.TreeLoader({dataUrl:'http: // localhost:8080/jeasyweb/treeSysFunClass.do'})
});
sysFunClassTree_root = new Ext.tree.AsyncTreeNode({
text:'Ext TreeRoot',id:'src_root'
});
sysFunClassTree.setRootNode(sysFunClassTree_root);
sysFunClassTree.on('contextmenu', function (node, e){treeContextMenu(node, e);}, sysFunClassTree);
sysFunClassTree.on('click', function (node, e){treeClick(node, e);});
// 开始输出grid record
var sysFunctionList_grid_record = Ext.data.Record.create([
{name:'uuid',type:'string'},
{name:'funClassIdFk',type:'string'},
{name:'txnCode',type:'string'},
{name:'codeName',type:'string'},
{name:'codeDesc',type:'string'}
]);
// 输出grid的store代码
var sysFunctionList_grid_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'http: // localhost:8080/jeasyweb/querySysFunction.do'}),
reader : new Ext.data.JsonReader({root : 'result',totalProperty : 'totalCount',id : ' null '}, sysFunctionList_grid_record)
});
sysFunctionList_grid_store.on('load', function (){
sysFunctionList_grid_bt_setting();
});
// 输出tbar按钮列表
var sysFunctionList_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 sysFunctionList_grid_sm = new Ext.grid.CheckboxSelectionModel({dataIndex : ' null '});
var sysFunctionList_grid_cm = new Ext.grid.ColumnModel([
sysFunctionList_grid_sm,
{dataIndex:'uuid',hidden: true ,type:'string',header:'主键UUID'},
{dataIndex:'funClassIdFk',type:'string',header:'功能点类别ID_FK'},
{dataIndex:'txnCode',type:'string',header:'交易码'},
{dataIndex:'codeName',type:'string',header:'交易码名称'},
{dataIndex:'codeDesc',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 sysFunctionList_grid_bbar = new Ext.PagingToolbar({
store: sysFunctionList_grid_store,
displayMsg: displayMsg,
emptyMsg: '没有信息',
pageSize: 10 ,
displayInfo: true ,
items: [' & nbsp; & nbsp; & nbsp; & nbsp;每页显示数', 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){
sysFunctionList_grid_bbar_change_PageSize(newValue);
}
},
select: {
fn: function (combo, value){
// sysFunctionList_grid_bbar_change_PageSize(combo.getValue());
}
}
}
})]
});
function sysFunctionList_grid_bbar_change_PageSize(newValue){
sysFunctionList_grid_bbar['pageSize'] = parseInt(newValue);
sysFunctionList.store.reload({ params : { start : 0 , limit : newValue } });
};
// 输出grid对应的js代码
sysFunctionList = new Ext.grid.EditorGridPanel({
viewConfig: { forceFit: true },clicksToEdit: 1 ,
ds : sysFunctionList_grid_store,
cm : sysFunctionList_grid_cm,
selModel : new Ext.grid.RowSelectionModel(),loadMask : true ,
tbar:sysFunctionList_grid_tbar,
bbar : sysFunctionList_grid_bbar,
bodyStyle:'width: 100 % ',
url:'http: // localhost:8080/jeasyweb/querySysFunction.do',
name:'sysFunctionList',region:'center',url_data:' / querySysFunction. do ',title:'查询[功能点配置]结果列表',iconCls:'icon - pub1',checkbox:' true ',id:'sysFunctionList'
});
// 当tbar不为空的时候输出这些代码，否则不需要这些无用的代码
function sysFunctionList_grid_bt_setting(){
var records = sysFunctionList.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();
}
}
sysFunctionList.on( " cellclick " , function (){
sysFunctionList_grid_bt_setting();
});
var viewport_b56258fbe105462cbd786894aab4b4ec = new Ext.Viewport({
layout:'border',
items:[sysFunClassTree,sysFunctionList]
});
var insertForm_sysFunClass_columns = 2 * 1 ;
insertForm_sysFunClass = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/insertSysFunClass.do',
frame: true ,
title:'增加[功能点分类信息]',
buttonAlign:'center',frame: true ,layout:'table',
name:'insertForm_sysFunClass',id:'insertForm_sysFunClass',height: 200 ,
layoutConfig: {columns:insertForm_sysFunClass_columns},
defaults:{labelSeparator:'：',border: false ,layout:'form',frame: false ,labelAlign:'right',labelWidth: 100 ,height: 30 }
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_parentClassIdFk',id:'insertForm_sysFunClass_item_parentClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'parentClassIdFk',fullname:'insertForm_sysFunClass:parentClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'上级分类ID_FK', id:'insertForm_sysFunClass:parentClassIdFk'
}
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_classCode',id:'insertForm_sysFunClass_item_classCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'classCode',fullname:'insertForm_sysFunClass:classCode',colspan:' 1 ',fieldLabel:'分类代码', id:'insertForm_sysFunClass:classCode'
}
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_className',id:'insertForm_sysFunClass_item_className',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'className',fullname:'insertForm_sysFunClass:className',colspan:' 1 ',fieldLabel:'分类名称', id:'insertForm_sysFunClass:className'
}
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_classDesc',id:'insertForm_sysFunClass_item_classDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'classDesc',colspan:' 1 ',fieldLabel:'分类描述',id:'insertForm_sysFunClass:classDesc'
}
});
insertForm_sysFunClass.addButton({xtype:'button',name:'bt_s_insert',text:'保存记录',enablerule:' 0 ',handler: function (){ try {bt_i_class_save_click();} catch (e){alert('调用函数[bt_i_class_save_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_s_insert'});
insertForm_sysFunClass.addButton({xtype:'button',name:'bt_s_goback',text:'关闭返回',enablerule:' 0 ',handler: function (){ try {bt_i_class_goback_click();} catch (e){alert('调用函数[bt_i_class_goback_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_s_goback'});
insertForm_sysFunClass.on( " bodyresize " , function (){
var _bodyWidth = parseInt(document.getElementById('insertForm_sysFunClass').style.width);
var insertForm_sysFunClass_columns = 2 * 1 ;
var _perWidth = _bodyWidth / insertForm_sysFunClass_columns;
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_parentClassIdFk " ).setWidth(_perWidth * 2 - 15 );
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_classCode " ).setWidth(_perWidth * 2 - 15 );
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_className " ).setWidth(_perWidth * 2 - 15 );
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_classDesc " ).setWidth(_perWidth * 2 - 15 );
});
// 开始输出Window对象到JSP页面.
insertWindow_sysFunClass = new Ext.Window({
name:'insertWindow_sysFunClass',closeAction:'hide',width: 600 ,height: 300 ,modal: true ,plain: true ,layout:'border',id:'insertWindow_sysFunClass',
items:[insertForm_sysFunClass]
});
var updateForm_sysFunClass_columns = 2 * 1 ;
updateForm_sysFunClass = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/updateSysFunClass.do',
frame: true ,
title:'修改[功能点分类信息]',
buttonAlign:'center',frame: true ,layout:'table',
name:'updateForm_sysFunClass',id:'updateForm_sysFunClass',height: 200 ,
layoutConfig: {columns:updateForm_sysFunClass_columns},
defaults:{labelSeparator:'：',border: false ,layout:'form',frame: false ,labelAlign:'right',labelWidth: 100 ,height: 30 }
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_uuid',id:'updateForm_sysFunClass_item_uuid',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'uuid',fullname:'updateForm_sysFunClass:uuid',colspan:' 1 ',readOnly: true ,fieldLabel:'主键UUID', id:'updateForm_sysFunClass:uuid'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_parentClassIdFk',id:'updateForm_sysFunClass_item_parentClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'parentClassIdFk',fullname:'updateForm_sysFunClass:parentClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'上级分类ID_FK', id:'updateForm_sysFunClass:parentClassIdFk'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_classCode',id:'updateForm_sysFunClass_item_classCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'classCode',fullname:'updateForm_sysFunClass:classCode',colspan:' 1 ',readOnly: true ,fieldLabel:'分类代码', id:'updateForm_sysFunClass:classCode'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_className',id:'updateForm_sysFunClass_item_className',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'className',fullname:'updateForm_sysFunClass:className',colspan:' 1 ',fieldLabel:'分类名称', id:'updateForm_sysFunClass:className'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_classDesc',id:'updateForm_sysFunClass_item_classDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'classDesc',colspan:' 1 ',fieldLabel:'分类描述',id:'updateForm_sysFunClass:classDesc'
}
});
updateForm_sysFunClass.addButton({xtype:'button',name:'bt_s_save',text:'保存记录',enablerule:' 0 ',handler: function (){ try {bt_u_class_save_click();} catch (e){alert('调用函数[bt_u_class_save_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_s_save'});
updateForm_sysFunClass.addButton({xtype:'button',name:'bt_s_goback',text:'关闭返回',enablerule:' 0 ',handler: function (){ try {bt_u_class_goback_click();} catch (e){alert('调用函数[bt_u_class_goback_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_s_goback'});
updateForm_sysFunClass.on( " bodyresize " , function (){
var _bodyWidth = parseInt(document.getElementById('updateForm_sysFunClass').style.width);
var updateForm_sysFunClass_columns = 2 * 1 ;
var _perWidth = _bodyWidth / updateForm_sysFunClass_columns;
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_uuid " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_parentClassIdFk " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_classCode " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_className " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_classDesc " ).setWidth(_perWidth * 2 - 15 );
});
// 开始输出Window对象到JSP页面.
updateWindow_sysFunClass = new Ext.Window({
name:'updateWindow_sysFunClass',closeAction:'hide',width: 600 ,height: 320 ,modal: true ,plain: true ,layout:'border',id:'updateWindow_sysFunClass',
items:[updateForm_sysFunClass]
});
var insertForm_columns = 2 * 1 ;
insertForm = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/insertSysFunction.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_funClassIdFk',id:'insertForm_item_funClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'funClassIdFk',fullname:'insertForm:funClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'功能点类别ID_FK', id:'insertForm:funClassIdFk'
}
});
insertForm.add({
name:'insertForm_item_txnCode',id:'insertForm_item_txnCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'txnCode',fullname:'insertForm:txnCode',colspan:' 1 ',allowBlank: true ,fieldLabel:'交易码', id:'insertForm:txnCode'
}
});
insertForm.add({
name:'insertForm_item_codeName',id:'insertForm_item_codeName',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'codeName',fullname:'insertForm:codeName',colspan:' 1 ',allowBlank: true ,fieldLabel:'交易码名称', id:'insertForm:codeName'
}
});
insertForm.add({
name:'insertForm_item_codeDesc',id:'insertForm_item_codeDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'codeDesc',colspan:' 1 ',fieldLabel:'交易码描述',id:'insertForm:codeDesc'
}
});
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 * 1 ;
var _perWidth = _bodyWidth / insertForm_columns;
insertForm.getComponent( " insertForm_item_funClassIdFk " ).setWidth(_perWidth * 2 - 15 );
insertForm.getComponent( " insertForm_item_txnCode " ).setWidth(_perWidth * 2 - 15 );
insertForm.getComponent( " insertForm_item_codeName " ).setWidth(_perWidth * 2 - 15 );
insertForm.getComponent( " insertForm_item_codeDesc " ).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 * 1 ;
updateForm = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/updateSysFunction.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 ',readOnly: true ,fieldLabel:'主键UUID', id:'updateForm:uuid'
}
});
updateForm.add({
name:'updateForm_item_funClassIdFk',id:'updateForm_item_funClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'funClassIdFk',fullname:'updateForm:funClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'功能点类别ID_FK', id:'updateForm:funClassIdFk'
}
});
updateForm.add({
name:'updateForm_item_txnCode',id:'updateForm_item_txnCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'txnCode',fullname:'updateForm:txnCode',colspan:' 1 ',readOnly: true ,fieldLabel:'交易码', id:'updateForm:txnCode'
}
});
updateForm.add({
name:'updateForm_item_codeName',id:'updateForm_item_codeName',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'codeName',fullname:'updateForm:codeName',colspan:' 1 ',allowBlank: true ,fieldLabel:'交易码名称', id:'updateForm:codeName'
}
});
updateForm.add({
name:'updateForm_item_codeDesc',id:'updateForm_item_codeDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'codeDesc',colspan:' 1 ',fieldLabel:'交易码描述',id:'updateForm:codeDesc'
}
});
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 * 1 ;
var _perWidth = _bodyWidth / updateForm_columns;
updateForm.getComponent( " updateForm_item_uuid " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_funClassIdFk " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_txnCode " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_codeName " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_codeDesc " ).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 * 1 ;
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_funClassIdFk',id:'detailForm_item_funClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'funClassIdFk',fullname:'detailForm:funClassIdFk',colspan:' 1 ',fieldLabel:'功能点类别ID_FK', id:'detailForm:funClassIdFk'
}
});
detailForm.add({
name:'detailForm_item_txnCode',id:'detailForm_item_txnCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'txnCode',fullname:'detailForm:txnCode',colspan:' 1 ',fieldLabel:'交易码', id:'detailForm:txnCode'
}
});
detailForm.add({
name:'detailForm_item_codeName',id:'detailForm_item_codeName',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'codeName',fullname:'detailForm:codeName',colspan:' 1 ',fieldLabel:'交易码名称', id:'detailForm:codeName'
}
});
detailForm.add({
name:'detailForm_item_codeDesc',id:'detailForm_item_codeDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'codeDesc',colspan:' 1 ',fieldLabel:'交易码描述',id:'detailForm:codeDesc'
}
});
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 * 1 ;
var _perWidth = _bodyWidth / detailForm_columns;
detailForm.getComponent( " detailForm_item_uuid " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_funClassIdFk " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_txnCode " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_codeName " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_codeDesc " ).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 >
界面效果如下：
![]()
<?
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 treeClick(node,e){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':node.id}});
}
var treeMenu = null ;
// 创建右键菜单
function treeContextMenu(node, e) {
if (treeMenu != null ){
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
return ;
}
treeMenu = new Ext.menu.Menu( {
id : 'treeMenu',
items : [
new Ext.menu.Item({
text : '增加节点', iconCls : 'icon_add',
handler: function (){
treeAdd(node);
}
}),
new Ext.menu.Item({
text : '修改节点', iconCls : 'icon_update',
handler: function (){
treeUpdate(node);
}
}),
new Ext.menu.Item({
text : '删除节点', iconCls : 'icon_delete',
handler: function (){
treeDelete(node);
}
})
]
});
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
}
// 增加节点打开页面
function treeAdd(node){
insertWindow_sysFunClass.show( true );
insertForm_sysFunClass.getForm().reset();
Ext.getCmp('insertForm_sysFunClass:parentClassIdFk').setValue(node.id);
}
// 增加节点保存操作
function bt_i_class_save_click(){
saveForm({
formName : 'insertForm_sysFunClass',
yesFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 增加节点返回操作
function bt_i_class_goback_click(){
insertWindow_sysFunClass.hide();
}
// 修改节点打开页面
function treeUpdate(node){
updateWindow_sysFunClass.show( true );
updateForm_sysFunClass.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunClass. do ? uuid = ' + node.id,
formName : 'updateForm_sysFunClass',
noFun : function (){
updateWindow_sysFunClass.hide();
}
});
}
// 修改节点保存操作
function bt_u_class_save_click(){
saveForm({
formName : 'updateForm_sysFunClass',
yesFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 修改节点返回操作
function bt_u_class_goback_click(){
updateWindow_sysFunClass.hide();
}
// 删除节点操作
function treeDelete(node){
if (node.childNodes != null && node.childNodes.length > 0 ){
Ext.MessageBox.show({title:'删除失败', msg:'树节点下有子节点,请先删除子节点后继续操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
deleteRecords({
url : rootPath + 'deleteSysFunClass. do ? uuids = ' + node.id,
yesFun : function (){
sysFunClassTree.getLoader().load();
},
noFun: function (){
sysFunClassTree.getLoader().load();
}
});
}
// /////////////////////////////////////////////////////////////////////////////////////
// ////下面是对功能的操作，上面是对功能分类树菜单的操作/////////////////
// /////////////////////////////////////////////////////////////////////////////////////
function reloadGrid(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode != null ){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':selectedNode.id}});
}
}
// 列表处理按钮：添加
function bt_add_click(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode == null || selectedNode == ''){
Ext.MessageBox.show({title:'增加失败', msg:'请选择左边的功能分类后继续点击添加操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
insertWindow.show( true );
insertForm.getForm().reset();
Ext.getCmp('insertForm:funClassIdFk').setValue(selectedNode.id);
}
// 列表处理按钮：修改
function bt_update_click(){
updateWindow.show( true );
updateForm.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','uuid'),
formName : 'updateForm',
noFun : function (){updateWindow.hide();}
});
}
// 列表处理按钮：删除
function bt_delete_click(){
deleteRecords({
url : rootPath + 'deleteSysFunction. do ? uuids = ' + getGridSelectedValue('sysFunctionList','uuid'),
yesFun : function (){
reloadGrid();
},
noFun: function (){
reloadGrid();
}
});
}
// 列表处理按钮：详细信息
function bt_detail_click(){
detailWindow.show( true );
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','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();
reloadGrid();
},
noFun : function (form,action){
insertWindow.hide();
reloadGrid();
}
});
}
// 新建处理按钮：返回
function bt_i_goback_click(){
insertWindow.hide();
}
// 修改处理按钮：保存
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function (form,action){
updateWindow.hide();
reloadGrid();
},
noFun : function (form,action){
updateWindow.hide();
reloadGrid();
}
});
}
// 修改处理按钮：返回
function bt_u_goback_click(){
updateWindow.hide();
}
</ script >
< ext:body >
< ext:viewport >
< ext:tree name ="sysFunClassTree" width ="200" region ="west" title ="功能分类树"
contextmenu ="treeContextMenu" click ="treeClick"
dataUrl ="/treeSysFunClass.do" />
< ext:grid name ="sysFunctionList" title ="查询[功能点配置]结果列表" region ="center" checkbox ="true" url ="/querySysFunction.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" hidden ="true" />
< ext:cell dataIndex ="funClassIdFk" header ="功能点类别ID_FK" />
< ext:cell dataIndex ="txnCode" header ="交易码" />
< ext:cell dataIndex ="codeName" header ="交易码名称" />
< ext:cell dataIndex ="codeDesc" header ="交易码描述" />
</ ext:grid >
</ ext:viewport >
< ext:window name ="insertWindow_sysFunClass" modal ="true" width ="600" height ="300" >
< ext:form name ="insertForm_sysFunClass" title ="增加[功能点分类信息]" region ="center" url ="/insertSysFunClass.do" columns ="1" >
< ext:text name ="parentClassIdFk" fieldLabel ="上级分类ID_FK" readOnly ="true" />
< ext:text name ="classCode" fieldLabel ="分类代码" />
< ext:text name ="className" fieldLabel ="分类名称" />
< ext:textarea name ="classDesc" fieldLabel ="分类描述" height ="100" />
< ext:button name ="bt_s_insert" text ="保存记录" handler ="bt_i_class_save_click" icon ="scripts/button-icon/icon-ok.png" />
< ext:button name ="bt_s_goback" text ="关闭返回" handler ="bt_i_class_goback_click" icon ="scripts/button-icon/icon_goback.gif" />
</ ext:form >
</ ext:window >
< ext:window name ="updateWindow_sysFunClass" modal ="true" width ="600" height ="320" >
< ext:form name ="updateForm_sysFunClass" title ="修改[功能点分类信息]" region ="center" url ="/updateSysFunClass.do" columns ="1" >
< ext:text name ="uuid" fieldLabel ="主键UUID" readOnly ="true" />
< ext:text name ="parentClassIdFk" fieldLabel ="上级分类ID_FK" readOnly ="true" />
< ext:text name ="classCode" fieldLabel ="分类代码" readOnly ="true" />
< ext:text name ="className" fieldLabel ="分类名称" />
< ext:textarea name ="classDesc" fieldLabel ="分类描述" height ="100" />
< ext:button name ="bt_s_save" text ="保存记录" handler ="bt_u_class_save_click" icon ="scripts/button-icon/icon-ok.png" />
< ext:button name ="bt_s_goback" text ="关闭返回" handler ="bt_u_class_goback_click" icon ="scripts/button-icon/icon_goback.gif" />
</ ext:form >
</ ext:window >
< ext:window name ="insertWindow" modal ="true" width ="600" height ="300" >
< ext:form name ="insertForm" title ="增加[功能点配置]" region ="center" url ="/insertSysFunction.do" columns ="1" >
< ext:text name ="funClassIdFk" fieldLabel ="功能点类别ID_FK" readOnly ="true" />
< ext:text name ="txnCode" fieldLabel ="交易码" allowBlank ="true" />
< ext:text name ="codeName" fieldLabel ="交易码名称" allowBlank ="true" />
< ext:textarea name ="codeDesc" fieldLabel ="交易码描述" height ="100" />
< 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 ="/updateSysFunction.do" columns ="1" >
< ext:text name ="uuid" fieldLabel ="主键UUID" readOnly ="true" />
< ext:text name ="funClassIdFk" fieldLabel ="功能点类别ID_FK" readOnly ="true" />
< ext:text name ="txnCode" fieldLabel ="交易码" readOnly ="true" />
< ext:text name ="codeName" fieldLabel ="交易码名称" allowBlank ="true" />
< ext:textarea name ="codeDesc" fieldLabel ="交易码描述" height ="100" />
< 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" columns ="1" >
< ext:text name ="uuid" fieldLabel ="主键UUID" />
< ext:text name ="funClassIdFk" fieldLabel ="功能点类别ID_FK" />
< ext:text name ="txnCode" fieldLabel ="交易码" />
< ext:text name ="codeName" fieldLabel ="交易码名称" />
< ext:textarea name ="codeDesc" fieldLabel ="交易码描述" height ="100" />
< 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 >
<% @ 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 treeClick(node,e){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':node.id}});
}
var treeMenu = null ;
// 创建右键菜单
function treeContextMenu(node, e) {
if (treeMenu != null ){
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
return ;
}
treeMenu = new Ext.menu.Menu( {
id : 'treeMenu',
items : [
new Ext.menu.Item({
text : '增加节点', iconCls : 'icon_add',
handler: function (){
treeAdd(node);
}
}),
new Ext.menu.Item({
text : '修改节点', iconCls : 'icon_update',
handler: function (){
treeUpdate(node);
}
}),
new Ext.menu.Item({
text : '删除节点', iconCls : 'icon_delete',
handler: function (){
treeDelete(node);
}
})
]
});
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
}
// 增加节点打开页面
function treeAdd(node){
insertWindow_sysFunClass.show( true );
insertForm_sysFunClass.getForm().reset();
Ext.getCmp('insertForm_sysFunClass:parentClassIdFk').setValue(node.id);
}
// 增加节点保存操作
function bt_i_class_save_click(){
saveForm({
formName : 'insertForm_sysFunClass',
yesFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 增加节点返回操作
function bt_i_class_goback_click(){
insertWindow_sysFunClass.hide();
}
// 修改节点打开页面
function treeUpdate(node){
updateWindow_sysFunClass.show( true );
updateForm_sysFunClass.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunClass. do ? uuid = ' + node.id,
formName : 'updateForm_sysFunClass',
noFun : function (){
updateWindow_sysFunClass.hide();
}
});
}
// 修改节点保存操作
function bt_u_class_save_click(){
saveForm({
formName : 'updateForm_sysFunClass',
yesFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 修改节点返回操作
function bt_u_class_goback_click(){
updateWindow_sysFunClass.hide();
}
// 删除节点操作
function treeDelete(node){
if (node.childNodes != null && node.childNodes.length > 0 ){
Ext.MessageBox.show({title:'删除失败', msg:'树节点下有子节点,请先删除子节点后继续操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
deleteRecords({
url : rootPath + 'deleteSysFunClass. do ? uuids = ' + node.id,
yesFun : function (){
sysFunClassTree.getLoader().load();
},
noFun: function (){
sysFunClassTree.getLoader().load();
}
});
}
// /////////////////////////////////////////////////////////////////////////////////////
// ////下面是对功能的操作，上面是对功能分类树菜单的操作/////////////////
// /////////////////////////////////////////////////////////////////////////////////////
function reloadGrid(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode != null ){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':selectedNode.id}});
}
}
// 列表处理按钮：添加
function bt_add_click(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode == null || selectedNode == ''){
Ext.MessageBox.show({title:'增加失败', msg:'请选择左边的功能分类后继续点击添加操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
insertWindow.show( true );
insertForm.getForm().reset();
Ext.getCmp('insertForm:funClassIdFk').setValue(selectedNode.id);
}
// 列表处理按钮：修改
function bt_update_click(){
updateWindow.show( true );
updateForm.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','uuid'),
formName : 'updateForm',
noFun : function (){updateWindow.hide();}
});
}
// 列表处理按钮：删除
function bt_delete_click(){
deleteRecords({
url : rootPath + 'deleteSysFunction. do ? uuids = ' + getGridSelectedValue('sysFunctionList','uuid'),
yesFun : function (){
reloadGrid();
},
noFun: function (){
reloadGrid();
}
});
}
// 列表处理按钮：详细信息
function bt_detail_click(){
detailWindow.show( true );
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','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();
reloadGrid();
},
noFun : function (form,action){
insertWindow.hide();
reloadGrid();
}
});
}
// 新建处理按钮：返回
function bt_i_goback_click(){
insertWindow.hide();
}
// 修改处理按钮：保存
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function (form,action){
updateWindow.hide();
reloadGrid();
},
noFun : function (form,action){
updateWindow.hide();
reloadGrid();
}
});
}
// 修改处理按钮：返回
function bt_u_goback_click(){
updateWindow.hide();
}
</ script >
< ext:body >
< ext:viewport >
< ext:tree name ="sysFunClassTree" width ="200" region ="west" title ="功能分类树"
contextmenu ="treeContextMenu" click ="treeClick"
dataUrl ="/treeSysFunClass.do" />
< ext:grid name ="sysFunctionList" title ="查询[功能点配置]结果列表" region ="center" checkbox ="true" url ="/querySysFunction.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" hidden ="true" />
< ext:cell dataIndex ="funClassIdFk" header ="功能点类别ID_FK" />
< ext:cell dataIndex ="txnCode" header ="交易码" />
< ext:cell dataIndex ="codeName" header ="交易码名称" />
< ext:cell dataIndex ="codeDesc" header ="交易码描述" />
</ ext:grid >
</ ext:viewport >
< ext:window name ="insertWindow_sysFunClass" modal ="true" width ="600" height ="300" >
< ext:form name ="insertForm_sysFunClass" title ="增加[功能点分类信息]" region ="center" url ="/insertSysFunClass.do" columns ="1" >
< ext:text name ="parentClassIdFk" fieldLabel ="上级分类ID_FK" readOnly ="true" />
< ext:text name ="classCode" fieldLabel ="分类代码" />
< ext:text name ="className" fieldLabel ="分类名称" />
< ext:textarea name ="classDesc" fieldLabel ="分类描述" height ="100" />
< ext:button name ="bt_s_insert" text ="保存记录" handler ="bt_i_class_save_click" icon ="scripts/button-icon/icon-ok.png" />
< ext:button name ="bt_s_goback" text ="关闭返回" handler ="bt_i_class_goback_click" icon ="scripts/button-icon/icon_goback.gif" />
</ ext:form >
</ ext:window >
< ext:window name ="updateWindow_sysFunClass" modal ="true" width ="600" height ="320" >
< ext:form name ="updateForm_sysFunClass" title ="修改[功能点分类信息]" region ="center" url ="/updateSysFunClass.do" columns ="1" >
< ext:text name ="uuid" fieldLabel ="主键UUID" readOnly ="true" />
< ext:text name ="parentClassIdFk" fieldLabel ="上级分类ID_FK" readOnly ="true" />
< ext:text name ="classCode" fieldLabel ="分类代码" readOnly ="true" />
< ext:text name ="className" fieldLabel ="分类名称" />
< ext:textarea name ="classDesc" fieldLabel ="分类描述" height ="100" />
< ext:button name ="bt_s_save" text ="保存记录" handler ="bt_u_class_save_click" icon ="scripts/button-icon/icon-ok.png" />
< ext:button name ="bt_s_goback" text ="关闭返回" handler ="bt_u_class_goback_click" icon ="scripts/button-icon/icon_goback.gif" />
</ ext:form >
</ ext:window >
< ext:window name ="insertWindow" modal ="true" width ="600" height ="300" >
< ext:form name ="insertForm" title ="增加[功能点配置]" region ="center" url ="/insertSysFunction.do" columns ="1" >
< ext:text name ="funClassIdFk" fieldLabel ="功能点类别ID_FK" readOnly ="true" />
< ext:text name ="txnCode" fieldLabel ="交易码" allowBlank ="true" />
< ext:text name ="codeName" fieldLabel ="交易码名称" allowBlank ="true" />
< ext:textarea name ="codeDesc" fieldLabel ="交易码描述" height ="100" />
< 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 ="/updateSysFunction.do" columns ="1" >
< ext:text name ="uuid" fieldLabel ="主键UUID" readOnly ="true" />
< ext:text name ="funClassIdFk" fieldLabel ="功能点类别ID_FK" readOnly ="true" />
< ext:text name ="txnCode" fieldLabel ="交易码" readOnly ="true" />
< ext:text name ="codeName" fieldLabel ="交易码名称" allowBlank ="true" />
< ext:textarea name ="codeDesc" fieldLabel ="交易码描述" height ="100" />
< 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" columns ="1" >
< ext:text name ="uuid" fieldLabel ="主键UUID" />
< ext:text name ="funClassIdFk" fieldLabel ="功能点类别ID_FK" />
< ext:text name ="txnCode" fieldLabel ="交易码" />
< ext:text name ="codeName" fieldLabel ="交易码名称" />
< ext:textarea name ="codeDesc" fieldLabel ="交易码描述" height ="100" />
< 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 >
最终解析后的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/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?ver=20100103111808" 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 treeClick(node,e){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':node.id}});
}
var treeMenu = null ;
// 创建右键菜单
function treeContextMenu(node, e) {
if (treeMenu != null ){
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
return ;
}
treeMenu = new Ext.menu.Menu( {
id : 'treeMenu',
items : [
new Ext.menu.Item({
text : '增加节点', iconCls : 'icon_add',
handler: function (){
treeAdd(node);
}
}),
new Ext.menu.Item({
text : '修改节点', iconCls : 'icon_update',
handler: function (){
treeUpdate(node);
}
}),
new Ext.menu.Item({
text : '删除节点', iconCls : 'icon_delete',
handler: function (){
treeDelete(node);
}
})
]
});
coords = e.getXY();
treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
}
// 增加节点打开页面
function treeAdd(node){
insertWindow_sysFunClass.show( true );
insertForm_sysFunClass.getForm().reset();
Ext.getCmp('insertForm_sysFunClass:parentClassIdFk').setValue(node.id);
}
// 增加节点保存操作
function bt_i_class_save_click(){
saveForm({
formName : 'insertForm_sysFunClass',
yesFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
insertWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 增加节点返回操作
function bt_i_class_goback_click(){
insertWindow_sysFunClass.hide();
}
// 修改节点打开页面
function treeUpdate(node){
updateWindow_sysFunClass.show( true );
updateForm_sysFunClass.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunClass. do ? uuid = ' + node.id,
formName : 'updateForm_sysFunClass',
noFun : function (){
updateWindow_sysFunClass.hide();
}
});
}
// 修改节点保存操作
function bt_u_class_save_click(){
saveForm({
formName : 'updateForm_sysFunClass',
yesFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
},
noFun : function (form,action){
updateWindow_sysFunClass.hide();
sysFunClassTree_root.reload();
}
});
}
// 修改节点返回操作
function bt_u_class_goback_click(){
updateWindow_sysFunClass.hide();
}
// 删除节点操作
function treeDelete(node){
if (node.childNodes != null && node.childNodes.length > 0 ){
Ext.MessageBox.show({title:'删除失败', msg:'树节点下有子节点,请先删除子节点后继续操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
deleteRecords({
url : rootPath + 'deleteSysFunClass. do ? uuids = ' + node.id,
yesFun : function (){
sysFunClassTree.getLoader().load();
},
noFun: function (){
sysFunClassTree.getLoader().load();
}
});
}
// /////////////////////////////////////////////////////////////////////////////////////
// ////下面是对功能的操作，上面是对功能分类树菜单的操作/////////////////
// /////////////////////////////////////////////////////////////////////////////////////
function reloadGrid(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode != null ){
loadGridData({gridName:'sysFunctionList',baseParams:{'funClassIdFk':selectedNode.id}});
}
}
// 列表处理按钮：添加
function bt_add_click(){
var selectedNode = sysFunClassTree.getSelectionModel().getSelectedNode();
if (selectedNode == null || selectedNode == ''){
Ext.MessageBox.show({title:'增加失败', msg:'请选择左边的功能分类后继续点击添加操作.',buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
return ;
}
insertWindow.show( true );
insertForm.getForm().reset();
Ext.getCmp('insertForm:funClassIdFk').setValue(selectedNode.id);
}
// 列表处理按钮：修改
function bt_update_click(){
updateWindow.show( true );
updateForm.getForm().reset();
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','uuid'),
formName : 'updateForm',
noFun : function (){updateWindow.hide();}
});
}
// 列表处理按钮：删除
function bt_delete_click(){
deleteRecords({
url : rootPath + 'deleteSysFunction. do ? uuids = ' + getGridSelectedValue('sysFunctionList','uuid'),
yesFun : function (){
reloadGrid();
},
noFun: function (){
reloadGrid();
}
});
}
// 列表处理按钮：详细信息
function bt_detail_click(){
detailWindow.show( true );
loadFormData({
url : rootPath + 'selectSysFunction. do ? uuid = ' + getGridSelectedValue('sysFunctionList','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();
reloadGrid();
},
noFun : function (form,action){
insertWindow.hide();
reloadGrid();
}
});
}
// 新建处理按钮：返回
function bt_i_goback_click(){
insertWindow.hide();
}
// 修改处理按钮：保存
function bt_u_save_click(){
saveForm({
formName : 'updateForm',
yesFun : function (form,action){
updateWindow.hide();
reloadGrid();
},
noFun : function (form,action){
updateWindow.hide();
reloadGrid();
}
});
}
// 修改处理按钮：返回
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代码输出*********************** */
sysFunClassTree = new Ext.tree.TreePanel({
id:'sysFunClassTree',split: true ,collapsible: true ,rootVisible : false ,name:'sysFunClassTree',autoScroll: true ,border: true ,
region:'west',title:'功能分类树',width: 200 ,
loader: new Ext.tree.TreeLoader({dataUrl:'http: // localhost:8080/jeasyweb/treeSysFunClass.do'})
});
sysFunClassTree_root = new Ext.tree.AsyncTreeNode({
text:'Ext TreeRoot',id:'src_root'
});
sysFunClassTree.setRootNode(sysFunClassTree_root);
sysFunClassTree.on('contextmenu', function (node, e){treeContextMenu(node, e);}, sysFunClassTree);
sysFunClassTree.on('click', function (node, e){treeClick(node, e);});
// 开始输出grid record
var sysFunctionList_grid_record = Ext.data.Record.create([
{name:'uuid',type:'string'},
{name:'funClassIdFk',type:'string'},
{name:'txnCode',type:'string'},
{name:'codeName',type:'string'},
{name:'codeDesc',type:'string'}
]);
// 输出grid的store代码
var sysFunctionList_grid_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'http: // localhost:8080/jeasyweb/querySysFunction.do'}),
reader : new Ext.data.JsonReader({root : 'result',totalProperty : 'totalCount',id : ' null '}, sysFunctionList_grid_record)
});
sysFunctionList_grid_store.on('load', function (){
sysFunctionList_grid_bt_setting();
});
// 输出tbar按钮列表
var sysFunctionList_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 sysFunctionList_grid_sm = new Ext.grid.CheckboxSelectionModel({dataIndex : ' null '});
var sysFunctionList_grid_cm = new Ext.grid.ColumnModel([
sysFunctionList_grid_sm,
{dataIndex:'uuid',hidden: true ,type:'string',header:'主键UUID'},
{dataIndex:'funClassIdFk',type:'string',header:'功能点类别ID_FK'},
{dataIndex:'txnCode',type:'string',header:'交易码'},
{dataIndex:'codeName',type:'string',header:'交易码名称'},
{dataIndex:'codeDesc',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 sysFunctionList_grid_bbar = new Ext.PagingToolbar({
store: sysFunctionList_grid_store,
displayMsg: displayMsg,
emptyMsg: '没有信息',
pageSize: 10 ,
displayInfo: true ,
items: [' & nbsp; & nbsp; & nbsp; & nbsp;每页显示数', 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){
sysFunctionList_grid_bbar_change_PageSize(newValue);
}
},
select: {
fn: function (combo, value){
// sysFunctionList_grid_bbar_change_PageSize(combo.getValue());
}
}
}
})]
});
function sysFunctionList_grid_bbar_change_PageSize(newValue){
sysFunctionList_grid_bbar['pageSize'] = parseInt(newValue);
sysFunctionList.store.reload({ params : { start : 0 , limit : newValue } });
};
// 输出grid对应的js代码
sysFunctionList = new Ext.grid.EditorGridPanel({
viewConfig: { forceFit: true },clicksToEdit: 1 ,
ds : sysFunctionList_grid_store,
cm : sysFunctionList_grid_cm,
selModel : new Ext.grid.RowSelectionModel(),loadMask : true ,
tbar:sysFunctionList_grid_tbar,
bbar : sysFunctionList_grid_bbar,
bodyStyle:'width: 100 % ',
url:'http: // localhost:8080/jeasyweb/querySysFunction.do',
name:'sysFunctionList',region:'center',url_data:' / querySysFunction. do ',title:'查询[功能点配置]结果列表',iconCls:'icon - pub1',checkbox:' true ',id:'sysFunctionList'
});
// 当tbar不为空的时候输出这些代码，否则不需要这些无用的代码
function sysFunctionList_grid_bt_setting(){
var records = sysFunctionList.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();
}
}
sysFunctionList.on( " cellclick " , function (){
sysFunctionList_grid_bt_setting();
});
var viewport_b56258fbe105462cbd786894aab4b4ec = new Ext.Viewport({
layout:'border',
items:[sysFunClassTree,sysFunctionList]
});
var insertForm_sysFunClass_columns = 2 * 1 ;
insertForm_sysFunClass = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/insertSysFunClass.do',
frame: true ,
title:'增加[功能点分类信息]',
buttonAlign:'center',frame: true ,layout:'table',
name:'insertForm_sysFunClass',id:'insertForm_sysFunClass',height: 200 ,
layoutConfig: {columns:insertForm_sysFunClass_columns},
defaults:{labelSeparator:'：',border: false ,layout:'form',frame: false ,labelAlign:'right',labelWidth: 100 ,height: 30 }
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_parentClassIdFk',id:'insertForm_sysFunClass_item_parentClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'parentClassIdFk',fullname:'insertForm_sysFunClass:parentClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'上级分类ID_FK', id:'insertForm_sysFunClass:parentClassIdFk'
}
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_classCode',id:'insertForm_sysFunClass_item_classCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'classCode',fullname:'insertForm_sysFunClass:classCode',colspan:' 1 ',fieldLabel:'分类代码', id:'insertForm_sysFunClass:classCode'
}
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_className',id:'insertForm_sysFunClass_item_className',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'className',fullname:'insertForm_sysFunClass:className',colspan:' 1 ',fieldLabel:'分类名称', id:'insertForm_sysFunClass:className'
}
});
insertForm_sysFunClass.add({
name:'insertForm_sysFunClass_item_classDesc',id:'insertForm_sysFunClass_item_classDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'classDesc',colspan:' 1 ',fieldLabel:'分类描述',id:'insertForm_sysFunClass:classDesc'
}
});
insertForm_sysFunClass.addButton({xtype:'button',name:'bt_s_insert',text:'保存记录',enablerule:' 0 ',handler: function (){ try {bt_i_class_save_click();} catch (e){alert('调用函数[bt_i_class_save_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_s_insert'});
insertForm_sysFunClass.addButton({xtype:'button',name:'bt_s_goback',text:'关闭返回',enablerule:' 0 ',handler: function (){ try {bt_i_class_goback_click();} catch (e){alert('调用函数[bt_i_class_goback_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_s_goback'});
insertForm_sysFunClass.on( " bodyresize " , function (){
var _bodyWidth = parseInt(document.getElementById('insertForm_sysFunClass').style.width);
var insertForm_sysFunClass_columns = 2 * 1 ;
var _perWidth = _bodyWidth / insertForm_sysFunClass_columns;
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_parentClassIdFk " ).setWidth(_perWidth * 2 - 15 );
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_classCode " ).setWidth(_perWidth * 2 - 15 );
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_className " ).setWidth(_perWidth * 2 - 15 );
insertForm_sysFunClass.getComponent( " insertForm_sysFunClass_item_classDesc " ).setWidth(_perWidth * 2 - 15 );
});
// 开始输出Window对象到JSP页面.
insertWindow_sysFunClass = new Ext.Window({
name:'insertWindow_sysFunClass',closeAction:'hide',width: 600 ,height: 300 ,modal: true ,plain: true ,layout:'border',id:'insertWindow_sysFunClass',
items:[insertForm_sysFunClass]
});
var updateForm_sysFunClass_columns = 2 * 1 ;
updateForm_sysFunClass = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/updateSysFunClass.do',
frame: true ,
title:'修改[功能点分类信息]',
buttonAlign:'center',frame: true ,layout:'table',
name:'updateForm_sysFunClass',id:'updateForm_sysFunClass',height: 200 ,
layoutConfig: {columns:updateForm_sysFunClass_columns},
defaults:{labelSeparator:'：',border: false ,layout:'form',frame: false ,labelAlign:'right',labelWidth: 100 ,height: 30 }
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_uuid',id:'updateForm_sysFunClass_item_uuid',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'uuid',fullname:'updateForm_sysFunClass:uuid',colspan:' 1 ',readOnly: true ,fieldLabel:'主键UUID', id:'updateForm_sysFunClass:uuid'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_parentClassIdFk',id:'updateForm_sysFunClass_item_parentClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'parentClassIdFk',fullname:'updateForm_sysFunClass:parentClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'上级分类ID_FK', id:'updateForm_sysFunClass:parentClassIdFk'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_classCode',id:'updateForm_sysFunClass_item_classCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'classCode',fullname:'updateForm_sysFunClass:classCode',colspan:' 1 ',readOnly: true ,fieldLabel:'分类代码', id:'updateForm_sysFunClass:classCode'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_className',id:'updateForm_sysFunClass_item_className',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'className',fullname:'updateForm_sysFunClass:className',colspan:' 1 ',fieldLabel:'分类名称', id:'updateForm_sysFunClass:className'
}
});
updateForm_sysFunClass.add({
name:'updateForm_sysFunClass_item_classDesc',id:'updateForm_sysFunClass_item_classDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'classDesc',colspan:' 1 ',fieldLabel:'分类描述',id:'updateForm_sysFunClass:classDesc'
}
});
updateForm_sysFunClass.addButton({xtype:'button',name:'bt_s_save',text:'保存记录',enablerule:' 0 ',handler: function (){ try {bt_u_class_save_click();} catch (e){alert('调用函数[bt_u_class_save_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon-ok.png',type:'button',cls:'x-btn-text-icon',id:'bt_s_save'});
updateForm_sysFunClass.addButton({xtype:'button',name:'bt_s_goback',text:'关闭返回',enablerule:' 0 ',handler: function (){ try {bt_u_class_goback_click();} catch (e){alert('调用函数[bt_u_class_goback_click]错误.');}},disabled: false ,icon:'http: // localhost:8080/jeasyweb/scripts/button-icon/icon_goback.gif',type:'button',cls:'x-btn-text-icon',id:'bt_s_goback'});
updateForm_sysFunClass.on( " bodyresize " , function (){
var _bodyWidth = parseInt(document.getElementById('updateForm_sysFunClass').style.width);
var updateForm_sysFunClass_columns = 2 * 1 ;
var _perWidth = _bodyWidth / updateForm_sysFunClass_columns;
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_uuid " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_parentClassIdFk " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_classCode " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_className " ).setWidth(_perWidth * 2 - 15 );
updateForm_sysFunClass.getComponent( " updateForm_sysFunClass_item_classDesc " ).setWidth(_perWidth * 2 - 15 );
});
// 开始输出Window对象到JSP页面.
updateWindow_sysFunClass = new Ext.Window({
name:'updateWindow_sysFunClass',closeAction:'hide',width: 600 ,height: 320 ,modal: true ,plain: true ,layout:'border',id:'updateWindow_sysFunClass',
items:[updateForm_sysFunClass]
});
var insertForm_columns = 2 * 1 ;
insertForm = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/insertSysFunction.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_funClassIdFk',id:'insertForm_item_funClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'funClassIdFk',fullname:'insertForm:funClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'功能点类别ID_FK', id:'insertForm:funClassIdFk'
}
});
insertForm.add({
name:'insertForm_item_txnCode',id:'insertForm_item_txnCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'txnCode',fullname:'insertForm:txnCode',colspan:' 1 ',allowBlank: true ,fieldLabel:'交易码', id:'insertForm:txnCode'
}
});
insertForm.add({
name:'insertForm_item_codeName',id:'insertForm_item_codeName',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'codeName',fullname:'insertForm:codeName',colspan:' 1 ',allowBlank: true ,fieldLabel:'交易码名称', id:'insertForm:codeName'
}
});
insertForm.add({
name:'insertForm_item_codeDesc',id:'insertForm_item_codeDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'codeDesc',colspan:' 1 ',fieldLabel:'交易码描述',id:'insertForm:codeDesc'
}
});
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 * 1 ;
var _perWidth = _bodyWidth / insertForm_columns;
insertForm.getComponent( " insertForm_item_funClassIdFk " ).setWidth(_perWidth * 2 - 15 );
insertForm.getComponent( " insertForm_item_txnCode " ).setWidth(_perWidth * 2 - 15 );
insertForm.getComponent( " insertForm_item_codeName " ).setWidth(_perWidth * 2 - 15 );
insertForm.getComponent( " insertForm_item_codeDesc " ).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 * 1 ;
updateForm = new Ext.form.FormPanel({
region:'center',
url:'http: // localhost:8080/jeasyweb/updateSysFunction.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 ',readOnly: true ,fieldLabel:'主键UUID', id:'updateForm:uuid'
}
});
updateForm.add({
name:'updateForm_item_funClassIdFk',id:'updateForm_item_funClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'funClassIdFk',fullname:'updateForm:funClassIdFk',colspan:' 1 ',readOnly: true ,fieldLabel:'功能点类别ID_FK', id:'updateForm:funClassIdFk'
}
});
updateForm.add({
name:'updateForm_item_txnCode',id:'updateForm_item_txnCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'txnCode',fullname:'updateForm:txnCode',colspan:' 1 ',readOnly: true ,fieldLabel:'交易码', id:'updateForm:txnCode'
}
});
updateForm.add({
name:'updateForm_item_codeName',id:'updateForm_item_codeName',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'codeName',fullname:'updateForm:codeName',colspan:' 1 ',allowBlank: true ,fieldLabel:'交易码名称', id:'updateForm:codeName'
}
});
updateForm.add({
name:'updateForm_item_codeDesc',id:'updateForm_item_codeDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'codeDesc',colspan:' 1 ',fieldLabel:'交易码描述',id:'updateForm:codeDesc'
}
});
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 * 1 ;
var _perWidth = _bodyWidth / updateForm_columns;
updateForm.getComponent( " updateForm_item_uuid " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_funClassIdFk " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_txnCode " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_codeName " ).setWidth(_perWidth * 2 - 15 );
updateForm.getComponent( " updateForm_item_codeDesc " ).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 * 1 ;
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_funClassIdFk',id:'detailForm_item_funClassIdFk',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'funClassIdFk',fullname:'detailForm:funClassIdFk',colspan:' 1 ',fieldLabel:'功能点类别ID_FK', id:'detailForm:funClassIdFk'
}
});
detailForm.add({
name:'detailForm_item_txnCode',id:'detailForm_item_txnCode',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'txnCode',fullname:'detailForm:txnCode',colspan:' 1 ',fieldLabel:'交易码', id:'detailForm:txnCode'
}
});
detailForm.add({
name:'detailForm_item_codeName',id:'detailForm_item_codeName',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textfield',anchor:' 100 % ',name:'codeName',fullname:'detailForm:codeName',colspan:' 1 ',fieldLabel:'交易码名称', id:'detailForm:codeName'
}
});
detailForm.add({
name:'detailForm_item_codeDesc',id:'detailForm_item_codeDesc',
colspan: 2 ,bodyStyle:'padding:2px',
items:{
xtype:'textarea',anchor:' 100 % ',height: 100 ,name:'codeDesc',colspan:' 1 ',fieldLabel:'交易码描述',id:'detailForm:codeDesc'
}
});
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 * 1 ;
var _perWidth = _bodyWidth / detailForm_columns;
detailForm.getComponent( " detailForm_item_uuid " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_funClassIdFk " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_txnCode " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_codeName " ).setWidth(_perWidth * 2 - 15 );
detailForm.getComponent( " detailForm_item_codeDesc " ).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 >
界面效果如下：