解决Ext4.2新版的Tree的一个小问题
来源:互联网 发布:linux系统开发工程师 编辑:程序博客网 时间:2024/04/30 12:13
最近要实现一个小控件,为了追求效果,采用了Ext JS4。由于Ext4与Ext3相比,有些内容作了调整,主要有如下不同:
(1)store的形式 由treeloader改为TreeStore
(2)原有click事件定义不太好使,可以使用oncheckchange实现。
(3)原有通过重新bindstore来加载树,已经不太好使,需要通过setRootNode的模式来实现。
例子如下:
Ext.require([
'Ext.tree.*',
'Ext.data.*'
]);
Ext.onReady(function() {
var store = new Ext.data.TreeStore({
proxy: {
type: 'ajax',
url: 'get-nodes.php'
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'fileName',
direction: 'ASC'
}]
});
var tree = new Ext.tree.TreePanel({
id:'tests',
xtype: 'check-tree',
loadMask : false,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Check Tree',
width: 250,
height: 300,
animate: true,
border: false,
store: store,
renderTo: 'tree-div',
height: 300,
width:400,
listeners: {
'beforeload':function(){
tree.getEl().mask('Loading...');
},
'load':function(){
tree.getEl().unmask();
}
}
});
//实现异步加载处理
tree.body.mask('加载...');
alert('load');
//Ext.getBody().mask("数据重新加载中,请稍等");
tree.setRootNode({
text: 'Root',
expanded: true,
children: [{
text: 'Child 1',
leaf: true,
checked:true
}, {
text: 'Child 2',
children: [{
text: 'Child 1',
leaf: true
}, {
text: 'Child 2',
leaf: true
}]
}]
});
tree.body.unmask();
});
- 解决Ext4.2新版的Tree的一个小问题
- 一个小问题的解决
- 一个小问题的解决
- ext4.2的desktop问题
- Ext4的decode与encode方法的一个小技巧
- ora-01033 一个小问题的解决
- 解决了一个Mysql安装的一个小问题
- 解决一个小问题-eclipse的不编译问题
- EXT4+Struts2 JSON的问题
- Ext4.2的国际化
- blog的魅力,解决我一个oracle的小问题:)
- DIV+CSS布局的一个小问题的解决
- 一个Commons FileUpload的小问题的解决
- 今天解决的一个关于spfile的小问题
- HttpModule和HttpHandler的一个小问题的解决
- Eclipse中出现的一个小问题的解决
- 关于新版eclipse中文注释字体显小的问题
- 新版live555的问题
- Erlang-- 学习笔记2,表达式格式
- CXF中的Interceptor
- 字符统计算法(改进版)
- Qt Creator + MinGW 在windows 下的调试
- 文件上传
- 解决Ext4.2新版的Tree的一个小问题
- 逻辑运算符和位于运算符的区别
- 地图投影公式转换
- C++学习随笔
- 图灵机
- Think_PHP分页
- 类名.this 的使用
- 【C开发】预编译处理命令(#define、typedef、#include、#运算符)
- 微软等名企面试题3