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