extjs学习四treePanel树的使用是很频繁的，对树节点的各种操作。和数据库的互动操作。tree.html:!DOCTYPE ht
extjs学习四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 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;}?
?