一。ext4.0 树菜单链接类似选项卡 demo[非MVC模式]

来源：互联网发布：虚拟机安装ubuntu 编辑：程序博客网时间：2024/05/16 06:03

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Windows Example</title>   <link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath()%>/ext/resources/css/ext-all.css"  />   <script type="text/javascript" src="<%=request.getContextPath()%>/ext/bootstrap.js"></script>   <script type="text/javascript" src="<%=request.getContextPath()%>/ext/locale/ext-lang-zh_CN.js"></script></head><body></body></html><script type="text/javascript">     Ext.require([           'Ext.grid.*',           'Ext.data.*',           'Ext.util.*',           'Ext.state.*'       ]);      Ext.onReady(function() {            Ext.QuickTips.init();                          //点击父节点 发送ajax 到后台 ，对于子节点数据源没有事件            var store = Ext.create('Ext.data.TreeStore', {                   proxy: {                        type: 'ajax',                        url: 'http://localhost:28080/lindendemo/login/login.action'                   },                       fields:['id','text'],//跟旧版本extjs一样，节点的id和显示文本                     nodeParam:'orgId',                     root: {                   id:1,                    text: "Root node",                    expanded: true,                   }//定位到根节点                              });                                 /**              * 组建树 面板             */              var buildTree =  Ext.create('Ext.tree.Panel', {                    rootVisible: false,                     border: false,                    width:300,                    height:200,                    store: store,                    listeners: {                        'itemclick': function(view, record, item,index, e) {                            var id = record.get('id');                            var text = record.get('text');                            var leaf = record.get('leaf');                            changePage(text,id,leaf);                                                  },                            scope: this                        }                    });            //切换中间页面            function changePage(title,id,leaf){                            Ext.Ajax.request({                        url: 'http://localhost:28080/lindendemo/login/grid.action',                        params:{                            orgId:id                        },                        success: function(response) {                            var datas = Ext.JSON.decode( response.responseText );//response.responseText 返回的是一个字符串    转换成一个 Json 对象了                                                            var grid = Ext.create('Ext.grid.Panel',{                                  id:id,//组件的id                                  title:'简单表格实例',                                  width:400,                                  height:600,                                  frame:true,                                  closable: true,//是否实现关闭按钮                                  viewConfig:{                                      forceFit:true,                                      stripeRows:true//显示斑马线                                  },                                  store:{                                      fields:['id','name','age'],                                      proxy:{                                          type:'memory',//内存代理                                          data:datas,                                          reader:'array'//解析器                                      },                                      autoLoad:true                                  },                                  columns:[                 //数据项，获取store指定的列                                      {header:'id',width:30,dataIndex:'id',sortable:true},                                      {header:'姓名',width:80,dataIndex:'name',sortable:true},                                      {header:'年龄',width:80,dataIndex:'age',sortable:true},                                  ]                                                            });                              var tabPanel = Ext.getCmp('tab');/*中间面板对象*/                              var tab = tabPanel.getComponent(id + "");//在中间面板对象获得grid对象面板                                                   if (leaf) {                                 if (!tab){                                     tabPanel.add(grid).show();                                 }                                 tabPanel.setActiveTab(tab); //设置显示当前面板                           }                                              },                        failure: function(request) {                            Ext.MessageBox.show({                                title: '操作提示',                                msg: "连接服务器失败",                                buttons: Ext.MessageBox.OK,                                icon: Ext.MessageBox.ERROR                            });                        },                        method: 'post'                    });                        }                        /*                * 上,panel.Panel             */            this.topPanel = Ext.create('Ext.panel.Panel', {                region: 'north',                id: 'north',                html: '<div class="welcome">欢迎你!<span class="user">yuanliang</span><a href="#" class="logoff">注销</a></div>',                height: 45,                margins: '0 0 0 0',                border: false            });            /**             * 左,panel.Panel             */            this.leftPanel = Ext.create('Ext.panel.Panel', {                region: 'west',                title: '导航栏',                layout: 'accordion',                collapseMode: 'mini',                collapsible: true,                width: 180,                minWidth: 100,                maxWidth: 300,                split: true,                autoScroll: true,                items:[buildTree]            });            /**             * 中,tab.Panel             */            this.centerPanel = Ext.create('Ext.tab.Panel', {                region: 'center',                id: 'tab',                height: '100%',                activeTab: 0,                items: [                {                    title: '首页',                    bodyPadding: 10                }                ]            });                        /**             * 下,tab.Panel             */            this.southPanel = Ext.create('Ext.panel.Panel', {                region: 'south',                html: '<div id="south"> Powered by ASP.Net MVC 2.0 + ExtJS 4.0.0 <a target="_blank" href="http://www.minstars.cn" style="text-decoration: none; color: #FFF;"></a></div>',                split: true,                margins: '0 0 0 0',                border: false            });                                                /**                 * Viewport                 */                Ext.create('Ext.container.Viewport', {                    layout: 'border',                    renderTo: Ext.getBody(),                    items: [this.topPanel, this.leftPanel, this.centerPanel, this.southPanel]                });            });                                    </script>

后台通过struts2

//login.actionpublic String execute(){HttpServletRequest request = ServletActionContext.getRequest();HttpServletResponse response = ServletActionContext.getResponse();String result = "";System.out.println("*********************"+request.getParameter("orgId"));if("1".equals(request.getParameter("orgId"))){result = "[{text:\"总公司1\",count:100,id:100},{text:\"总公司2\",count:100,id:120}]";}else if("100".equals(request.getParameter("orgId"))){result = "[{text:\"总公司1--分公司1\",count:20,id:110,leaf:true},{text:\"总公司1--分公司2\",count:80,id:111,leaf:true}]";}else if("120".equals(request.getParameter("orgId"))){result = "[{text:\"总公司2--分公司1\",count:30,id:121,leaf:true},{text:\"总公司2--分公司2\",count:50,id:122,leaf:true}]";}response.setCharacterEncoding("utf-8");try {response.getWriter().write(result);} catch (IOException e) {e.printStackTrace();}return null;}//grid.action返回的数据public String execute(){                HttpServletRequest request = ServletActionContext.getRequest();        HttpServletResponse response = ServletActionContext.getResponse();        String result = "";        System.out.println("*********************"+request.getParameter("orgId"));                                response.setCharacterEncoding("utf-8");        try {            response.getWriter().write("[[100,'张三',24],[200,'林志玲',30],[300,'刘德华',29]]");            } catch (IOException e) {            e.printStackTrace();        }        return null;    }