ext 例子（treepanel，tabpanel结合建立后台框架）

来源：互联网发布：微信圈粉软件编辑：程序博客网时间：2024/05/22 15:57

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统</title>
<meta name="keywords" content="电子商务">
<meta name="description" content="CRM后台管理系统">
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css">
</head>

<body>
   <center><div id="tabs" style="margin:15px 0;">初始化中....</div></center>
   <script src="<%=request.getContextPath()%>/ext/js/ext-base.js" type="text/javascript"></script>
   <script src="<%=request.getContextPath()%>/ext/js/ext-all-debug.js" type="text/javascript"></script>
   <script language="javascript">

       Ext.onReady(function(){
           //创建树跟菜单，并动态地加载子节点
           var root= new Ext.tree.AsyncTreeNode({
               expanded: false,
               loader: new Ext.tree.TreeLoader({
                    dataUrl:"/temp/springMVCtest.do?method=getTreeNodeByJson",
                   requestMethod:"post"
               }),
                children: [{

                    text: '用户管理'

               }]

           });
       //浏览器可视区域,将ext组件放置其中，当窗体大小变化时，ext组件同时发生变化
           var viewport=new Ext.Viewport({
                layout: 'border',//视图布局方式
                items: [{
                   //放置组件项目
                    region: 'west',
                    collapsible: true,
                    title: '主菜单',
                    xtype: 'treepanel',//树形结构的panel组件
                    width: 200,
                    autoScroll: true,
                    split: true,

                    root: root,
                    rootVisible: false,
                    listeners: {
                       //菜单点击时的事件处理
                        click: function(n) { addTabs(n); }
                    }
                }, {
                    region: 'center',
                    xtype: 'tabpanel', //放置tab组件队列的panel
                    id:'tabpanel',
                    resizeTabs:true,
                    minTabWidth: 135,
                    tabWidth:135,
                    enableTabScroll:true,
                    width:600,
                    height:250,
                    defaults: {autoScroll:true},
                    items: [{
                       //tab组件项目
                        title: '首页',
                        id: 'hometab',
                        html: '欢迎使用本系统'
                    }

                    ]
                }]
           });
           //处理treeNode的单击事件
       function addTabs(node){
           if(node.attributes.leaf!=true){

           }
           else{
           if(Ext.getCmp(node.attributes.text)!=null){
               Ext.getCmp(node.attributes.text).show();
           }
           else{
               //根据菜单栏的id来请求页面，并在tabpanel中显示
               var url="/temp/springMVCtest.do?method=getPageItem&pageid=" +node.attributes.id;

               var html="<iframe src="+url+" frameborder=\"0\" width=\"100%\" height=\"100%\" >";
                           Ext.getCmp("tabpanel").add({
                               title: node.attributes.text,
                                iconCls: 'tabs',
                                 id: node.attributes.text,
                                html: html,
                                scripts: true,
                                closable:true
                            }).show();

           }
           }

       }
           //初始化完成后，tabpanel中默认tab页面显示
       Ext.getCmp("hometab").show();
       });

   </script>
</body>
</html>