Ext.net自動保存讀取GrdPanel列顯示狀態

//layout保存
function SaveLayOut() {
    let colVisibleArray = [];
    for (var i = 0; i < mcp_gridlist.colModel.columns.length; i++) {
        let dataIndex = mcp_gridlist.colModel.columns[i]["dataIndex"];
        let hidden = mcp_gridlist.colModel.columns[i]["hidden"];
        colVisibleArray.push({ dataIndex, hidden });
    }
    localStorage.setItem("345223ColumnState", JSON.stringify( colVisibleArray));
    console.log("保存佈局");
}
//layout讀取
function LoadLayOut() {
    let colVisibleArray = JSON.parse(localStorage.getItem("345223ColumnState"));
    if (colVisibleArray != undefined) {
        for (var i = 0; i < colVisibleArray.length; i++) {
            let colName = colVisibleArray[i]["dataIndex"];
            var findCol = -1;
            if (colName != '') {
                for (var j = 0; j < mcp_gridlist.colModel.columns.length; j++) {
                    let dataIndex = mcp_gridlist.colModel.columns[j]["dataIndex"];
                    if (colName == dataIndex) {
                        findCol = j;
                        break;
                    }
                }
                if (findCol >= 0) {
                    let hidden = colVisibleArray[i]["hidden"];
                    if (hidden === true) {
                        mcp_gridlist.getColumnModel().setHidden(findCol, true)
                    }
                    else {
                        mcp_gridlist.getColumnModel().setHidden(findCol, false)
                    }
                }
                
            }

        }
    }
    console.log("讀取佈局");
}

 當顯示隱藏列是自動調用SaveLayOut,在Ext.OnReady裏添加以下代碼

mcp_gridlist.colModel.on('hiddenchange', function () {
    //監聽的具體內容 
    SaveLayOut();
});LoadLayOut();

 

這樣當點列頭隱藏列時，就會自動保存，下次刷新頁面時候保留隱藏狀態

事件查看方法(Ext.net官方文檔裏沒有講解，參考Extjs實現）