Extjs-ViewReport与Resizable的使用

posted by David Chen at April 26, 2008, 6:26 AM

VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，
一个 页面中只能有一个ViewPort实例。
region: (string)
在ViewPort的items里面放panel的时候,panel多了一个属性region,取值为center,west,north,east,south, 
至少要指定一个center属性,不然会出错。
如果panel中指定了 collapsible: true, 那么会自动出现 expand/collapse toggle button, 上下收展或左右
收展的按纽, region: 'west',那么就变成了左右收展的按纽, region: 'north'又变成了上下收展的按纽
split: (bool)
同时pnael也多了一个属性split,如果为true,则会自动给panel之间添加间隔, 且该split是可以拖拉的
viewpoort.render(); // 如果 vewport中有的组件被拖到别的地方，调用这个可以使用组件返回原来位置

----------------------------------------

Resizable因为第一个参数是 html Id,所以必须在该Id已经render到body中后才使其变为可缩放对象
如果是一个grid要通过store来加载数据的，那么grid的height是有可能变化的，应该在store在load
了的时候给grid设为可缩放, Resizable初始的高度可能是错误的。
function resizeable() {
        new Ext.Resizable("grid_id", {
                handles: 's',
                /* 'n' north, 's' south,'e' east,'w' west,'nw' northwest,
                   'sw' southwest,'se' southeast,'ne' northeast,'all'
                */
                pinned:true, //总是显示,false,就当鼠标移上时显示
                dynamic: true,
                minWidth: 200,
                minHeight: 200,
                maxWidth: 500,
                maxHeight: 500
        });
}
// 给store添加load完毕后的监听器
store.addListener('load', function() {
        resizeable();
});