- 浏览: 692992 次
- 来自: ...
文章分类
最新评论
-
ranguisheng:
可以加点注释,代码不便于阅读.
用java实现数据库连接池的一个简单示例 -
abcd880129:
这样写的话,还要用专门的下载工具,不然,只能下到一个为空的ex ...
ZK下载文件时,不在服务器生成文件直接下载 -
234369425:
同上,是20
java计算阶乘 -
CodeToMyLaw:
如果目录中含有中文呢?
[^\x00-\xff] 中文的 ...
js验证文件目录格式的正确性 -
yanzhoupuzhang:
加了,还是报那个错误!
org.apache.commons.dbcp.BasicDataSource的解决方法
The use of the tree is very frequent, the various operations on the tree node. And database interactivity.
tree.html:
forever.js are tools:
tree-app.js is the process initialization code:
tree-simple.js is to create a simple tree, extract the value of the node operation.
tree-check.js is a tree with a check box to extract the value of the selected tree:
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> Tree display </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>
forever.js are tools:
Ext.ns("org.forever.util"); Ext.define('org.forever.util.TreeUtil', { extend: 'Object', userName: ' Default ',//property constructor: function(config){// Constructor Ext.apply(this, config); } }); // Recursive update node selected org.forever.util.TreeUtil.updateCheckStatus = function(parentNode, checked){ Ext.each(parentNode.childNodes, function(childNode, index, allItems){ //Ext.Msg.alert(' Node information ',node.get('text')+';index=' + index); childNode.set('checked', checked); org.forever.util.TreeUtil.updateCheckStatus(childNode, checked); }); }
tree-app.js is the process initialization code:
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 is to create a simple tree, extract the value of the node operation.
function createSimpleTree(){ var treeStore; var treePanel; var toolbarPanel; store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, text: " The root node ", 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 }] } }); // Tool Panel toolbarPanel = new Ext.panel.Panel({ dockedItems: [{ xtype: 'toolbar', items: [{ text: ' Selected node value ', handler: function(){ var selectionMode = treePanel.getSelectionModel(); var modeType = selectionMode.getSelectionMode();//SINGLE, MULTI or SIMPLE var selection = selectionMode.getSelection();// Gets the selected values if (selection.length == 1) { Ext.MessageBox.show({ title: ' Node actions ', msg: " Value of the selected node :" + selection[0].data.text, icon: Ext.MessageBox.INFO }); } else { Ext.MessageBox.show({ title: ' Node actions ', msg: ' The node is not selected ', icon: Ext.MessageBox.INFO }); } } }] }] }); // Tree Panel treePanel = Ext.create('Ext.tree.Panel', { title: 'simple-tree', store: store, closable: true, rootVisible: true,// Display the root node dockedItems: [toolbarPanel], listeners: { itemclick: function(view, record, item, index, e){// In the select the event does not fire . Ext.MessageBox.show({ title: ' Node actions ', msg: 'itemclick:index=' + index + ",text=" + record.data.text, icon: Ext.MessageBox.INFO }); } } //renderTo: 'simple-tree-div'//<div></div> }); // Register event actions treePanel.getSelectionModel().on('select', function(selModel, record){ Ext.MessageBox.show({ title: ' Node actions ', msg: 'select:modeType=' + selModel.mode + ",text=" + record.data.text, icon: Ext.MessageBox.INFO }); }); return treePanel; }
tree-check.js is a tree with a check box to extract the value of the selected tree:
function createCheckTree(){ var treeStore; var treePanel; var toolbarPanel; store = Ext.create('Ext.data.TreeStore', { root: { checked: false, expanded: true, text: " The root node ", 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: ' Selected node value ', 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: ' Node actions ', msg: ' The node is not selected ', 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; }
发表评论
-
extjs4.0----Grid To Grid拖拽示例
2016-02-08 22:14 655<script type="text/ja ... -
ExtJS4.2学习(15)树形表格
2016-02-08 22:04 593本节为ExtJS表格学习的最后一节,学完我将学习表单与输入控件 ... -
ExtJs4之TreePanel
2016-02-08 21:51 475Tree介绍 树形结构,是程序开发,不可缺少的组件之一。Ext ... -
ExtJS4.x treegrid 控件复选框的研究
2016-02-08 21:46 409最近在研究ExtJS4.x版本,官方在发布包中包含了一个tre ... -
Ext JS 2.0 IDE
2010-02-06 10:00 2008Aptana Studio 一谈到JavaScript ... -
Ext.data.Store介绍
2009-04-18 18:30 2045var store = new Ext.data.Stor ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2009-04-18 18:15 925Ext中包含了几个以get开 ... -
Ext2.0:Json 介绍以及与xml的区别
2009-04-18 18:12 1024转载:http://blog.csdn.net/wayfoon ... -
Ext2.0:Ext登陆窗口代码
2009-04-18 17:36 1652转载:http://blog.csdn.net/wayfoon ...
相关推荐
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
用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实现
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
主要介绍了ExtJs动态生成treepanel的Json格式的相关资料,需要的朋友可以参考下
ExtJs TreePanel应用ExtJs TreePanel应用
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
TreePanel的各项属性能帮助我们动态加载extjs tree
主要介绍了如何通过CSS样式来修改ExtJS:TreePanel的小图标,下面有个不错的示例,大家可以参考下
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
NULL 博文链接:https://yjzagan2003.iteye.com/blog/1110742