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

最新推荐文章于 2014-01-07 11:21:39 发布

AndyYuan10000

最新推荐文章于 2014-01-07 11:21:39 发布

阅读量3.6k

点赞数

分类专栏： ext 文章标签： mvc ext function border extjs stylesheet

本文链接：https://blog.csdn.net/wwwyuanliang10000/article/details/7242795

版权

ext 专栏收录该内容

12 篇文章 0 订阅

订阅专栏











<%@ 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.action
public 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;
    }

AndyYuan10000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一。ext4.0 树菜单链接类似选项卡 demo[非MVC模式]

Windows Example /ext/resources/css/ext-all.css" /> /ext/bootstrap.js"> /ext/locale/ext-lang-zh_CN.js"> Ext.require([ 'Ext.grid.*', 'Ext.data.*',
复制链接

扫一扫

专栏目录