common_003.js

一个自娱自乐的demo 开发环境 apache-tomcat-6.0.16 Mysql 5.1.11 Jdk 1.6 文件结构如下 --MyGame -----MyGam

Ext.onReady(function(){
    Ext.QuickTips.init();
    
    /** Menu Tree Div */
    var menutreeDiv = new Ext.Panel({
        region: 'west',
        id: 'menutreeDiv',
        el: 'menutreeDiv',
        title: ' ',
        split: true,
        width: 200,
        minSize: 50,
        maxSize: 400,
        collapsible: true,
        margins: '0 0 0 2',
        contentEl: 'menutreeContent',
        animate: true,
        tools: [{
            id: 'refresh',
            qtip: '同  步',
            on: {
                click: synchMenuTree
            }
        }]
    });
    
    /** Work Div */
    var workDiv = new Ext.Panel({
        region: 'center',
        id: 'workDiv',
        el: 'workDiv',
        split: true,
        collapsible: true,
        animate: true,
        margins: '0 2 0 0',
        html: '<iframe id="workFrame" name="workFrame" src=""></iframe>'
    });
    
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [new Ext.BoxComponent({ // raw
            region: 'north',
            id: 'toolbarDiv',
            el: 'toolbarDiv',
            margins: '0 2 0 2',
            height: 31
        }), menutreeDiv, workDiv]
    });
    /** 菜单树区域尺寸调整 */
    doMenuTreeContentLayout();
    /** 工作区区域尺寸调整 */
    doWorkFrameLayout();
    
    Ext.getCmp("menutreeDiv").on('bodyresize', function(){
        Ext.getCmp("menutreeDiv").doLayout();
        doMenuTreeContentLayout();
    }, this);
    
    Ext.getCmp("workDiv").on('bodyresize', function(){
        Ext.getCmp("workDiv").doLayout();
        doWorkFrameLayout();
    }, this);
    
});
/** 菜单树区域尺寸调整 */
function doMenuTreeContentLayout(){
    Ext.get("menutreeContent").setWidth(Ext.getCmp("menutreeDiv").getInnerWidth());
    Ext.get("menutreeContent").setHeight(Ext.getCmp("menutreeDiv").getInnerHeight());
}

/** 工作区区域尺寸调整 */
function doWorkFrameLayout(){
    Ext.get("workFrame").setWidth(Ext.getCmp("workDiv").getInnerWidth());
    Ext.get("workFrame").setHeight(Ext.getCmp("workDiv").getInnerHeight());
}

/** 菜单节点选中 */
function menuNodeClick(){
    workDivInit();
}

/** 菜单树加载中 */
function menutreeDivInit(){
    var menutreeDiv = Ext.getCmp('menutreeDiv');
    menutreeDiv.body.mask('加载中...', 'x-mask-loading');
}

/** 菜单树加载完毕 */
function menutreeDivInitFinish(){
    var menutreeDiv = Ext.getCmp('menutreeDiv');
    menutreeDiv.body.unmask();
}

/** 工作区加载中 */
function workDivInit(){
    var workDiv = Ext.getCmp('workDiv');
    workDiv.body.mask();
    //workDiv.body.mask('加载中...', 'x-mask-loading');
}

/** 工作区加载完毕 */
function workDivInitFinish(){
    setTimeout(function(){
        var workDiv = Ext.getCmp('workDiv');
        if (workDiv != null) {
            workDiv.body.unmask();
        }
    }, 100);
}

/** 菜单树的数据重新加载 */
function synchMenuTree(){
    menutreeDivInit();
    document.forms['menuTreeForm'].elements['menuTreeForm:synchMenuTreeBtn'].onclick();
}