`
zhangdaiping
  • 浏览: 129856 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

TableLayout设计考虑不周的地方

阅读更多
今天有个别的部门同事跑来问我, Ext.Panel组件使用TableLayout布局, 翻页到最后一页, 再往回翻页, 怎么前面有个空白

正常情况:


错误演示:


先Check同事写的代码
// Panel在进行翻页的时候, 先移除了所有的子元素
panel.removeAll();

// 然后再添加了新页面的子Panel
for (var i = 0; i < len; i++) {
   // ...演示环境省略代码...
   panel.add(new Ext.Panel({}));
}

panel.doLayout();


用FireBug一看, 有一个空白的TD占位;

原来是Ext.Container在remove子元素时, 并没有把table里面的TR和TD给移除掉, 导致了这个错误;



举例说明

假如我们有一个3*3的Panel, 每页显示9条数据, 和我例子里面的图显示一样, 共3页, 前两页都是9条数据, 第三页只有1条数据;

当第一页时, 正常显示;

翻第二页, 执行上面的动作, 先移除Panel的子元素, 然后再增加新的子元素; 这时你使用Firebug能看到一个现象, 前面会有9个空的TD, 这9个TD就是装载第一页内容的TD容器, 在移除的时候并没有把TD移除掉;

翻第三页, 由于第三页只有一条记录, 第三页只会增加一个TD;

当往回翻页时, 问题出现了, 新页内容的位置就会被第三页的TD给挤掉, 就出现了这样的现象了.

修改方法
// 移除table旧tbody节点
Ext.fly(panel.layout.table).child('tbody').remove();

// 重新创建一个
Ext.fly(panel.layout.table).createChild({tag: 'tbody'});

// 重置table的内存变量
panel.layout.currentRow = 0;
panel.layout.currentColumn = 0;
panel.layout.cells = [];


后记

我觉的官方TableLayout应该提供一个刷新table的函数, 这样就省去很多麻烦了.
分享到:
评论
1 楼 tchitani 2011-10-24  
any working example?

相关推荐

    安卓计算器开发实验报告.doc

    在创建虚拟机时,考虑到性能与兼容性,推荐选择低分辨率但RAM至少为512MB的设置,以确保能够顺利运行可能占用较大资源的应用。 在应用设计方面,计算器能够处理小数的加减乘除运算,并且当结果过大时自动切换到科学...

    计算器app_20172131133夏镇雄1

    2. **UI设计**:UI设计借鉴了苹果手机自带的计算器样式,考虑到横版和竖版两种模式,分别设计了不同的用户界面。在竖版中,界面包含了基本的数字、四则运算、百分号和正负号;横版则增加了更多的高级运算功能。由于...

    Android Game2048游戏代码

    Android的GridView或者TableLayout可以实现这种布局,但考虑到性能和自定义性,开发者可能选择使用自定义ViewGroup来绘制游戏板。每个单元格的状态(数字、空白)和位置会被存储在一个二维数组中,这是数据驱动UI的...

    Android视频教程第一季第10集源码

    这样,你可以创建一个通用的设计部分,然后在多个地方重复使用。 7. 容器内的嵌套布局: 一个布局可以包含其他布局,这种嵌套布局的方式可以实现更复杂的用户界面设计。例如,"Layout_04"可能包含了一个线性布局和...

    Android 自定义View实现体育赛事积分表效果

    2. 布局设计:考虑表格的行数、列数,以及如何展示队伍排名。可以使用GridLayout或TableLayout,或者自定义布局管理器。 3. 文本绘制:使用Canvas.drawText()方法绘制队伍名和得分,注意调整字体大小、颜色和对齐...

    连连看.rar

    - 配置项目的build.gradle文件,确保支持目标设备所需的最低API级别,同时考虑兼容性和性能优化。 2. **UI设计** - 在res/layout目录下创建布局文件,使用XML语法定义连连看的游戏棋盘。可以使用GridLayout或...

    4款Android游戏源码(连连看,推箱子,坦克大战,五子棋)

    在Android中,通常会使用Bitmap来处理图像,并通过GridLayout或TableLayout来组织游戏板。游戏逻辑包括检测两个可消除元素之间的路径,这可能需要用到深度优先搜索(DFS)或广度优先搜索(BFS)。此外,计时器和动画...

Global site tag (gtag.js) - Google Analytics