树的使用是很频繁的,对树节点的各种操作。和数据库的互动操作。
tree.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>树的展示</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js">
</script>
<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js">
</script>
<!-- tree.jsp page -->
<link rel="stylesheet" type="text/css" href="ext4/ux/css/TabScrollerMenu.css" />
<script type="text/javascript" src="forever.js">
</script>
<script type="text/javascript" src="tree-simple.js">
</script>
<script type="text/javascript" src="tree-check.js">
</script>
<script type="text/javascript" src="tree-app.js">
</script>
</head>
<body>
</body>
</html>
forever.js是工具类:
Ext.ns("org.forever.util");
Ext.define('org.forever.util.TreeUtil', {
extend: 'Object',
userName: '默认值',//属性
constructor: function(config){//构造函数
Ext.apply(this, config);
}
});
//递归更新节点的选中状态
org.forever.util.TreeUtil.updateCheckStatus = function(parentNode, checked){
Ext.each(parentNode.childNodes, function(childNode, index, allItems){
//Ext.Msg.alert('节点信息',node.get('text')+';index=' + index);
childNode.set('checked', checked);
org.forever.util.TreeUtil.updateCheckStatus(childNode, checked);
});
}
tree-app.js是程序的初始化代码:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext4/ux/');
Ext.onReady(function(){
var tabscrollermenu = Ext.create('Ext.ux.TabScrollerMenu', {
ptype: 'tabscrollermenu',
maxText: 15,
pageSize: 10
});
var simpleTreePanel = createSimpleTree();
var checkTreePanel = createCheckTree();
var tabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
activeTab: 1,
plugins: [tabscrollermenu],
items: [simpleTreePanel, checkTreePanel]
});
Ext.create('Ext.Window', {
title: 'tree app',
width: 500,
height: 400,
x: 100,
y: 100,
bodyStyle: 'padding: 5px;',
layout: 'border',
items: [tabPanel]
}).show();
});
tree-simple.js是创建一个简单的树,对节点提取值进行操作。
function createSimpleTree(){
var treeStore;
var treePanel;
var toolbarPanel;
store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
text: "根节点",
children: [{
text: "1-1",
leaf: true
}, {
text: "1-2",
expanded: true,
children: [{
text: "2-1",
leaf: true
}, {
text: "2-2",
leaf: true
}]
}, {
text: "1-3",
leaf: true
}]
}
});
//工具条面板
toolbarPanel = new Ext.panel.Panel({
dockedItems: [{
xtype: 'toolbar',
items: [{
text: '选中节点值',
handler: function(){
var selectionMode = treePanel.getSelectionModel();
var modeType = selectionMode.getSelectionMode();//SINGLE, MULTI or SIMPLE
var selection = selectionMode.getSelection();//获取选中的值
if (selection.length == 1) {
Ext.MessageBox.show({
title: '节点操作',
msg: "选中节点的值:" + selection[0].data.text,
icon: Ext.MessageBox.INFO
});
}
else {
Ext.MessageBox.show({
title: '节点操作',
msg: '没有选中的节点',
icon: Ext.MessageBox.INFO
});
}
}
}]
}]
});
//树面板
treePanel = Ext.create('Ext.tree.Panel', {
title: 'simple-tree',
store: store,
closable: true,
rootVisible: true,//显示根节点
dockedItems: [toolbarPanel],
listeners: {
itemclick: function(view, record, item, index, e){//用了select这个事件不会触发。
Ext.MessageBox.show({
title: '节点操作',
msg: 'itemclick:index=' + index + ",text=" + record.data.text,
icon: Ext.MessageBox.INFO
});
}
}
//renderTo: 'simple-tree-div'//<div id="simple-tree-div"></div>
});
//注册事件操作
treePanel.getSelectionModel().on('select', function(selModel, record){
Ext.MessageBox.show({
title: '节点操作',
msg: 'select:modeType=' + selModel.mode + ",text=" + record.data.text,
icon: Ext.MessageBox.INFO
});
});
return treePanel;
}
tree-check.js是带复选框的树,提取选中的树的值:
function createCheckTree(){
var treeStore;
var treePanel;
var toolbarPanel;
store = Ext.create('Ext.data.TreeStore', {
root: {
checked: false,
expanded: true,
text: "根节点",
children: [{
checked: false,
text: "1-1",
leaf: true
}, {
checked: false,
text: "1-2",
expanded: true,
children: [{
checked: false,
text: "2-1",
leaf: true
}, {
checked: false,
text: "2-2",
children: [{
checked: false,
text: "2-2-1",
leaf: true
}, {
checked: false,
text: "2-2-2",
leaf: true
}]
}]
}, {
checked: false,
text: "1-3",
leaf: true
}]
}
});
toolbarPanel = new Ext.panel.Panel({
dockedItems: [{
xtype: 'toolbar',
items: [{
text: '选中节点值',
handler: function(target, e){
var records = treePanel.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec){
names.push(rec.get('text'));
});
if (records.length > 0) {
Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('<br />'),
icon: Ext.MessageBox.INFO
});
}
else {
Ext.MessageBox.show({
title: '节点操作',
msg: '没有选中的节点',
icon: Ext.MessageBox.INFO
});
}
}
}]
}]
});
treePanel = Ext.create('Ext.tree.Panel', {
title: 'check-tree',
store: store,
animate: true,
closable: true,
rootVisible: true,
dockedItems: [toolbarPanel],
listeners: {
itemclick: function(view, record, item, index, e){
},
checkchange: function(node, checked){
org.forever.util.TreeUtil.updateCheckStatus(node, checked);
}
}
});
return treePanel;
}
- 大小: 14.8 KB
分享到:
相关推荐
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
基于extjs 3.2,右侧折叠面板,然后面板里面包含了树,点击树节点以后,会把树的href里面的地址加载到右边的tabpanel。代码清晰简单。
TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...
本文为大家介绍下extjs4 treepanel如何动态改变行高度,下面有个不错的示例,感兴趣的朋友可以参考下
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
主要介绍了ExtJs动态生成treepanel的Json格式的相关资料,需要的朋友可以参考下
ExtJs TreePanel应用ExtJs TreePanel应用
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel...
TreePanel的各项属性能帮助我们动态加载extjs tree
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
主要介绍了如何通过CSS样式来修改ExtJS:TreePanel的小图标,下面有个不错的示例,大家可以参考下
ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录...