正文

Extjs 3.3.1框架2011-06-23 19:53:00

【评论】 【打印】 【字体：大 中 小】 本文链接：http://blog.pfan.cn/lovebugs/52626.html

分享到：

主jsp页面如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork"%>
<%@ taglib prefix="lovebugs" uri="http://www.lovebugs.cn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>VVV</title>
<link rel="stylesheet" type="text/css" href="js/ext331/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="js/ext331/resources/css/yourtheme.css" />
<link rel="stylesheet" type="text/css" href="js/ext331/resources/docs.css" />
<link rel="stylesheet" type="text/css" href="js/ext331/resources/style.css" />   
<link rel="shortcut icon" href="js/ext331/resources/favicon.ico" />
<link rel="icon" href="js/ext331/resources/favicon.ico" />
<style type="text/css"></style>
<script type="text/javascript">var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1396058-8']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script>

<script type="text/javascript" src="js/ext331/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext331/ext-all.js"></script>
<script type="text/javascript" src="js/ext331/ux/TabCloseMenu.js"></script>
<script type="text/javascript" src="js/ext331/docs.js"></script>
<script type="text/javascript">
   _tabs=[${strmenus}];
   function  hideAllMenu() {
     Ext.menu.MenuMgr.hideAll();
   }
</script>
<style>
<!--
.x-toolbar-ct {
  background-color:#eeeeee;
}
-->
</style>
</head>
<body scroll="no" id="docs">
<div id="loading-mask"></div>
<div id="loading">
    <div class="loading-indicator">
        <img src="resources/default/images/loading/progress.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle" />
        Loading&hellip;
    </div>
</div>
<div id="header">
    <div style="float:right;color: #FF0000;position:relative;top:5px;right:15px;">
        <a href="#" style="padding:5px">用户信息</a> |
        <a href="loginout.shtml">退出</a>
    </div>
</div>
<div id="main"></div>
<div id='win_template'> </div>
</body>
</html>


docs.js是整个框架的脚本

Ext.BLANK_IMAGE_URL = 'js/ext331/resources/s.gif';
/*全局变量*/
var _navigation=null;
var _load = null;
var _tabs = [{url:"usermanager.shtml",text:"用户管理",icon:"icon-user",items:[{url:"usermanager.shtml",text:"认证用户管理",icon:"icon-acuser"}
                                                           ,{url:"groupmanager.shtml",text:"用户组管理",icon:"icon-group"}
                                                           ,{url:"sysuser.shtml",text:"系统用户管理",icon:"icon-user"}]}
            ,{url:"usermanager.shtml",text:"上下线信息",icon:"icon-user",items:[{url:"usermanager.shtml",text:"用户管理"}
                                                           ,{url:"usermanager.shtml",text:"组管理"}]}
           ];
var _topH = 55;
var _topToolbar=null;
function _push(index,o){
  if(null!=_navigation) {
     _navigation.push(index,o.href,o.innerHTML);
  }
}
/*导航*/
Navigation = function() {
  var navigation_pre="<div style='height:20px;'><label>当前位置：</label>";
  var navigation_end="</div>";
  return {
    nav_arr:[],
    toStr:function() {
     var str_nav = navigation_pre;
     for(var i=0;i<this.nav_arr.length;i++) {
        if(i==0) {
          str_nav+=this.nav_arr[i];
        }else{
          str_nav=str_nav+" >> "+this.nav_arr[i];
        }
     }
     str_nav += navigation_end;
     return str_nav;
    },
    /*index为菜单级，tab为0级*/
    push:function(index,href,title) {
           if(href==''){
               var a = title;
           }else{
               var a = "<a href='"+href+"' target='mainframe' onclick='javascript:_push("+index+",this)'>"+title+"</a>";
           }
     
      /*变更当前节点的值 消掉多余的项*/
      if(this.nav_arr.length-1>index) {
         this.nav_arr.length=index+1;
         this.nav_arr[index]=a;
      }else if(this.nav_arr.length-1<index){
         this.nav_arr[index] = a;
      }else {
        this.nav_arr[index]=a;
      }
    },
    remove:function() {
     
    },
    update:function() {
     if(null!=_topToolbar) {
       Ext.get(_topToolbar.items.get(0).id).dom.innerHTML=this.toStr();
     }
    }
  };
};
DocPanel = Ext.extend(Ext.Panel, {
    url: '',
    menu:null,
    autoScroll:true,
    initComponent : function(){
        DocPanel.superclass.initComponent.call(this);
    }
});
MainPanel = function(){
    this.searchStore = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/playpen/api.php'
        }),
        reader: new Ext.data.JsonReader({
                root: 'data'
            },
            ['cls', 'member', 'type', 'doc']
        ),
        baseParams: {},
        listeners: {
            'beforeload' : function(){
                this.baseParams.qt = Ext.getCmp('search-type').getValue();
            }
        }
    });
   
    MainPanel.superclass.constructor.call(this, {
        id:'doc-body',
        region:'center',
        margins:'5 5 5 5',
        resizeTabs: true,
        minTabWidth: 125,
        tabWidth: 135,
        maskDisabled:false,
        enableTabScroll: true,
        activeTab: 0,
        html:"<iframe id=\"mainframe\" name=\"mainframe\" width='100%' marginwidth='0' marginheight='0' height='100%' class='module' frameborder=\"0\" scrolling='auto'></iframe>"
        ,tbar:['--']
    });
};

