extjs4 Accordion布局

最新推荐文章于 2024-08-08 16:13:01 发布

weixin_34250709

最新推荐文章于 2024-08-08 16:13:01 发布

阅读量75

点赞数

文章标签： json java javascript ViewUI

原文链接：https://my.oschina.net/zhongwenhao/blog/215494

版权

2019独角兽企业重金招聘Python工程师标准>>>

项目结构：

实现效果：

index.jsp代码：

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
	<head>

		<title>Accordion布局菜单</title>
		<link rel="stylesheet" type="text/css"
			href="/Accordion/ext4/resources/css/ext-all.css" />
		<script type="text/javascript" src="/Accordion/ext4/ext-all-debug.js"></script>
		<script type="text/javascript" src="/Accordion/ext4/locale/ext-lang-zh_CN.js"></script>
		<style type="text/css">
			.icon-accordion{
				background-image: url(/Accordion/images/accordion.gif) !important;
			}
			.icon-panel{
				background-image: url(/Accordion/images/panel.png) !important;
			}
		</style>
		<script type="text/javascript">
		var ajax = function(config) { //封装、简化AJAX
			Ext.Ajax.request({
				url : config.url, //请求地址
				params : config.params, //请求参数
				method : 'post', //方法
				callback : function(options, success, response) {
					config.callback(Ext.JSON.decode(response.responseText));
					//调用回调函数
				}
			});
			return false;
		};
		Ext.onReady(function() {
			var win = Ext.create("Ext.window.Window", {
				title : "Accordion布局动态菜单",
				width : 300,
				height : 500,
				iconCls : "icon-accordion",
				autoScroll : false,
				layout : 'accordion',
				layoutConfig : {
					animate : true
				}
			});
			win.show();
			ajax({
				url : "/Accordion/accordion",//获取面板的地址
				params : {
					action : "list"
				},
				callback : addTree
			});
			function addTree(data){
				for ( var i = 0; i < data.length; i++) {
					win.add(Ext.create("Ext.tree.Panel", {
						title : data[i].title,
						iconCls : data[i].iconCls,
						autoScroll : true,
						rootVisible : false,
						viewConfig : {
							loadingText : "正在加载..."
						},
						store : createStore(data[i].id),
						listeners : {
							afterlayout : function(){
								if(this.getView().el){
									var el = this.getView().el;
									var table = el.down("table.x-grid-table");
									if(table){
										table.setWidth(el.getWidth());
									}
								}
							}
						}
					}));
					win.doLayout();
					
				}
			}
			var model = Ext.define("TreeModel", { //定义树节点数据模型
				extend : "Ext.data.Model",
				fields : [ {name : "id",type : "string"},
				           {name : "text",type : "string"}, 
				           {name : "iconCls",type : "string"}, 
				           {name : "leaf",type : "boolean"} 
				         ]
			});
		   var createStore  =  function(id){ //创建树面板数据源
			   var me = this;
			   return Ext.create("Ext.data.TreeStore",{
				   defaultRootId : id, //默认的根节点id
				   model : model,
				   proxy : {
					   type : "ajax", //获取方式
					   url : "/Accordion/accordion?action=node" //获取树节点的地址
				   },
				   clearOnLoad : true,
				   nodeParam : "id"//设置传递给后台的参数名,值是树节点的id属性
			   });
		   };
		});
</script>
	</head>
	<body>
	</body>
</html>

AccordionServlet代码如下：

package servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

@SuppressWarnings("serial")
public class AccordionServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String action = request.getParameter("action");
		initHeader(response);
		if(action.equals("list")){//获取属面板列表
			renderText(this.getTreePanelList(), response);
		}else if(action.equals("node")){
			renderText(this.getTreeNodeList(request.getParameter("id")), response);
		}
	}
	
	public String getTreeNodeList(String id){
		JSONArray array = new JSONArray();
		for (int j = 0; j < 5; j++) {
			JSONObject json = new JSONObject();
			json.element("id", id + "-" +(j+1));
			json.element("text", "树节点-"+ id + "-" +(j+1));
			if((j+1) % 2 == 0 && id.length() <= 3){
				json.element("leaf", false);
			}else{
				json.element("leaf", true);
			}
			array.add(json);
		}
		return array.toString();
	}
	
	public String getTreePanelList(){
		JSONArray array = new JSONArray();
		for (int i = 0; i < 5; i++) { //生成5个属面板
			JSONObject json = new JSONObject();
			json.element("id", i+1);
			json.element("iconCls", "icon-panel");
			json.element("title", "Accordion菜单"+(i+1));
			array.add(json);
		}
		return array.toString();
	}
	
	public static void renderText(final String content,HttpServletResponse response){
		try{
			response = initHeader(response);
			response.getWriter().write(content);
			response.getWriter().close();
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	
	private static HttpServletResponse initHeader(HttpServletResponse response){
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		response.setCharacterEncoding("UTF-8");
		return response;
	}
}

web.xml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AccordionServlet</servlet-name>
    <servlet-class>servlet.AccordionServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>AccordionServlet</servlet-name>
    <url-pattern>/accordion</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>