項目結構：

實現效果：

index.jsp代碼：

Accordion布局菜單

href="/Accordion/ext4/resources/css/ext-all.css" />

.icon-accordion{

background-image: url(/Accordion/images/accordion.gif) !important;

}

.icon-panel{

background-image: url(/Accordion/images/panel.png) !important;

}

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屬性

});

};

});

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代碼如下：

This is the description of my J2EE component

This is the display name of my J2EE component

AccordionServlet

servlet.AccordionServlet

AccordionServlet

/accordion

index.jsp

總結

以上是生活随笔為你收集整理的extjs4 java_extjs4 Accordion布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。