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);
}