亚洲AV日韩综合一区尤物,亚洲欧美日韩中文二区,亚洲国产精品无码中文lv

ext的grid和queryForm的整合處理

最近一直在考慮將ext進(jìn)行標(biāo)簽處理，利用簡(jiǎn)單的標(biāo)簽和屬性輸出ext的ui效果。將常用的ext方法進(jìn)行封裝，提供統(tǒng)一的js函數(shù)給外部調(diào)用，以此提高開發(fā)的效率。下面是一點(diǎn)嘗試的成果，需要改進(jìn)的東西還很多很多。希望自己在5月份可以多多的整理文檔，和做ext開發(fā)的朋友分享。

代碼還是有不少的問題，不過基本的框架出來了。
下面是jsp代碼：

<%@ page contentType="text/html;charset=UTF-8" %>

<%@ taglib uri="/WEB-INF/greatwall.tld" prefix="gw" %>

<%@ include file="/commons/taglibs.jsp" %>

<gw:html>

<gw:head>

<gw:title caption="Extjsptag TextTags Demo"/>

<%@ include file="/commons/button-icon.jsp" %>

</gw:head>

<gw:body>

<gw:script>

function func_button_submitForm(){

queryGrid('sysUserinfoList','sysUserinfo');

}

function func_button_resetForm(){

resetForm('sysUserinfo');

}

function func_button_addRecord(){

var page = new pageDefine('insert-sys_userinfo.jsp',200,600);

page.goPage();

}

function func_button_updateRecord(){

var page = new pageDefine('txn090903.do',200,600);

page.addGridValue('userId','sysUserinfoList:userId');

page.goPage();

}

function func_button_deleteRecord(){

var page = new pageDefine('txn090906.do');

page.addGridValues('userId','sysUserinfoList:userId');

page.deleteRecord('確認(rèn)刪除選中的記錄？','sysUserinfoList');

}

</gw:script>

<gw:viewport>

<gw:block title="查詢用戶管理" name="sysUserinfo" columns="2" height="150" region="north" >

<gw:text name="username" fieldLabel="用戶名" colspan="1" />

<gw:text name="email" fieldLabel="電子郵箱" colspan="1" />

<gw:submit name="button_submitForm" handler="func_button_submitForm" />

<gw:reset name="button_resetForm" handler="func_button_resetForm" />

</gw:block>

<gw:grid name="sysUserinfoList" title="用戶管理列表" region="center" keyid="userinfoId" rownum="true" checkbox="true" url="txn090902.do" >

<gw:button text="增加用戶管理" name="button_addRecord" handler="func_button_addRecord" icon="icon_add.gif" />

<gw:button text="修改用戶管理" name="button_updateRecord" handler="func_button_updateRecord" enablerule="1" icon="icon_update.gif" />

<gw:button text="刪除用戶管理" name="button_deleteRecord" handler="func_button_deleteRecord" enablerule="2" icon="icon_delete.gif" />

<gw:cell dataIndex="userinfoId" header="用戶表ID" width="100"/>

<gw:cell dataIndex="username" sortable="true" header="用戶名" width="100" />

<gw:cell dataIndex="email" header="電子郵箱" width="100"/>

</gw:grid>

</gw:viewport>

</gw:body>

</gw:html>

下面是現(xiàn)實(shí)后的html代碼：

<html>

<head>

<title>Extjsptag TextTags Demo</title>

<style>

.icon_add {

background: url('/sie/script/button-icon/icon_add.gif') 0 2 no-repeat !important;

}

.icon_delete {

background: url('/sie/script/button-icon/icon_delete.gif') 0 2 no-repeat !important;

}

.icon_update {

background: url('/sie/script/button-icon/icon_update.gif') 0 2 no-repeat !important;

}

.icon-pub1 {

background: url('/sie/script/button-icon/icon-pub1.gif') 0 0 no-repeat !important;

}

</style>

</head>

<body>

var pWinCmpId = null;

Ext.BLANK_IMAGE_URL = 'http://localhost:8080/sie/script/ext/resources/images/default/s.gif';

var basePath = 'http://localhost:8080/sie/module/yhqxgl/sys_userinfo/';

var rootPath = 'http://localhost:8080/sie/';

Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'qtip';

/******************下面開始Body內(nèi)JavaScript代碼輸出************************/

/********************************************/

/******開始輸出用戶自定義JavaScript部分******/

function func_button_submitForm(){

queryGrid('sysUserinfoList','sysUserinfo');

}

function func_button_resetForm(){

resetForm('sysUserinfo');

}

function func_button_addRecord(){

var page = new pageDefine('insert-sys_userinfo.jsp',200,600);

page.goPage();

}

