Extjs 4简单后台首页

ps:

都说java开源很给力，但是国内的java大神与.NET的大神相比差远了，闷骚死了。。。

下面虽只有代码和部分注释，但是很容易懂的（时间较忙，请见谅）

 

Ext.Loader.setConfig({
        enabled : true
    });
    Ext.Loader.setPath('Ext.ux', '../ext/ux');
    Ext.onReady(function() {
        //创建菜单树
        var menuTree = Ext.create('Ext.tree.Panel', {
            border : false,
            useArrows : true,
            height : 65535,
            width : '100%',
            rootVisible : false, //不显示根节点 
            id : 'menu_tree',
            root : {
                text : '导航菜单',//节点名称
                expanded : true,//默认展开根节点
                children :
                //所有节点的JSON字符串：
                [ {
                    "children" : [ {
                        "children" : [],
                        "cls" : "file",
                        "id" : "xuesheng",
                        "leaf" : true,
                        "text" : "学生管理"

                    //"hrefTarget" : "tabPanel"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开

                    }, {
                        "children" : [],
                        "cls" : "file",
                        "id" : "kaoshi",
                        "leaf" : true,
                        "text" : "考试信息"

                    } ],
                    "cls" : "folder",
                    "id" : "node_1",
                    "leaf" : false,
                    "text" : "系统管理",
                    "hrefTarget" : "biz_js/syscfg.js"
                } ]

            },
            listeners : {//tree节点事件监听器

                //当点击节点时，执行函数：
                'itemclick' : function(view, selectedItem) {

                    /*
                        业务流程：当用户点击tree节点的时候，Extjs获取当前被选中的节点对象，
                        并在tab容器tabpanel中尝试获取对应的tab组建对象。
                        如果该对象不为undefined，说明该tab之前已经创建过，
                        则调用tab容器tabpanel.setActiveTab(tab)方法显示此tab，
                        如果该对象为undefined，则说明被选中节点还没有创建对应的tab，
                        那么就调用tab容器tabpanel的add方法传入当前被选中节点对象动态添加创建tab。
                    
                        选项卡的内容区域的呈现方式有两种可选方案：
                        一是采用异步加载js文件的方式，二是采用iframe框架嵌入目标页面的方式。这里采用了第一种方式。
                     */

                    //获得tab容器tabpanel
                    var tabPanel = Ext.getCmp('tabPanel');

                    //获得被选中的tab组建对象
                    var tab = tabPanel.getComponent(selectedItem.data.id);

                    //如果此tab还未被创建，则向tab容器添加一个tab
                    if (!tab) {
                        if (selectedItem.data.leaf == false) {
                            return;
                        }
                        tab = tabPanel.add({
                            id : selectedItem.data.id,
                            title : selectedItem.data.text,
                            closable : true,
                            autoWidth : true,
                            autoHeight : true,
                            autoLoad : {
                                url : selectedItem.data.id + '.html',
                                scripts : true,
                                nocache : true,
                                loadMask : '正在载入页面',
                                failure : '页面无法载入',
                                params : {
                                    test : 1
                                }
                            },
                            active : true
                        //html : '<p>id:+ selectedItem.data.id
                        });

                        //将tab设置为当前可见可操作tab
                        tabPanel.setActiveTab(tab);//其实这步是多余的，但是在IE9下，没这步就显示不正常。

                        //异步加载js并执行，参数为要加载的JS文件的URL，这个JS包含tab内容区内容的构建程序。
                        //loadJS(selectedItem.data.hrefTarget);//此函数为自定义函数，已在上面定义。
                    }

                    //将tab设置为当前可见可操作tab
                    tabPanel.setActiveTab(tab);

                }
            }
        //,
        });

        Ext.create('Ext.container.Viewport', {
            layout : 'border',//Border布局
            items : [ {

                html : '<br><center><font size = 6>欢迎登录xx系统</font></center>',
                region : 'north',//指定子面板所在区域为north
                height : 100
            }, {

                title : '功能菜单',
                items : menuTree,
                split : true,
                collapsible : true,
                region : 'west',//指定子面板所在区域为west
                width : 180
            }, Ext.create('Ext.tab.Panel', {
                id : 'tabPanel',
                region : 'center', //中心区在框布局中是必须定义的
                deferredRender : false,
                activeTab : 0, //设置第一个选项卡为默认显示的
                plugins : Ext.create('Ext.ux.TabCloseMenu', {
                    closeTabText : '关闭当前',
                    closeOthersTabsText : '关闭其他',
                    closeAllTabsText : '关闭所有',
                    extraItemsTail : [ '-', {
                        text : '可关闭',
                        checked : true,
                        hideOnClick : true,
                        handler : function(item) {
                            currentItem.tab.setClosable(item.checked);
                        }
                    } ],
                    listeners : {
                        aftermenu : function() {
                            currentItem = null;
                        },
                        beforemenu : function(menu, item) {
                            var menuitem = menu.child('*[text="可关闭"]');
                            currentItem = item;
                            menuitem.setChecked(item.closable);
                        }
                    }
                }),
                items : [ {
                    id : 'mytab1',
                    html : '<p>这里是主页</p>',
                    title : '主页',
                    //icon : 'resources/icons/information.png',
                    closable : false,
                    autoScroll : true
                } ]

            })

            ]
        });
    });

 注意：子页面不需要引入Extjs相关的js文件，因为这个页面不是通过iframe创建tab的，还有子页面还需要添加以下类似的代码，不然子页面不能运行

Ext.Loader.setConfig({
            enabled : true
        });
Ext.Loader.setPath('Ext.ux', '../ext/ux');
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.ux.RowExpander',
        'Ext.selection.CheckboxModel', 'Ext.form.*', 'Ext.ux.form.SearchField',
        'Ext.toolbar.Paging', 'Ext.util.*']);