extjs4 java_extjs4 Accordion布局
项目结构:
实现效果:
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布局相关推荐
- 桥本有菜java,深入浅出Extjs4.1.1(ExtJS组件、ExtJS对Ajax支持、ExtJS布局)配在线选课系统实战...
课程简介: ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解Extjs的课程.课程从基础开始,配合项目实战应用 ...
- ExtJs4.2——布局
1.border布局 border布局是当前项目实现中经常使用到的一种布局形式.这种布局将整个页面划分为五个部分,分别是上(north).下(south).左(west).右(east).中(cent ...
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
PS:今天上午,非常郁闷,有很多简单基础的题问搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 一.题问: ExtJS4应用border布局,边左为accordion布局的 ...
- Ext2.0布局类初探
Ext2.0正式版虽然还没出来,但是官网上的例程还是令人兴奋不已.内存泄漏的问题应该是解决了,布局类更新了,增加了新的东西,grid的功能更加强大,tabs也增加了循环按钮,还增加了类似delphi ...
- 【ExtJS】 布局Layout
布局用于定义容器如何组织内部子元素和控制子元素的大小. ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局. Containter容器类布局:负责容器内容Extj ...
- EXTJS布局示例(panel,Viewport,TabPanel)
详细见 http://oejia.net/blog/2016/01/17/extjs_layout.html 面板控件panel应用 面板panel加载远程页面 面板panel加载本地页面 使用htm ...
- ExtJS之 标准布局类(针对于panel)
Fit自适应布局 使唯一的子元素充满父容器,如果父容器有两个或多个子元素,那么只显示第一个子元素(前提是没有设置 autoScroll: true属性) Accordion布局(折叠布局) 代码: E ...
- 深入浅出ExtJS 第六章 布局
6.1 布局的用途 1 6.1 布局的用途 2 //决定把什么东西放到什么位置; 3 var vieport = new Ext.Viewport({ 4 layout:'border', //使用 ...
- ExtJs页面布局总结(转载)
转自:http://www.blogjava.net/liuyz2006/articles/387305.html EXT标准布局类 面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中 ...
最新文章
- java类加载的表现形式
- 观点 | 港科大张潼教授最新发言:对人工智能发展的一些思考
- Hibernate二级缓存与查询缓存的组合探究
- python读取txt文件并写入excel-Python读取txt内容写入xls格式excel中的方法
- 超微服务器开机启动项目怎么设置,超微服务器启动项设置
- php 分页类视频,php分页类_你不可错过的一个php分页类
- 学生选课系统代码-2view视图层代码【MVC--v】代码
- 适配器模式之迭代器模式
- java查看已导入的证书_jdk导入证书
- 谷歌浏览器32位安装包_Chromium内核的edge浏览器终于来了,试用了半天,发现真香!...
- 软件概要设计与详细设计
- C++判断是否为一个凹多边形
- 人工智能的十大应用方向是哪些?
- linux winqq 不能输入中文的解决办法
- 题8.9:写一函数,将一个3x3的整型矩阵转置。
- DCDC电源纹波测试
- 自适应Huffman编码
- 【IT之路】微信小程序之美化
- MMM配置文件及相关命令
- 申请ssl 验证域名 失败了 中间证书