function func_button_updateRecord(){

var page = new pageDefine('txn090903.do',200,600);

page.addGridValue('userId','sysUserinfoList:userId');

page.goPage();

}

function func_button_deleteRecord(){

var page = new pageDefine('txn090906.do');

page.addGridValues('userId','sysUserinfoList:userId');

page.deleteRecord('確認(rèn)刪除選中的記錄？','sysUserinfoList');

}

/******用戶自定義JavaScript部分結(jié)束********/

/******************************************/

var sysUserinfo_bodyWidth = document.body.clientWidth ;

var sysUserinfo_columns = 2 * 2;

var sysUserinfo_perWidth = sysUserinfo_bodyWidth/sysUserinfo_columns;

var sysUserinfo = new Ext.form.FormPanel({

region:'north',

buttonAlign:'center',frame:true,layout:'table',

name:'sysUserinfo',id:'sysUserinfo',height:150,title:'查詢用戶管理',

layoutConfig: {columns:sysUserinfo_columns},

defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:sysUserinfo_bodyWidth ,height:30}

});

sysUserinfo.add({

name:'sysUserinfo_item_username',id:'sysUserinfo_item_username',

colspan:2,bodyStyle:'padding:2px',

width:sysUserinfo_perWidth*2-15 ,

items:{

xtype:'textfield',name:'username',anchor:'100%',fieldLabel:'用戶名',id:'username'

}

});

sysUserinfo.add({

name:'sysUserinfo_item_email',id:'sysUserinfo_item_email',

colspan:2,bodyStyle:'padding:2px',

width:sysUserinfo_perWidth*2-15 ,

items:{

xtype:'textfield',name:'email',anchor:'100%',fieldLabel:'電子郵箱',id:'email'

}

});

sysUserinfo.addButton({xtype:'button',name:'button_submitForm',handler:func_button_submitForm,text:'確定',type:'submit',id:'button_submitForm'});

sysUserinfo.addButton({xtype:'button',name:'button_resetForm',handler:func_button_resetForm,text:'重置',type:'reset',id:'button_resetForm'});

sysUserinfo.on("bodyresize", function(){

var _bodyWidth = document.body.clientWidth ;

var sysUserinfo_columns = 2 * 2;

var _perWidth = _bodyWidth/sysUserinfo_columns;

sysUserinfo.getComponent("sysUserinfo_item_username").setWidth(_perWidth * 2-15);

sysUserinfo.getComponent("sysUserinfo_item_email").setWidth(_perWidth * 2-15);

});

var sysUserinfoList_grid_record = Ext.data.Record.create([

{name:'userinfoId',type:'string'},

{name:'username',type:'string'},

{name:'email',type:'string'}

]);

var sysUserinfoList_grid_store = new Ext.data.Store({

proxy : new Ext.data.HttpProxy({url : 'http://localhost:8080/sie/txn090902.do'}),

reader : new Ext.data.JsonReader({root : 'result',totalProperty : 'totalCount',id : 'userinfoId'}, sysUserinfoList_grid_record)

});

var sysUserinfoList_grid_sm = new Ext.grid.CheckboxSelectionModel({dataIndex : 'userinfoId'});

var sysUserinfoList_grid_rownum = new Ext.grid.RowNumberer();

var sysUserinfoList_grid_cm = new Ext.grid.ColumnModel([

sysUserinfoList_grid_sm,

sysUserinfoList_grid_rownum,

{dataIndex:'userinfoId',width:100,type:'string',header:'用戶表ID'},

{dataIndex:'username',sortable:true,width:100,type:'string',header:'用戶名'},

{dataIndex:'email',width:100,type:'string',header:'電子郵箱'}

]);

var displayMsg = '顯示第【<b><font color=red>{0}</font></b>】條至第【<b><font color=red>{1}</font></b>】條 / 共【<b><font color=red>{2}</font></b>】條記錄';