Ext.extend(MainPanel, Ext.TabPanel, {
    initEvents : function(){
        MainPanel.superclass.initEvents.call(this);
    },
    listeners:{
       'tabchange':function(tp, tab) {
          /*tab切换*/
          var link = tab.url;
          var href = link.url;
          document.getElementById("mainframe").src=href;
          /*导航置为第一项*/
          _navigation.push(0,href,tab.title);
        }
    },
    initalltab:function(){
        /*创建一个额外的菜单，用途是：当没有菜单的tab over之后，这个额外的菜单隐藏显示，从而关闭上一次显示的菜单*/
        var ix = new Ext.menu.Menu({width:0});
        /*初始化tab鼠标移动事件。注意tab标签的id是由MainPanel的id与Tab的id加__组成*/
        this.items.each(function(item ,index,length){
            var tpid = this.id;
            var tabid = item.id;
            Ext.get(tpid+"__"+tabid).on("mouseover",function(){
             var a = [];a.push(this.getLeft());a.push(_topH+36);
             if(null!=item.menu) {
               item.menu.showAt(a);
             }else {
              ix.showAt([-1000,-1000]);
             }
            });
        },this);      
    },
    loadTab : function(href,cls,title,menu,icon){
        var id = 'tab-' + cls;
        //alert(href);
        this.add(new DocPanel({
              id:id,
              title: title,
              iconCls:icon,
              menu:menu,
              url:{url: href}
          }));
    }
});

MenuItem = Ext.extend(Ext.menu.Item,{
    tp:null,
    tabid:0,
    initComponent : function(){
        MenuItem.superclass.initComponent.call(this);
    },
    handler:function() {
     if(null!=this.tp) {
       /*点击菜单项，tab切换到当前tab*/
       this.tp.setActiveTab(this.tabid);
       /*topbar显示栏变化*/
        _navigation.push(1,this.href,this.text);
     }
    }
});

/*框架页面*/
Ext.onReady(function(){
    Ext.QuickTips.init();
    _load = new Ext.LoadMask(Ext.getBody(), {msg:"页面加载中..."});
    _navigation = new Navigation();
    /*创建TabPanel*/
    var mainPanel = new MainPanel();
    /*tabs由外层传入,目前只支持一级菜单，如果需要实现多级菜单，那么就要用递归实现*/
    for(var i=0;i<_tabs.length;i++) {
        var tab_json = _tabs[i];
        /*tab为json字符串 {url:xxx,text:yyy,items:[{},{}]}*/
        var oTab =null;
        try{
          if(tab_json instanceof String) {
          oTab = Ext.util.JSON.decode(tab_json);
          }else {
          oTab = tab_json;
          }
        }catch(e){
          Ext.Msg.alert("提示","菜单项加载失败!");
        }
        if(null==oTab) {continue;}
        var _items = oTab.items;
        /*如果菜单没有子项，则不给这个tab添加菜单*/
        if(0==_items.length) {
             mainPanel.loadTab(oTab.url,i,oTab.text,null,oTab.icon);
        }else {/*如果菜单有子项，则给这个tab添加菜单，并给菜单填写子项*/
            var menu = new Ext.menu.Menu({
                                   width :150,
                                   shadow :'drop'
                                   });
            mainPanel.loadTab(oTab.url,i,oTab.text,menu,oTab.icon);
            for(var x = 0;x<_items.length;x++) {
                var _item = _items[x];
                menu.addItem(new MenuItem({text:_item.text,href:_item.url,hrefTarget:'mainframe',tabid:i,tp:mainPanel,iconCls:_item.icon}));
                menu.addItem(new Ext.menu.Separator({labelSeparator:':'}));
            }
        }

    }
    /*Viewport布局*/
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[ {
            cls: 'docs-header',
            height: _topH,
            region:'north',
            xtype:'box',
            el:'header',
            border:false,
            margins: '0 0 5 0'
        }, mainPanel,{
        cls: 'docs-header',
        region:'south',
        height: 30,
        html:'Copyright © 2011 XXXX 版权所有'
        } ]
    });
    viewport.doLayout();
    /*初始化tabs*/
    mainPanel.initalltab();
    _topToolbar=mainPanel.getTopToolbar();
   
    /*首次加载Loading*/
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);
   
});
//--------------------------------------------------------------------------打开窗口
function openWindow(titlex,url,param,only,w,h)
     {
       var text = "<div id='hello-win' class='x-hidden'><div class='x-window-header'>窗口</div></div>";
       Ext.get('win_template').dom.innerHTML=text;
       if(param.length!=0)
       {
       if(url.indexOf("?")!=-1){
         url = url+'&id='+param;
         }else{
         url = url+'?id='+param;
         }
       }else{

       }
       var w = new Ext.Window({
            applyTo:'hello-win',
            layout:'fit',
            width:w,
            height:h,
            resizable:false,
            modal : true,
            monitorResize :true,
            x:250,
            y:50,
            title:'IT与运维操作审计系统',
            closeAction:'close',
            listeners :{
              "close":function(){
                       lbgrid.store.reload();
                }
            },
            plain: true,
            items: new Ext.Panel({
             id:  "panel2",
             fitToFrame: true
            })
        });
        w.show(this);//窗口显示
        var ocmp = w.getComponent(0);
        window.setTimeout(function(){ocmp.getEl().dom.lastChild.lastChild.innerHTML='<iframe src='+url+' frameborder="0" width='+w+' height='+h+' style="overflow:hidden;" ></iframe>'},300);
     }


阅读(3812) | 评论(0)


版权声明：编程爱好者网站为此博客服务提供商，如本文牵涉到版权问题，编程爱好者网站不承担相关责任，如有版权问题请直接与本文作者联系解决。谢谢！

评论

暂无评论
您需要登录后才能评论，请 登录 或者 注册