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],而仅仅是充满疑惑. 欢迎大家一起来讨论.
我和很多人一样 被深深的震撼, 完全拜倒在他面前.
由于我也一直在研究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],而仅仅是充满疑惑. 欢迎大家一起来讨论.