ExtJs4入门之十: tree组件简单示例

一: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验证:

二: 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"
]
});

})