1.extjs4.0API较3.0有非常大变化
2.多级子父节点的选中和展开。
3.数据的重新加载。tree.getStore().load
4.节点的移除,从树中根据ID获取节点 tree.getStore().getNodeById();
5.获取选中的节点,tree.getView().getChecked();
6.数据为异步加载,设置节点选中,tree.getStore().getNodeById('').set({checked:true});

<script type="text/javascript">
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox',
'Ext.tip.*'
]);
Ext.onReady(function() {
/*
* 可以获取选中节点的ID,以及TEXT
*
*/
var checkedNodes = {
_data:{},
update:function(id,text,checked){
if(checked){
this.add(id,text,checked);
}else if(!checked){
this.delById(id);
}
},
add: function(id,text){
if(!this._data[id]){
this._data[id] = {'id':id,'text':text};
}
},
delById:function(id){
if(this._data[id]){
delete this._data[id];
}
},
getById:function(id){
return this._data[id];
},
joinId:function(sep){
arr = [];
for(id in this._data){
arr.push(id);
}
return arr.join(sep);
},
joinName:function(sep){
arr = [];
for(id in this._data){
arr.push(this._data[id].text);
}
return arr.join(sep)
},
contains:function(id){
return this_data[id];
},
init:function(ids,texts){
if(ids.IndexOf(',') > 1){
idarr = ids.split(',');
textarr = texts.splist(',');
for(var i=0; i<idarr.length; i++){
if(idarr[i].replace(/^\s+|\s+$/g,'') != ''){
this.add(idarr[i],textarr[i]);
}
}
}
}
};
Ext.define('OrgInfo', {extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'text'},
{name: 'name'}
]
});
var orgStore = Ext.create('Ext.data.TreeStore', {
defaultRootId: "10",
model: "OrgInfo",
root: {id:10,text:'顺丰速运集团',leaf:false},
proxy: {type:'ajax', actionMethods : "POST", url:'tree_data.jsp', reader:{type:'json'}},
nodeParam:'id',
textField : "name"
});
/*
*设置子节点或者父节点选中的方法
*设置单个节点选中的方法
*/
var TreeNodeCheck ={
setNodeChecked:function(node,checked){
checkedNodes.update(node.get('id'),node.get('text'),checked);
node.set('checked',checked);
},
childChecked:function(node,checked){
TreeNodeCheck.setNodeChecked(node,checked);
node.expand();
if(node.hasChildNodes()){
node.eachChild(function(child) {
TreeNodeCheck.childChecked(child,checked);
});
}
},
parentChecked:function(node,checked){
var parentNode = node.parentNode;
checked = parentNode == null ?null:checked;
TreeNodeCheck.setNodeChecked(node,checked); //设置父节点不选 中
if(parentNode !=null){ //如果父节点不为空则展开
var flag = false;
parentNode.eachChild(function(child) {
if(child.data.checked == true){
flag = true;
}
});
if(checked == false){
if(!flag){
TreeNodeCheck.parentChecked(parentNode,checked);
}
}else{
if(flag){
TreeNodeCheck.parentChecked(parentNode,checked);
}
}
} }
};
Ext.define("OrgTreePanel", {
extend: "Ext.tree.Panel",
store : orgStore,
rootVisible: true,
useArrows: true,
frame: true,
title: 'Check Tree',
width: 200,
height: 250,
padding:'0 0 0 0',
selectIds:function(){
var records =this.getView().getChecked(),
ids = [];
Ext.Array.each(records, function(rec){
ids.push(rec.get('id'));
});
return ids.join(",");
},
listeners:{
checkchange:function (node,checked,eOpts){
TreeNodeCheck.childChecked(node,checked);
TreeNodeCheck.parentChecked(node,checked); },
load:function( store, records, successful, operation, eOpts ){
if(records.data.checked!=null){
var hasChecked = false;
Ext.Array.each(successful, function(rec){
if(rec.data.checked){
hasChecked = true;
return false;
}
});
if(!records.data.checked){
if(hasChecked){
Ext.Array.each(successful, function(rec){
TreeNodeCheck.childChecked(rec,false);
});
}
}else{
if(!hasChecked){
Ext.Array.each(successful, function(rec){
TreeNodeCheck.childChecked(rec,true);
});
}
}
}
}
}
}); var win = null;
var tree = null; Ext.create('Ext.Button', {
text: '得到被选中的节点',
renderTo: Ext.getBody(),
handler: function() { console.info(Ext.isEmpty(' '));
console.info("checkedNodes.joinId:"+checkedNodes.joinId("-")); }
}); Ext.create('Ext.Button', {
text: 'delete tree',
renderTo: Ext.getBody(),
handler: function() {
tree.getRootNode().removeAll(false);
tree.getStore().load();
}
}); win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 250,
width: 400,
layout: 'fit',
closeAction :'hide',
showWin:function(){
this.show();
tree.getRootNode().removeAll(false);
tree.getStore().load({
scope :this,
callback: function(records, operation, success) {
if(!tree.getRootNode().isExpanded()){
tree.getRootNode().expand();
}
}
});
},
initComponent: function () {//构造函数
var me = this;
tree = Ext.create("OrgTreePanel");
me.items = [tree];
me.superclass.initComponent.call(me);
},
listeners: {
beforehide:function(win, eOpts ){ }
}
}); Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
win.showWin();
}
});
});
</script>