var sysUserinfoList_grid_bbar = new Ext.PagingToolbar({

store: sysUserinfoList_grid_store,

displayMsg: displayMsg,

emptyMsg: '沒有信息',

pageSize: 10,

displayInfo: true,

items: ['    每頁(yè)顯示數(shù)', new Ext.form.ComboBox({

store: new Ext.data.SimpleStore({

fields: ['abbr', 'state'],

data: [[10, 10], [15, 15], [20, 20], [30, 30], [40, 40], [60, 60], [80, 80], [100, 100]]

}),

width: 50,displayField: 'state',typeAhead: true,mode: 'local',value: 10,triggerAction: 'all',selectOnFocus: true,

listeners: {

change: {

fn: function(box, newValue, oldValue){

sysUserinfoList_grid_bbar_change_PageSize(newValue);

}

select: {

fn: function(combo, value){

//sysUserinfoList_grid_bbar_change_PageSize(combo.getValue());

}

})]

});

function sysUserinfoList_grid_bbar_change_PageSize(newValue){

sysUserinfoList_grid_bbar['pageSize']=newValue;

sysUserinfoList.store.reload({ params : { start : 0, limit : newValue } });

};

var sysUserinfoList_grid_tbar = [

{xtype:'button',name:'button_addRecord',cls:'x-btn-text-icon',handler:func_button_addRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_add.gif',text:'增加用戶管理',type:'button',id:'button_addRecord'},'-',

{xtype:'button',name:'button_updateRecord',cls:'x-btn-text-icon',disabled:true,handler:func_button_updateRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_update.gif',text:'修改用戶管理',type:'button',id:'button_updateRecord'},'-',

{xtype:'button',name:'button_deleteRecord',cls:'x-btn-text-icon',disabled:true,handler:func_button_deleteRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_delete.gif',text:'刪除用戶管理',type:'button',id:'button_deleteRecord'}

];

var sysUserinfoList = new Ext.grid.GridPanel({

viewConfig: { forceFit: true },

ds : sysUserinfoList_grid_store,

cm : sysUserinfoList_grid_cm,

selModel : new Ext.grid.RowSelectionModel(),loadMask : true,

tbar:sysUserinfoList_grid_tbar,

bbar : sysUserinfoList_grid_bbar,

bodyStyle:'width:100%',

url:'http://localhost:8080/sie/txn090902.do',

name:'sysUserinfoList',region:'center',title:'用戶管理列表',iconCls:'icon-pub1',id:'sysUserinfoList'

});

sysUserinfoList.on("cellclick", function(){

var records = sysUserinfoList.getSelections();

if (!records || records.length == 0) {

Ext.getCmp("button_updateRecord").disable();

Ext.getCmp("button_deleteRecord").disable();

}

if (records.length == 1) {

Ext.getCmp("button_updateRecord").enable();

Ext.getCmp("button_deleteRecord").enable();

}

if (records.length > 1) {

Ext.getCmp("button_updateRecord").disable();

Ext.getCmp("button_deleteRecord").enable();

}

});

var viewport = new Ext.Viewport({

layout:'border',

items:[sysUserinfo,sysUserinfoList]

});

/******************Body內(nèi)JavaScript代碼輸出結(jié)束************************/

});

</script>

</body>

</html>

posted on 2009-05-04 16:49 王總兵閱讀(1889) 評(píng)論(5) 編輯收藏所屬分類: Ext

評(píng)論

# re: ext的grid和queryForm的整合處理 2009-05-04 17:31 陽(yáng)衡鋒

ext 好像有一個(gè)taglib吧 http://www.exttld.com/ 回復(fù) 更多評(píng)論

# re: ext的grid和queryForm的整合處理 2009-05-04 17:42 王兵

@陽(yáng)衡鋒
確實(shí)有一個(gè) 并且還有不少
我希望我的這個(gè)標(biāo)簽可以和一部分的后臺(tái)程序結(jié)合起來使用，完成用戶權(quán)限的控制。回復(fù) 更多評(píng)論

# re: ext的grid和queryForm的整合處理 2009-05-05 13:09 tee

一直在想，那么多人那么痛苦的要把b/s整成c/s，大量精力都花在了UI而不是業(yè)務(wù)邏輯上，何必呢？回復(fù) 更多評(píng)論

# re: ext的grid和queryForm的整合處理 2009-05-05 13:40 王兵

@tee
業(yè)務(wù)邏輯其實(shí)是核心的東西
但是架構(gòu)師是不需要關(guān)心具體的業(yè)務(wù)邏輯
我們公司有自己的產(chǎn)品自己的平臺(tái)、UI、快速開發(fā)環(huán)境等等
這些都和業(yè)務(wù)沒關(guān)系回復(fù) 更多評(píng)論

# re: ext的grid和queryForm的整合處理[未登錄] 2009-05-07 09:27 陳亮

我認(rèn)為用模板比用標(biāo)簽封裝方便，標(biāo)簽調(diào)試起來太麻煩回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: json和javascript的關(guān)系 extjs查找樹節(jié)點(diǎn)的2種方法帶checkbox的treepanel實(shí)例 ext樹實(shí)例bug修改記錄標(biāo)簽開發(fā)ext樹的完整例子利用ext標(biāo)簽的好處 GXT與EXT-GWT GWT-EXT 以及收費(fèi)問題 javascript動(dòng)態(tài)調(diào)用時(shí)參數(shù)傳遞 ext中使用iframe的tabs頁(yè) 帶checkbox框的樹菜單例子

沉睡森林@漂在北京

隨筆分類(115)

隨筆檔案(154)

技術(shù)blog

搜索

最新評(píng)論

評(píng)論