用ExtJS搭建一个管理后台框架 -家事国事天下事,事事关心

/**
* @author Json Lee
* Wathon 项目Javascript基本命名空间
*/

var Wathon = function(){}

Wathon.Admin = Wathon.prototype = {

    /**
     * 测试方法
     */
    hello : function(){
        alert("Hello Wathon Team.");
    },

    /**
     * 显示消息提示
     * @param {Object} msg 消息内容
     * @param {Object} type 类型 1成功 0错误
     * @param {Object} animElName 动画来自的对象的名称
     */
    showMessage:function(msg,type,animElName){

        var icon;
        if(type == 1){
            icon = Ext.MessageBox.INFO;
        }
        else{
            icon = Ext.MessageBox.ERROR;
        }

        Ext.Msg.show({
            title:"提示消息",
            msg:msg,
            buttons:Ext.Msg.OK,
            animEl:animElName,
            icon:icon
        });
    },

    /**
     * 载入完成，关闭Loading
     */
    closeLoading : function(){
        setTimeout(function(){
            $('#loading').remove();
            $('#loading-mask').fadeOut(500,function(){
                $(this).remove();
            });
        }, 250);
    }
}

$(document).ready(function(){
    Wathon.Admin.closeLoading();
})

/**
* @author Json Lee
* 管理后台首页的JS
*/
Wathon.Admin.Index = Wathon.Admin.prototype = {

    /**
     * 初始化页面
     */
    init: function(el){

        /**
         * 主框架加载
         */
        if (this.panelMain == null) {
            panelMain = new Ext.Viewport({
                layout:"border",
                items:[
                    this.top,
                    this.bottom,
                    this.toolbox,
                    this.maincontent
                ]
            });

        }

        /**
         * 以下是工具栏的加载
         */
        this.toolbar.render("panelToolbar");
        this.toolbar.add({
            text:"管理菜单",
            iconCls:"bmenu",
            menu:[{
                id:"mnuMain",
                items:[{
                    text:"更改密码

",
                    id:"mnuChangePassword",
                    checkHandler:this.mnuChangePassword_click
                }]
            }]
        });
    },

    panelMain:null,

    /**
     * 页头
     */
    top:new Ext.BoxComponent({
        region:"north",
        el:"panelTop",
        margins:"0 0 5 0"
    }),

    toolbar: new Ext.Toolbar(),


    /**
     * 页脚
     */
    bottom:new Ext.BoxComponent({
        region:"south",
        el:"panelBottom",
        margins:"5 0 0 0"
    }),

    /**
     * 工具箱
     */
    toolbox:{
           region:'west',
        title: '工具箱',
        collapsible: true,
        split:true,
        width: 225,
        minSize: 175,
        maxSize: 400,
        layout:'fit',
        margins:'0 0 0 5',
        items:[
            new Ext.TabPanel({
                border:false,
                activeTab:0,
                tabPosition:'bottom',
                items:[{
                    html:'<p>这里是常用工具箱</p>',
                    style:"padding:5px;",
                    title: '常用工具',
                    autoScroll:true
                }]
            })
        ]
    },

    /**
     * 主内容
     */
    maincontent:new Ext.TabPanel({
        region:'center',
         margins:'0 5 0 0',
        deferredRender:false,
        activeTab:0,
        items:[{
            contentEl:'panelContent',
            title: '首页',
            style:"padding:5px;",
            closable:true,
            autoScroll:true
        }]
    }),

    /*
     * 以下的是事件
     */

    /**
     * 更改密码菜单事件
     */
    mnuChangePassword_click : function(){
        alert("您点击了更改密码");
    }
}

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var index = Wathon.Admin.Index;

    index.init();

})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>ExtJs页面框架演示 - www.wathon.com</title>
    <link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="styles/html.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="styles/index.css" />
    <script src="scripts/ext/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/ext/jquery-plugins.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/ext/ext-jquery-adapter.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/ext/ext-all.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/Wathon.Admin.js"></script>
    <script type="text/javascript" src="scripts/Wathon.Admin.Index.js"></script>
</head>
<body>
    <div id="loading-mask" style=""></div>
    <div id="loading">
        <div class="loading-indicator"><img src="images/ext/extanim64.gif" width="64" height="64" style="margin-right:8px;" align="absmiddle"/>系统加载中，请稍候

</div>
    </div>
    <div id="panelTop">
        <div class="header"><h1>ExtJS页面框架 - 网站管理后台<samp>版本:X.x.x</samp></h1></div>
        <div id="panelToolbar" style="height:28px;">

        </div>
    </div>

    <div id="panelContent">
        <p>
            ExtJs页面框架演示
        </p>
        <p>
            作者：李华顺<br />
            博客：<a href="http://huacn.cnblogs.com">http://huacn.cnblogs.com</a>
        </p>
        <p>
            本页是演示如果通过JS实现页面框架的例子，主要使了Ext里面 Ext.Viewport 、Ext.BoxComponent 、Ext.Toolbar 、Ext.TabPanel 等组件。<br />
        </p>
    </div>
    <div id="panelBottom"></div>
</body>
</html>