Extjs table layout 控制宽高，实现类似win10开始菜单分屏效果的

1.期望效果

类似win10开始菜单（如下图），将页面切成m*n个单元格，然后将内容放到单元格里，用colspan、rowspan控制所占区域大小。

2.Extjs table layout

Extjs table layout 是对css table layout的简单封装，无法通过 tableAttrs, tdAttrs, trAttrs 实现对内容高度的绝对控制，各种不可控，以至于有人说：“I never use table layout. I haven't yet seen a real use case where it wasn't better to use an alternative layout (usually VBox and HBox in some combination). All sorts of strange things happen using a table layout. ”。

但用vbox+hbox又做不到一行中table layout这么灵活的组合。

3.换个思路

既然table layout不能直接控制住内容的高度，干脆就只让table layout划分单元格，单元格中的内容高度、宽度由代码控制，确保不超高超宽。

4.主要代码

//只用最简单的风格设置
layout = {
    type: 'table',
    columns: maxcol //根据配置的内容计算
},

//代码控制内容（items）的宽高
onResize: function(width, height, oldWidth, oldHeight) {
    var me = this;
    Ext.suspendLayouts();
    for(var item of me.items.items){
        item.setHeight(item.rowspan*height/me.maxrow);
        item.setWidth(item.colspan*width/me.maxcol);
    }
    Ext.resumeLayouts(true);
}