EXT的HTML封装

最新推荐文章于 2017-06-20 11:08:49 发布

最新推荐文章于 2017-06-20 11:08:49 发布 · 210 阅读

文章标签：

#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>

另附效果图。

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