extjs4 Accordion布局
项目结构：
实现效果：
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>