EXT 2 绚丽表格 背后的隐忧

ext2 的demo和alpha一放出,立即吸引了全球ajax爱好者的目光.

我和很多人一样 被深深的震撼, 完全拜倒在他面前.

由于我也一直在研究grid组件, 所以对他的grid很感兴趣.

看了DEMO之后, 除了自叹不如之外还是自叹不如 :).

可以说 ext 2的grid是目前 基于js实现的列表里最出色的(没有"之一").

但是 EXT2 的表格里有一个很重要的变化.

列表不再是 由一个table组成. 而是变成了 由n多个div和table组成.
每行数据是一个table.
下面的代码 是一条记录对应的 html代码. 注意: 只是一行数据.

[code]
<DIV class="x-grid3-row x-grid3-row-selected " style="WIDTH: 579px" rowIndex="0">
<TABLE class="x-grid3-row-table" style="WIDTH: 579px" cellSpacing="0" cellPadding="0" border="0">
<TBODY>
<TR>
<TD class="x-grid3-col x-grid3-cell x-grid3-td-company x-grid3-cell-first " style="WIDTH: 269px">
<DIV class="x-grid3-cell-inner x-grid3-col-company" unselectable="on">
3m Co
</DIV>
</TD>
<TD class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="WIDTH: 75px">
<DIV class="x-grid3-cell-inner x-grid3-col-1" unselectable="on">
$71.72
</DIV>
</TD>
<TD class="x-grid3-col x-grid3-cell x-grid3-td-2 " style="WIDTH: 75px">
<DIV class="x-grid3-cell-inner x-grid3-col-2" unselectable="on">
<SPAN style="COLOR: green">0.02</SPAN>
</DIV>
</TD>
<TD class="x-grid3-col x-grid3-cell x-grid3-td-3 " style="WIDTH: 75px">
<DIV class="x-grid3-cell-inner x-grid3-col-3" unselectable="on">
<SPAN style="COLOR: green">0.03%</SPAN>
</DIV>
</TD>
<TD class="x-grid3-col x-grid3-cell x-grid3-td-4 x-grid3-cell-last " style="WIDTH: 85px">
<DIV class="x-grid3-cell-inner x-grid3-col-4" unselectable="on">
09/01/2007
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
[/code]


当然我也知道,把一个大table进行拆分 可以避免table的很多先天不足(例如渲染方面的).
但是这样的dom结构未免太复杂了一些, 当页面数据很多时, cpu \内存 还有脆弱的IE能否支撑起整个列表呢.

其实ext grid以前在实现一些特性的时候, 使用的方法也就不是很好, 例如那个列表内部滚动条, 例如列表头的图标处理.(不是指代码写的不好,而是dom的结构设计上就有一些问题,完全可以更简单),

这次重新设计的 基于row-table的grid结构 真的是更好的方案吗?
[color=red]我对这种设计并不是持否定态度[/color],而仅仅是充满疑惑. 欢迎大家一起来讨论.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值