EXT的HTML封装

wcleye

浏览: 10195 次
性别:
来自: 武汉

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT HTML CSS Ajax JSP

刚看到有篇文章：http://www.iteye.com/topic/409416

里面提到用JSP标签封装EXT，我觉得完全没这必要，这反而还限制了EXT。

在公司也对EXT做过封装 (基本思路：大的方向不变，EXT本身就提供了对DIV的渲染功能，用DIV标签写页面，最后用EXT进行渲染)，封装后所有的容器、面板全针对DIV，可以说会写DIV，你就能做出EXT的页面。

页面源码：

列表:

<body>
	<div region="north" border="false" style="margin:8px 0 0 5px;" height="60">
		<div xtype="pkupaneltbar" title="自行招用保安员的单位信息查询">
			<div text="->"></div>
			<div text="查询" onExtClick="search()"></div>
		</div>
		<form method="post" id="searchForm">
			<table width="80%" cellpadding="0" cellspacing="0" style="font-size: 10pt; vertical-align: middle;">
				<tr>
					<td class="label" height="30" labelFor="S" width="100">单位名称</td>
					<td width="300"><input id='S' class="Edit" operation='like' type='text' fieldname='s.S' /></td>
					<td width="120" class="label" labelFor="P">单位负责人</td>
					<td><input id='P' class="Edit" type='text' operation='like' fieldname='s.P' /></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="pkuGrid" region="center" border="false" xtype="pkugridpanel"
				title="列表" pagingBar="true" pageSize="15" onExtRowdblclick="doRowdbClick()">
		<div xtype="pkupaneltbar">
			<div text="->"></div>
			<div text="添加" onExtClick="doAdd()"></div>
			<div text="-"></div>
			<div text="修改" onExtClick="doChange()"></div>
			<div text="-"></div>
			<div text="注销" onExtClick="doDel()"></div>
		</div>
		<div id="gridstore" xtype="pkustore" url="ajax?method=getAutoCompanyList"
					autoLoad="true">
		<div xtype="pkustorereader" recordid="ssjId" record="SS_SSJ"
						totalRecords="result">
			<div name="ssjId" mapping="SSJID"></div>
			<div name="ssjName" mapping="SSJNAME"></div>
			<div name="pName" mapping="PNAME"></div>
			<div name="ssjUnitName" mapping="SSJUNITNAME"></div>
			<div name="prinName" mapping="PRINNAME"></div>
			<div name="prinTel" mapping="PRINTEL"></div>
			<div name="munitName" mapping="MUNITNAME"></div>
		</div>
	</div>
	<div xtype="pkucm">
		<div type="checkbox"></div>
		<div header="单位编号" width="1" sortable="true" dataIndex="ssjId"></div>
		<div header="单位名称" width="4" sortable="true" dataIndex="ssjName"></div>
		<div header="上级单位" width="2" sortable="true" dataIndex="pName"></div>
		<div header="所属单位" width="4" sortable="true" dataIndex="ssjUnitName"></div>
		<div header="公司负责人" width="2" sortable="true" dataIndex="prinName"></div>
		<div header="联系电话" width="2" sortable="true" dataIndex="prinTel"></div>
		<div header="管辖单位" width="4" sortable="true" dataIndex="munitName"></div>
	</div>
	</div>
</body>

另附效果图。

注：发这帖子只是给大家提供一种新封装的方法。

查看图片附件

分享到：

为啥睡觉都不做梦?

2009-06-25 09:59
浏览 2092
评论(6)
论坛回复 / 浏览 (6 / 5475)
分类:Web前端
查看更多

6 楼 equalto 2009-09-28

html自动转换为Ext，最好慎用，会有时间延迟，闪的难受。
特别对于较大的页面，本身页面就需要很多时间，然后又Ext转换时候产生的大量dom操作，会带来很不爽的视觉效果。

我们当初为了省事，List显示使用了自动转换table，的确对很多刚入手的人方便许多，但是后来数据量大的时候，真的无法忍受。
但是教大家写个简单的ExtGrid，其实可能只要2小时就够了——js稍微接触过的人。

该面对的还是要面对，对于小公司里面的每个人来说，都尽量让大家学习提高，而不是把希望压在一个人身上。

5 楼 ruanwxh 2009-09-22

最近在学EXTJS，也在找方法封装EXTJS。
楼主能不能发下<div xtype=""..>xtype里的实现代码？

4 楼 kimmking 2009-06-26

这个思路不错。

借了extjs的形。
我还是我，extjs的弊端没了，优势也没有了。跟extjs关系不大。

3 楼 wcleye 2009-06-26

damoqiongqiu 写道

Rooock 写道

我不大明白.
比如pkuGrid. LZ你的意思在JS中用ext渲染到div id="pkuGrid"中.
其他的div同理?

这样做好像是完全放弃ext的布局功能.
而是交给程序员自己去做.用div实现??

就是利用Ext的CSS，手写标签去模拟面板，这样做在渲染方面的效率提升比较多。
但是手写太痛苦了也

这已经在我们的项目中使用了，新人进来就用这套框架，感觉还是很容易上手的，而且页面中基本上看不到JS代码（除了添加的事件处理），至于前面提到的放弃EXT的布局，这点我不这样认为，虽然做了封装，但是还是延续了EXT的布局方式，不同在于把EXT的配制项做为DIV的属性注入。

2 楼 damoqiongqiu 2009-06-26

Rooock 写道

就是利用Ext的CSS，手写标签去模拟面板，这样做在渲染方面的效率提升比较多。
但是手写太痛苦了也

1 楼 Rooock 2009-06-26

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论