ExtJS Grid

ExtJs关于grid高度自适应浏览器的问题解决办法

ExtJs中对于grid适应高度问题相信很多人都遇到过,宽度当然好说,高度设置了百分比结果始终不能适应容器高度。

解决思路是,加载完成时,获取document对象的高度,减去grid上面其他panel的高度(如果页面只有一个grid的话可以省去这一步),然后结果付给grid的高度。

当浏览器高度变化的时候,调用window对象的onresize方法,再次按照上述步骤,重新调整grid的高度。实现自适应高度。

//设置grid高度
    grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
    //窗口重绘时改变grid高度
    window.onresize=function(){
        grid.setHeight(document.body.clientHeight-Ext.get('topPanel').getHeight());
    };

TetrisGrid:基于ExtJs Grid实现的一个俄罗斯方块

本实例基于ExtJs、GridPanel组件开发!Ext的Grid的功能、是史无前例的强大、这是无可厚非的!而现在、Master带领你们领略Grid另一个强大功能!没错、它就是TetrisGrid!
Tetris大家都玩过吧!经典中的经典!当你在ExtJs的GridPanel中植入这已游戏的、你是什么心情?绝对的震惊!
以上言论纯属瞎扯、不喜勿喷!仅以此作供大家了解Grid的功能,娱乐之作!
UI小子前端社区、期待你的加入

说明:基于ExtJs3.X版本的GridPanel组件实现、通过对Store的增、删、改、查、渲染...功能的深入解析、使用...

(使用说明)
操作:键盘方向键:up:旋转、left:左移,right:右移

ExtJS 4.2 Grid预览

随着新的ExtJS 4.2 Beta版本的发布,又发生了一系列的的变化。可以通过论坛公布的说明来了解完整的细节。在本文,将突出讲述Grid组件的性能改善。

在之前发表的《Ext JS 4.1性能》和《优化基于Ext JS 4.1的应用》中,强调了改进Grid组件的缓冲能力。Ext JS 4.2进一步提高了缓冲渲染的性能,并允许在更多情况下,以更少的配置来使用此功能。得益于这些优化,大型数据的应用程序的响应速度应该可以看到显著的提高。

Ext JS 4.1与Ext JS 4.2中的Grid的对比

在Ext JS 4.1,Grid组件每当用户滚动到缓冲区域时,物理上会重新渲染表格中的行。例如,假设Grid每次渲染50行数据,如果Grid当前显示的是100到150行,而用户往下滚动到105行的记录,Grid将会重新渲染表格的行以显示105行到155行的记录。


聚合内容