沉睡森林@漂在北京

本处文章除注明“转载”外均为原创,转载请注明出处。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  152 随笔 :: 4 文章 :: 114 评论 :: 0 Trackbacks
最近一直在考虑将ext进行标签处理,利用简单的标签和属性输出ext的ui效果。将常用的ext方法进行封装,提供统一的js函数给外部调用,以此提高开发的效率。下面是一点尝试的成果,需要改进的东西还很多很多。希望自己在5月份可以多多的整理文档,和做ext开发的朋友分享。




代码还是有不少的问题,不过基本的框架出来了。
下面是jsp代码:
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/greatwall.tld" prefix="gw" %>
<%@ include file="/commons/taglibs.jsp" %>

<gw:html>
<gw:head>
<base href="${ctx}/${basePath}">
<gw:title caption="Extjsptag TextTags Demo"/>
<%@ include file="/commons/button-icon.jsp"  %>
</gw:head>
   

<gw:body>
<gw:script>
function func_button_submitForm(){
    queryGrid('sysUserinfoList','sysUserinfo');
}  

function func_button_resetForm(){
    resetForm('sysUserinfo');
}

function func_button_addRecord(){
    var page = new pageDefine('insert-sys_userinfo.jsp',200,600);
    page.goPage();
}

function func_button_updateRecord(){
    var page = new pageDefine('txn090903.do',200,600);
    page.addGridValue('userId','sysUserinfoList:userId');
    page.goPage();
}

function func_button_deleteRecord(){
    var page = new pageDefine('txn090906.do');
    page.addGridValues('userId','sysUserinfoList:userId');
    page.deleteRecord('确认删除选中的记录?','sysUserinfoList');
}  
</gw:script>
     
<gw:viewport>
        
<gw:block title="查询用户管理"   name="sysUserinfo" columns="2"  height="150" region="north" >
            
<gw:text name="username" fieldLabel="用户名"   colspan="1"   />
            
<gw:text name="email" fieldLabel="电子邮箱" colspan="1"    />
            
            
<gw:submit name="button_submitForm" handler="func_button_submitForm" />
            
<gw:reset name="button_resetForm" handler="func_button_resetForm" />
        
</gw:block>

        
<gw:grid name="sysUserinfoList" title="用户管理列表" region="center" keyid="userinfoId" rownum="true" checkbox="true" url="txn090902.do"  >
            
<gw:button text="增加用户管理" name="button_addRecord"  handler="func_button_addRecord"   icon="icon_add.gif"  />
            
<gw:button text="修改用户管理" name="button_updateRecord" handler="func_button_updateRecord" enablerule="1" icon="icon_update.gif"  />
            
<gw:button text="删除用户管理" name="button_deleteRecord" handler="func_button_deleteRecord" enablerule="2"   icon="icon_delete.gif"  /> 
            
            
<gw:cell dataIndex="userinfoId" header="用户表ID" width="100"/>
            
<gw:cell dataIndex="username"  sortable="true"  header="用户名" width="100" />
            
<gw:cell dataIndex="email" header="电子邮箱" width="100"/>
        
</gw:grid>
    
</gw:viewport>  
</gw:body>
</gw:html>


下面是现实后的html代码:
<html> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<meta http-equiv="Cache-Control" content="no-store"/> 
<meta http-equiv="Pragma" content="no-cache"/> 
<meta http-equiv="Expires" content="0"/> 
<script src="http://localhost:8080/sie/script/ext/ext-base.js" type="text/javascript"></script> 
<script src="http://localhost:8080/sie/script/ext/ext-all.js" type="text/javascript"></script> 
<script src="http://localhost:8080/sie/script/ext/ext-lang-zh_CN.js" type="text/javascript"></script> 
<link href="http://localhost:8080/sie/script/ext/resources/css/ext-all.css" type="text/css" rel="stylesheet"> 
<script src="http://localhost:8080/sie/script/extjsptag-form.js" type="text/javascript"></script> 
<script src="http://localhost:8080/sie/script/extjsptag-public.js" type="text/javascript"></script> 
<script src="http://localhost:8080/sie/script/extjsptag-grid.js" type="text/javascript"></script> 
<script src="http://localhost:8080/sie/script/extjsptag-page.js" type="text/javascript"></script> 
 
<base href="/sie/module/yhqxgl/sys_userinfo/"> 
<title>Extjsptag TextTags Demo</title> 
 
<style> 
.icon_add 
{
  background
: url('/sie/script/button-icon/icon_add.gif') 0 2 no-repeat   !important;
}

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

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

.icon-pub1 
{
  background
: url('/sie/script/button-icon/icon-pub1.gif')  0 0  no-repeat  !important;
}
   
</style> 
</head> 
 
   
 
<body> 
<script> 
 
var pWinCmpId = null;
 
Ext.BLANK_IMAGE_URL 
= 'http://localhost:8080/sie/script/ext/resources/images/default/s.gif';
var basePath = 'http://localhost:8080/sie/module/yhqxgl/sys_userinfo/';
var rootPath = 'http://localhost:8080/sie/';
 
