IndexPage = Ext.extend(Ext.Viewport, {
    /**
     * 中间区域
     */
    center : new Ext.TabPanel({
                id : "MainTab",
                region : "center",
                activeTab : 0,
                autoScroll : true, // 自动添加滚动条
                height : 80,
                split : true, // 添加分割线
                plugins : new Ext.ux.TabCloseMenu(),
                items : {
                    closeable : true,
                    iconCls : "zhangsong-homeTabIcon", // tab页图片样式
                    title : "首页"
                }
            }),
    /**
     * 构造方法
     */
    constructor : function() {
        /**
         * 将父类的构造拷贝过来
         */
        IndexPage.superclass.constructor.call(this, {
            layout : "border", // 指定布局为border布局
            items : [{
                        region : "west",
                        xtype : "panel",
                        layout : "accordion", // 手风琴布局
                        title : "HRM-人力资源管理系统",
                        split : true, // 添加分割线
                        collapsible : true, // 自动伸缩
                        width : 200, // 宽度
                        layoutConfig : {
                            // 展开折叠是否有动画效果
                            animate : true
                        },
                        // 事件监听
                        listeners : {
                            'expand' : {
                                fn : this.onExpandPanel,
                                scope : this
                            },
                            'collapse' : {
                                fn : this.onCollapsePanel,
                                scope : this
                            }
                        },
                        items : [{
                            title : "控制面板", // 标题
                            iconCls:"zhangsong-checkIcon",
                            xtype : "treepanel", // 指定类型为树面板
                            autoScroll : true, // 自动添加滚动条
                            border : false, // 不要边框
                            id : "mytree",
                            tools : [{
                                        id : 'refresh', // 刷新按钮
                                        handler : this.onRefreshTreeNodes,
                                        scope : this
                                    }],
                            // 树的加载器
                            loader : new Ext.tree.TreeLoader({
                                        // tree数据的远程服务器地址,相当于proxy,每次请求会将node的id值传递给服务器
                                        dataUrl : "treeNode.do?operator=showNode"
                                    }),
                            // 根节点
                            root : new Ext.tree.AsyncTreeNode({
                                        text : "人力资源管理系统",
                                        iconCls : "zhangsong-treeRootIcon",
                                        id : "1"
                                    }),
                            // 监听事件
                            listeners : {
                                "click" : {
                                    fn : this.onTreeNodeClick,
                                    scope : this
                                }
                            }
                        }]
                    }, this.center, {
                        region : "south", // 南方布局
                        split : true, // 添加分割线
                        xtype : "panel", // 用panel作为容器