extjs4.0 treepanel节点的选中、展开! 数据的重新加载的更多相关文章

  1. 参考 ZTree 加载大数据量。加载慢问题解析

    参考 ZTree 加载大数据量. 1.一次性加载大数据量加载说明 1).zTree v3.x 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 DOM. 2) ...

  2. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  3. 不想分页怎么办??-->页面数据的滚动加载

    在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...

  4. Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多

    在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...

  5. 【EF学习笔记08】----------加载关联表的数据 显式加载

    显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...

  6. OGG初始化之将数据从文件加载到Replicat

    要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...

  7. hibernate框架学习之数据抓取(加载)策略

    Hibernate获取数据方式 lHibernate提供了多种方式获取数据 •load方法获取数据 •get方法获取数据 •Query/ Criteria对象获取数据 lHibernate获取的数据分 ...

  8. 利用WPF的ListView进行大数据量异步加载

    原文:利用WPF的ListView进行大数据量异步加载 由于之前利用Winform的ListView进行大数据量加载的时候,诟病良多,所以今天试着用WPF的ListView来做了一下,结果没有让我失望 ...

  9. DataTable 删除数据后重新加载

    DataTable 删除数据后重新加载 一.总结 一句话总结: 判断datatable是否被datatable初始化或者是否执行了datatable销毁函数,如果没有,就销毁它 if ($('#dat ...

随机推荐

  1. 刷题总结——切蛋糕(ssoj)

    题目: 切蛋糕 (cake.cpp/c/pas) [问题描述] BG 有一块细长的蛋糕,长度为�. 有一些人要来BG 家里吃蛋糕, BG把蛋糕切成了若干块(整数长度),然后分给这些人.为了公平,每个人 ...

  2. 【线段树查询区间最值】poj 3264 Balanced Lineup

    #include<cstdio> #include<algorithm> using namespace std; ; struct Seg { int l,r,mi,ma; ...

  3. 【2018.12.10】NOI模拟赛3

    题目 WZJ题解 大概就是全场就我写不过 $FFT$ 系列吧……自闭 T1 奶一口,下次再写不出这种 $NTT$ 裸题题目我就艹了自己 -_-||| 而且这跟我口胡的自创模拟题 $set1$ 的 $T ...

  4. System.out.println()和System.out.write()的区别

    这两个函数一个是System.out.write()输出字符流,System.out.println()是输出字节流,很简单.看下面这个程序就明白了.     //import java.util.* ...

  5. 填报志愿(codevs 2930)

    题目描述 Description 高考已经结束,而志愿填报正在进行中- 吴校长的学校里有n位同学,每位同学有ki个愿意去的大学.而在吴老师的省份中,有m所大学有招生名额.根据往年的经验,对于每所大学( ...

  6. Mongodb_分片集群模式

    前面介绍的副本集模式实现了数据库高可用. 但是还是存在的问题是: 所有的从节点都是从主节点全面拷贝,这样数据量过大时,从节点压力大.还有就是海量数据时存在硬件瓶颈, 毕竟每一个机器的存储量总是有限的. ...

  7. ZOJ 3811 / 2014 牡丹江赛区网络赛 C. Untrusted Patrol bfs/dfs/并查集

    Untrusted Patrol Time Limit: 3 Seconds                                     Memory Limit: 65536 KB    ...

  8. StoryBoard中,TableView位置总是在顶部出现空白的解决

      重设TableView的 contentInset 属性可解决. 
_tableView.contentInset = UIEdgeInsetsMake( -30, 0, 0, 0);


  9. POJ 2396 有源有汇有上下界可行流问题

    题意:给一个矩阵,给出每行每列之和,附加一些条件,如第i行第j列数必需大于(小于)多少. 思路题解:矩阵模型,模拟网络流,行.列标号为结点,构图,附加s,t,s连行标(容量上下限每行之和(必需以这个 ...

  10. Vue1.x 迁移 Vue2.x(项目进行不断修改)

    一.$dispatch 和 $broadcast 已经被弃用. 请使用更多简明清晰的组件间通信和更好的状态管理方案,如:Vuex 这些方法的最常见用途之一是父子组件的相互通信.在这些情况下,你可以使用 ...