easyui 初始加载时页面样式乱的解决方法

html：

    <div class="easyui-layout" data-options="fit:true,border:false" style="background: #ccc;display:none" id="dorLayout">
        <div data-options="region:'west',split:true,border:false" style="width: 240px;border-right:1px solid #95B8E7;">
            <ul id="mnuDorStruct"></ul>
        </div>
        <div id="formContent" data-options="region:'center',split:true,title:'编辑宿舍结构',border:false" style="width: 240px; border-left:1px solid #95B8E7;">
            <div class="easyui-panel" id="divStructCenter" data-options="border:0">
                @{Html.RenderPartial("add");}
            </div>

        </div>
    </div>

这个页面加载时样式会乱一下，然后才会好起来，采用了先隐藏再显示的笨方法，加载完了再显示

$(document).ready(function () {
    divStructCenter = $('#divStructCenter')
    dorTree = $('#mnuDorStruct');
    dorLayout = $('#dorLayout');

    //让layout正常显示
    showLayout(dorLayout, 'west', 240);

    ///刷新工作区的大小，以避免layout在延迟加载后内部元素宽度为0
    resizeWorkArea(dorLayout, divStructCenter);

    dorTree.tree({
        url: listurl,
        onSelect: function (node) {
            if (node.state == 'closed') {
                dorTree.tree('expand', node.target);
                node.state = 'open';
            }
            else {
                dorTree.tree('collapse', node.target);
                node.state = 'closed';
            }
        },
        onClick: function (node) {
            if (node.tag != "") {
                view(node.id);
            }
        }
    });

});

其中showLayout和resizeWorkArea方法是为了解决细节问题，即左侧树和工作区的正常显示，不加的话整个界面会乱七八糟。

//让layout正常显示
function showLayout(layout, region, width) {
    layout.css('display', 'block');//防止界面加载时变样
    //不加此句，会导致west面板不在layout内
    layout.layout('add', {
        width: width,
        region: region
    });
}

///刷新工作区的大小，以避免layout在延迟加载后内部元素宽度为0
function resizeWorkArea(parentLayout, workPanel) {
    var pp = parentLayout.layout('panel', 'center');
    workPanel.panel('resize', { width: pp.clientWidth, height: pp.clientHeight });
}