Ext.onReady(
function() {
 
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget 
= 'qtip';
 
 
/******************下面开始Body内JavaScript代码输出************************/
 
/********************************************/
/******开始输出用户自定义JavaScript部分******/
 
function func_button_submitForm(){
    queryGrid('sysUserinfoList','sysUserinfo');
}
  
 
function func_button_resetForm(){
    resetForm('sysUserinfo');
}

 
function func_button_addRecord(){
    
var page = new pageDefine('insert-sys_userinfo.jsp',200,600);
    page.goPage();
}

 
function func_button_updateRecord(){
    
var page = new pageDefine('txn090903.do',200,600);
    page.addGridValue('userId','sysUserinfoList:userId');
    page.goPage();
}

 
function func_button_deleteRecord(){
    
var page = new pageDefine('txn090906.do');
    page.addGridValues('userId','sysUserinfoList:userId');
    page.deleteRecord('确认删除选中的记录?','sysUserinfoList');
}
  
/******用户自定义JavaScript部分结束********/
/******************************************/
 
     
        
var sysUserinfo_bodyWidth = document.body.clientWidth ; 
var sysUserinfo_columns = 2 * 2;
var sysUserinfo_perWidth = sysUserinfo_bodyWidth/sysUserinfo_columns;
 
 
var sysUserinfo = new Ext.form.FormPanel({
  region:'north',
  buttonAlign:'center',frame:
true,layout:'table',
  name:'sysUserinfo',id:'sysUserinfo',height:
150,title:'查询用户管理',
  layoutConfig: 
{columns:sysUserinfo_columns},
  defaults:
{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:sysUserinfo_bodyWidth ,height:30}
}
);
 
            
sysUserinfo.add(
{
  name:'sysUserinfo_item_username',id:'sysUserinfo_item_username',
  colspan:
2,bodyStyle:'padding:2px',
  width:sysUserinfo_perWidth
*2-15  , 
  items:
{
    xtype:'textfield',name:'username',anchor:'
100%',fieldLabel:'用户名',id:'username'
  }

}
);
 
            
sysUserinfo.add(
{
  name:'sysUserinfo_item_email',id:'sysUserinfo_item_email',
  colspan:
2,bodyStyle:'padding:2px',
  width:sysUserinfo_perWidth
*2-15  , 
  items:
{
    xtype:'textfield',name:'email',anchor:'
100%',fieldLabel:'电子邮箱',id:'email'
  }

}
);
 
            
            
sysUserinfo.addButton(
{xtype:'button',name:'button_submitForm',handler:func_button_submitForm,text:'确  定',type:'submit',id:'button_submitForm'});
 
            
sysUserinfo.addButton(
{xtype:'button',name:'button_resetForm',handler:func_button_resetForm,text:'重  置',type:'reset',id:'button_resetForm'});
 
        
 
 
 
sysUserinfo.on(
"bodyresize"function(){
  
var _bodyWidth = document.body.clientWidth ; 
  
var sysUserinfo_columns = 2 * 2;
  
var _perWidth = _bodyWidth/sysUserinfo_columns;
  sysUserinfo.getComponent(
"sysUserinfo_item_username").setWidth(_perWidth * 2-15);
  sysUserinfo.getComponent(
"sysUserinfo_item_email").setWidth(_perWidth * 2-15);
}
);
 
 
        
            
            
             
            
            
            
            
        
var sysUserinfoList_grid_record = Ext.data.Record.create([
  
{name:'userinfoId',type:'string'},
  
{name:'username',type:'string'},
  
{name:'email',type:'string'}
]);
 
var sysUserinfoList_grid_store = new Ext.data.Store({
  proxy : 
new Ext.data.HttpProxy({url : 'http://localhost:8080/sie/txn090902.do'}),
  reader : new Ext.data.JsonReader({root : 'result',totalProperty : 'totalCount',id : 'userinfoId'}, sysUserinfoList_grid_record)
}
);
 
var sysUserinfoList_grid_sm = new Ext.grid.CheckboxSelectionModel({dataIndex : 'userinfoId'});
var sysUserinfoList_grid_rownum = new Ext.grid.RowNumberer();
var sysUserinfoList_grid_cm = new Ext.grid.ColumnModel([
  sysUserinfoList_grid_sm,
  sysUserinfoList_grid_rownum,
  
{dataIndex:'userinfoId',width:100,type:'string',header:'用户表ID'},
  
{dataIndex:'username',sortable:true,width:100,type:'string',header:'用户名'},
  
{dataIndex:'email',width:100,type:'string',header:'电子邮箱'}
]);
 
var displayMsg = '显示第【<b><font color=red>{0}</font></b>】条至第【<b><font color=red>{1}</font></b>】条 / 共【<b><font color=red>{2}</font></b>】条记录';
var sysUserinfoList_grid_bbar = new Ext.PagingToolbar({
  store: sysUserinfoList_grid_store,
  displayMsg: displayMsg,
  emptyMsg: '没有信息',
  pageSize: 
10,
  displayInfo: 
true,
  items: ['
&nbsp;&nbsp;&nbsp;&nbsp;每页显示数', new Ext.form.ComboBox({
    store: 
new Ext.data.SimpleStore({
      fields: ['abbr', 'state'],
      data: [[
1010], [1515], [2020], [3030], [4040], [6060], [8080], [100100]]
    }
),
    width: 
50,displayField: 'state',typeAhead: true,mode: 'local',value: 10,triggerAction: 'all',selectOnFocus: true,
    listeners: 
{
      change: 
{
        fn: 
function(box, newValue, oldValue){
          sysUserinfoList_grid_bbar_change_PageSize(newValue);
        }

      }
,
      select: 
{
        fn: 
function(combo, value){
          
//sysUserinfoList_grid_bbar_change_PageSize(combo.getValue());
        }

      }

    }

  }
)]
}
);
 
