浏览 5466 次
|
锁定老帖子 主题：EXT的HTML封装
精华帖 (1) :: 良好帖 (0) :: 新手帖 (7) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-06-25
刚看到有篇文章：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> 另附效果图。 注：发这帖子只是给大家提供一种新封装的方法。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-06-26
我不大明白.
比如pkuGrid. LZ你的意思在JS中用ext渲染到div id="pkuGrid"中. 其他的div同理? 这样做好像是完全放弃ext的布局功能. 而是交给程序员自己去做.用div实现?? |
| 返回顶楼 | |
|
发表时间：2009-06-26
Rooock 写道 我不大明白.
比如pkuGrid. LZ你的意思在JS中用ext渲染到div id="pkuGrid"中. 其他的div同理? 这样做好像是完全放弃ext的布局功能. 而是交给程序员自己去做.用div实现?? 就是利用Ext的CSS，手写标签去模拟面板，这样做在渲染方面的效率提升比较多。 但是手写太痛苦了也 
|
| 返回顶楼 | |
|
发表时间：2009-06-26
damoqiongqiu 写道 Rooock 写道 我不大明白.
比如pkuGrid. LZ你的意思在JS中用ext渲染到div id="pkuGrid"中. 其他的div同理? 这样做好像是完全放弃ext的布局功能. 而是交给程序员自己去做.用div实现?? 就是利用Ext的CSS，手写标签去模拟面板，这样做在渲染方面的效率提升比较多。 但是手写太痛苦了也 这已经在我们的项目中使用了，新人进来就用这套框架，感觉还是很容易上手的，而且页面中基本上看不到JS代码（除了添加的事件处理），至于前面提到的放弃EXT的布局，这点我不这样认为，虽然做了封装，但是还是延续了EXT的布局方式，不同在于把EXT的配制项做为DIV的属性注入。 |
| 返回顶楼 | |
|
发表时间：2009-06-26
这个思路不错。
借了extjs的形。 我还是我，extjs的弊端没了，优势也没有了。跟extjs关系不大。 |
| 返回顶楼 | |
|
发表时间：2009-09-22
最近在学EXTJS，也在找方法封装EXTJS。
楼主能不能发下<div xtype=""..>xtype里的实现代码？ |
| 返回顶楼 | |
|
发表时间：2009-09-28
html自动转换为Ext，最好慎用，会有时间延迟，闪的难受。
特别对于较大的页面，本身页面就需要很多时间，然后又Ext转换时候产生的大量dom操作，会带来很不爽的视觉效果。 我们当初为了省事，List显示使用了自动转换table，的确对很多刚入手的人方便许多，但是后来数据量大的时候，真的无法忍受。 但是教大家写个简单的ExtGrid，其实可能只要2小时就够了——js稍微接触过的人。 该面对的还是要面对，对于小公司里面的每个人来说，都尽量让大家学习提高，而不是把希望压在一个人身上。 |
| 返回顶楼 | |
