ext-main.js

Ext.onReady(function() {

    Ext.BLANK_IMAGE_URL = 'images/s.gif';
    Ext.QuickTips.init();
    Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
   



    // 1、创建head部分
       var tb=new Ext.Toolbar({
          height: 29,
          margins:"0 10 0 10",
          items:[
              {text:"摘机"},
              {xtype:"tbseparator"},
              {text:"挂机"},
              {xtype:"tbseparator"},
              {text:"复位"},
              {xtype:"tbseparator"},
              {xtype:"tbfill"},//加上这句，后面的就显示到右边去了
              {xtype:"tbtext",text:"服务器状态: "},
              {xtype:"tbtext",text:"正常"},
              {xtype:"tbseparator"},
              {xtype:"tbtext",text:"线路状态: "},
              {xtype:"tbtext",text:"正常"},
              {xtype:"tbseparator"},
              {xtype:"tbtext",text:"坐席状态: "},
              {xtype:"tbtext",text:"正常"},
              {xtype:"tbseparator"},
              {xtype:"tbtext",text:"本机号码: "},
              {xtype:"tbtext",text:"106"},
              {xtype:"tbseparator"},
              {xtype:"tbtext",text:"队列等待数:"},
              {xtype:"tbtext",text:"10"},
              {xtype:"tbseparator"},
              {xtype:"tbtext",text:"来电号码: "},
              {xtype:"tbtext",text:"83110320",width:100},
              {xtype:"tbseparator"}
]
             });
        var head = new Ext.Panel( {
            region : 'north',
            border : false,
            height : 65,
            items :[{
                       html : '<div style="background:url(images/bg_bar.gif) repeat-x; height:36px;">'
                               +'<div style="background: url(images/bg_logo.gif) no-repeat 0 0;height:36px;">'
                               + '<div    style="float:right;margin:10px;font:normal 12px tahoma, arial, sans-serif, 宋体;" >'
                               + '<a href="#" onclick="javascript:window.close(); return false;" style="color: white">修改密码</a>&nbsp;&nbsp;&nbsp;'
                               + '<a href="#" onclick="javascript:window.close(); return false;" style="color: white">注销</a>&nbsp;&nbsp;&nbsp;'
                                  + '<a href="#" onclick="javascript:window.close(); return false;" style="color: white">关闭</a>&nbsp;&nbsp;&nbsp;'
                               +'</div></div></div>'
                      },
                      tb
                    ]
           
        });
       
        // 2、创建foot部分
        var foot = new Ext.Panel( {
            region : 'south',
            html : '<div style="height:25px; ">'
            +'<div style="float:left;font:normal 12px tahoma, arial, sans-serif, 宋体;margin:6px;">'
            + '上次登录IP: 192.168.18.201&nbsp;&nbsp;&nbsp;上次登录时间: 2010-05-01 14:32:21</div>'
            + '<div    style="float:right;margin:7px;font:normal 12px tahoma, arial, sans-serif, 宋体;" >'
            + '版权所有：南京广建科技有限公司</a></div>'
            + '</div>',
            height : 25
        });
       

        // 3、创建leftMenu部分
        // var leftmenu = new Ext.Panel( {
        // region : 'west',
        // html : '<div>导航菜单</div>',
        // width : 200
        // });

        // 4、创建主内容部分
        // var mainTab = new Ext.Panel( {
        // region : 'center',
        // html : '<div>主内容部分</div>'
        // });
        var loader = new Ext.tree.TreeLoader({
                 url:'treedata.js'
             });
        var t1 = new Ext.tree.TreePanel( {
            border : false,
            rootVisible : false,
            root : new Ext.tree.AsyncTreeNode( {
                text : "我的办公桌",
                expanded : true,
                loader:loader
            })
        });

        var t2 = new Ext.tree.TreePanel( {
            border : false,
            rootVisible : false,
            root : new Ext.tree.AsyncTreeNode( {
                text : "主数据管理",
                expanded : true,
                children : [ {
                    id : "department",
                    text : "部门管理",
                    leaf : true
                }, {
                    id : "company",
                    text : "公司管理",
                    leaf : true
                }, {
                    id : "permissions",
                    text : "权限管理",
                    children : [ {
                        id : "permission",
                        text : "权限管理",
                        leaf : true
                    }, {
                        id : "permissionType",
                        text : "权限类别",
                        leaf : true
                    }]
                }]
            })

        });

        var leftmenu = new Together.Office.LeftMenu( {
            title : '功能菜单',
            trees : [t1, t2]
        });

        var mainTab = new Together.Office.MainingPanel( {
            style : 'padding:0 6px 0 0',
            autoScroll : true,
            region : 'center',
            deferredRender : false,
            activeTab : 0,
            resizeTabs : true,
            inTabWidth : 100,
            tabWidth : 90,
            enableTabScroll : true,
            items : [{
                title : '首页',
                iconCls:'index',
                html : '<div style="background:url(images/main.gif) no-repeat center middle; height:508px;"></div>'
            }]
        });

        // 5、建立leftmenu和mainTab两者之间的关系
        leftmenu.on("nodeClick", function(nodeAttr) {
            mainTab.loadTab(nodeAttr);
        });
        // 6、创建布局
        var viewport = new Ext.Viewport( {
            layout : 'border',
            style : 'border:#024459 2px solid;',
            items : [head, foot, leftmenu, mainTab]
        });

    });