function sysUserinfoList_grid_bbar_change_PageSize(newValue){
  sysUserinfoList_grid_bbar['pageSize']
=newValue;
  sysUserinfoList.store.reload(
{ params : { start : 0, limit : newValue } });
}
;
 
var sysUserinfoList_grid_tbar = [
  
{xtype:'button',name:'button_addRecord',cls:'x-btn-text-icon',handler:func_button_addRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_add.gif',text:'增加用户管理',type:'button',id:'button_addRecord'},'-',
  {xtype:'button',name:'button_updateRecord',cls:'x-btn-text-icon',disabled:true,handler:func_button_updateRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_update.gif',text:'修改用户管理',type:'button',id:'button_updateRecord'},'-',
  {xtype:'button',name:'button_deleteRecord',cls:'x-btn-text-icon',disabled:true,handler:func_button_deleteRecord,icon:'http://localhost:8080/sie/script/button-icon/icon_delete.gif',text:'删除用户管理',type:'button',id:'button_deleteRecord'}
];
 
var  sysUserinfoList = new Ext.grid.GridPanel({
  viewConfig: 
{ forceFit: true },
  ds :  sysUserinfoList_grid_store,
  cm : sysUserinfoList_grid_cm,
  selModel : 
new Ext.grid.RowSelectionModel(),loadMask : true,
  tbar:sysUserinfoList_grid_tbar,
  bbar :  sysUserinfoList_grid_bbar,
  bodyStyle:'width:
100%',
  url:'http:
//localhost:8080/sie/txn090902.do',
  name:'sysUserinfoList',region:'center',title:'用户管理列表',iconCls:'icon-pub1',id:'sysUserinfoList'
}
);
 
sysUserinfoList.on(
"cellclick"function(){
  
var records = sysUserinfoList.getSelections();
  
if (!records || records.length == 0{
    Ext.getCmp(
"button_updateRecord").disable();
    Ext.getCmp(
"button_deleteRecord").disable();
  }

  
if (records.length == 1{
    Ext.getCmp(
"button_updateRecord").enable();
    Ext.getCmp(
"button_deleteRecord").enable();
  }

  
if (records.length > 1{
    Ext.getCmp(
"button_updateRecord").disable();
    Ext.getCmp(
"button_deleteRecord").enable();
  }

}
);
 
    
var viewport = new Ext.Viewport({
  layout:'border',
  items:[sysUserinfo,sysUserinfoList]
}
);
  
 
/******************Body内JavaScript代码输出结束************************/
}
);

</script> 
</body> 
 
</html> 
posted on 2009-05-04 16:49 王总兵 阅读(1681) 评论(5)  编辑  收藏 所属分类: Ext

评论

# re: ext的grid和queryForm的整合处理 2009-05-04 17:31 阳衡锋
ext 好像有一个taglib吧 http://www.exttld.com/  回复  更多评论
  

# re: ext的grid和queryForm的整合处理 2009-05-04 17:42 王兵
@阳衡锋
确实有一个 并且还有不少
我希望我的这个标签可以和一部分的后台程序结合起来使用,完成用户权限的控制。  回复  更多评论
  

# re: ext的grid和queryForm的整合处理 2009-05-05 13:09 tee
一直在想,那么多人那么痛苦的要把b/s整成c/s,大量精力都花在了UI而不是业务逻辑上,何必呢?  回复  更多评论
  

# re: ext的grid和queryForm的整合处理 2009-05-05 13:40 王兵
@tee
业务逻辑其实是核心的东西
但是架构师是不需要关心具体的业务逻辑
我们公司有自己的产品 自己的平台、UI、快速开发环境等等
这些都和业务没关系   回复  更多评论
  

# re: ext的grid和queryForm的整合处理[未登录] 2009-05-07 09:27 陈亮
我认为用模板比用标签封装方便,标签调试起来太麻烦  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: