easyui panel自适应问题

项目中要用到easyui，使用也有几年时间了，刚开始使用还不错，毕竟只是简单的增删改查数据，不过到后面越来越觉得easyui不如extjs了，好多复杂一点的问题，easyui表现就力不从心了，题外话就讲到这吧，下面看看这个问题是如何解决的：

$(function () {
   $.fn.zTree.init($("#tree"), setting);
    initTopoConfig();
    showTopo(0);
    stage.wheelZoom = 0.85; // 设置鼠标缩放比例
    $("#undo").hide();
});

//初始化拓扑图配置
function initTopoConfig() {
    $("#center").append('');
    var canvas = document.getElementById('canvas');
    $("#main").panel({
        onResize: function (w, h) {
            canvas.width = w-30;
            canvas.height = h - 20;
        }
    });
    stage = new JTopo.Stage(canvas);
    scene = new JTopo.Scene(stage);
    setScene();
}
<body onselectstart="return false" class="easyui-layout" style="margin: -1px;">
    <div id="myposition" data-options="region:'west',split:true,title:'交换机列表'" style="width: 250px;">
        <ul id="tree" class="ztree">
        </ul>
    </div>
    <div id="center" data-options="region:'center',border:false,fit:true">
        <div id="main" fit="true">
            <div id="tool" style="background-color: #f5f5f5; border-bottom: 1px solid #ddd">
                <table>
                    <tr>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addRouter()">
                                添加路由</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addChildrenTopo()">
                                添加子图</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="save()">
                                保存</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-zoomin" plain="true" onclick="zoomout()">
                                放大</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-zoomout" plain="true" onclick="zoomin()">
                                缩小</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-resize" plain="true" onclick="fitContent()">
                                自适应</a>
                        </td>
                        <td>
                            <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" style="text-align: center"
                                data-options="iconCls:'icon-reload'" onclick="javascript:location.reload();">刷新页面</a>
                        </td>
                        <td id="undo">
                            <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="before()">
                                返回上一级</a>
                        </td>
                    </tr>
                </table>
            </div>
            <canvas id="canvas"></canvas>
        </div>

总结：要把id为tool的div放到main里面，要不然就会出现自适应不成功的问题。

posted @ 2015-08-26 16:16  Seaurl  阅读(1435)  评论(0)  编辑  收藏  举报