一:M层
Ext.define("RT.store.deptstore",{
extend:"Ext.data.TreeStore",
defaultRootId:"root",
//storeId : "store",//创建id,供组件调用
proxy:{
type : "ajax",
url: "../treeApp/fakeData.jsp",
reader:{
type:"json",
autoLoad:true//不自动加载的话就拿不到数据
},
writer:{
type:"json"
}
}
})
数据jsp
<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="java.lang.*" %>
<%@ page import="java.util.*" %>
<%
String param = request.getParameter("ids");
if( null != param)
{
System.out.println("==>"+param);
}
response.setCharacterEncoding("UTF-8");
response.getWriter().write( "{ 'text':'根节点','id':'0','checked':false,'leaf':false,'children':[ {'text':'子节点01','id':'01','leaf':false,/*checked:false,*/'children':[ { 'text':'孙节点0101','id':'0101','leaf':true },{ 'text':'孙节点0102','id':'0102','leaf':true } ]},{'text':'子节点02','id':'02','leaf':false,/*checked:false,*/'children':[{ 'text':'孙节点0201','id':'0201','leaf':true },{ 'text':'孙节点0202','id':'0202','leaf':true }]}]} " );
%>
有关json验证:
发现一个在线的json调试工具, 提示很到位: http://jsonlint.com/
类似的还有一个:http://tools.jb51.net/tools/json/json_editor.htm 这个的优点是能看到js源代码...
二: V层:
Ext.define( "RT.view.depttree",{
extend:"Ext.tree.Panel",
alias:"widget.deptTree",
title:"部门树",
width:300,
height:300,
padding:"5 3 3 10",
rootVisible:false,//控制不显示root
store:"deptstore",
dockedItems:[
{
xtype:"toolbar" , dock:"bottom",
//ui:"footer",// 样式
items:[
{ xtype:"button" , text:"add" , id:"add" },
{ xtype:"button" , text:"copy" , id:"copy" },
{ xtype:"button" , text:"delete" , id:"del" }
]
},
{
xtype:"toolbar" , dock:"top",
items:[
{ xtype:"button" , text:"openAll" , id:"openAll" },
{ xtype:"button" , text:"closeAll" , id:"closeAll" }
]
}
]
})
三:C层
Ext.define("RT.controller.deptcontroller",{
extend:"Ext.app.Controller",
init:function(){
this.control({
//1.openAll
"deptTree button[id=openAll]":{
click:function(btn , event){
var tree = btn.ownerCt.ownerCt;
tree.expandAll();
}
},
//2.closeAll
"deptTree button[id=closeAll]":{
click:function(btn , event){
var tree = btn.ownerCt.ownerCt;
tree.collapseAll();
}
},
//3.增加按钮 , 选择父部门 增加其下子部门
"deptTree button[id=add]":{
click:function(btn , event){
var tree = btn.ownerCt.ownerCt;
var selected = tree.getChecked();//已选
if( 1 == selected.length )
{
var node = selected[0];//有且仅有一个
node.appendChild(
{ text:'孙节点X',id:'010X',leaf:true }
);
}
else
{
alert("请您选择一个节点");
}
}
},
//4.节点被点击时触发
"deptTree":{
itemclick:function( tree , record , item , index , enen ,options ){
alert( record.get("id") );
}
}
});
},
//==>实践证明以下名字必须全小写,像"userGrid"这类驼峰的名字ext找不到对应的js文件
views:[
"depttree"//v层的名字
],
stores:[
'deptstore'
],
models:[
]
});
//操作函数
function grid_delete(btnObj)
{
//alert("==>grid_delete()"+btnObj.text);
//按钮对象的父对象是工具条, 再父级才是所属表格
var gird = btnObj.ownerCt.ownerCt;
var dataArray = gird.getSelectionModel().getSelection();
if( 0 == dataArray.length )
{
Ext.Msg.alert("提示","至少要选择一条数据");
}
else
{
var ids = [];
$.each(dataArray , function(i,model){
//alert( model.get("name") );//model.data.name
ids.push( model.get("userId") );
});
Ext.Ajax.request({
url:"fakeData.jsp",
params:{'ids':ids},
method:"POST",
timeout:3000,//请求超时时间3秒
success:function( response , options){
//alert("==>成功" + response.responseText +"__" + options);
var store = gird.getStore();
//成功后删除数据 , 还从dataArray拿值
$.each(dataArray , function(i,model){
store.remove(model);//store类的删除一个model
});
},
failure:function( response , options){
alert("==>失败" + response.responseText +"__" + options);
}
});
}//end if else
}//end of function
四:treeApp.js
//==>http://192.168.0.189:8080/LSA/systemConfig/extDemo/treeApp/deptTreeMVC.jsp
//只有app.js在Ext.onReady()内部
Ext.onReady( function(){
//异步加载 , 其他Js声明对象 , app中实例化
Ext.Loader.setConfig({
enabled:true
});
Ext.QuickTips.init();
Ext.application({
name : "RT",//命名空间
appFolder : "../treeApp",//根目录地址
launch : function(){ //回调函数
Ext.create("Ext.container.Viewport",{//把表格扔到Viewport中显示
layout : "auto", //布局
items :[
//Viewport中元素的配置
{
xtype : "deptTree",
title : "部门树"
//html:"用户表格测试内容"
}
]
});
},
//==>controller的入口,ext会去appFolder/controller中找你指定的文件
controllers:[
"deptcontroller"
]
});
})