本文主要是介绍Ext4 简单的treepanel，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
树的使用是很频繁的，对树节点的各种操作。和数据库的互动操作。
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 SIMPLEvar 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;
}
这篇关于Ext4 简单的treepanel的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
