树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。
在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。
1.ExtJs4之Grid详细
2.ExtJs4之TreePanel
代码：
<head> <title></title> <link href="/ExtUI/ExtJs4.2.1/resources/CSS/ext-all.css" rel="stylesheet" type="text/css" /> <link href="/ExtUI/mecss/UIicon.css" rel="stylesheet" type="text/css" /> <script src="/ExtUI/ExtJs4.2.1/ext-all.js" type="text/javascript"></script> <script src="/ExtUI/ExtJs4.2.1/locale/ext-lang-zh_CN.js" type="text/Javascript"></script> <script type="text/javascript"> Ext.onReady(function () { //型录树Store var treeStore = Ext.create('Ext.data.TreeStore', { PRoxy: { type: 'Ajax', url: '/Tools/106.ashx?method=getCatalogItem&cataId=' + 886 }, fields: ['text', 'id', 'leaf', 'cataId'] }); //型录树 var CatalogTtree = Ext.create('Ext.tree.Panel', { store: treeStore, border: false, //边框 renderTo: Ext.getBody(), enableDD: true, rootVisible: false, //隐藏根节点 useArrows:true, //树节点使用箭头 containerScroll: true, collapsible: false, autoScroll: false, //singleExpand:true //展示单个子节点，其它的子节点合并。 }); CatalogTtree.expandAll(); //展开所有节点 //CatalogTtree.collapseAll(); //关闭所有节点 }); </script></head>View Code
treePanel展开所有，关闭所有
CatalogTtree.expandAll(); //展开所有节点 CatalogTtree.collapseAll(); //关闭所有节点
代码：
Ext.onReady(function () { //获取store var ClassTreeGridStore = Ext.create('Ext.data.TreeStore', { model: 'Task', proxy: { type: 'ajax', actionMethods: { create: "POST", read: "POST", update: "POST", destroy: "POST" }, url: '/queClass/GetClassTreeStore' }, fields: ["qcId", "claName", "pId", "lowScroe", "topScore"], folderSort: true }); //获取tbar var tbar = Ext.create("Ext.toolbar.Toolbar", { items: [ { text: '添加兄弟分类', iconCls: 'a_add', handler: function () { AddDialog.setTitle("添加兄弟分类"); AddForm.form.reset(); Ext.getCmp("btnAdd").show(); Ext.getCmp("btnEdit").hide(); Ext.getCmp("pName").hide(); Ext.getCmp("bName").show(); if (typeof (ClassTreeGrid) == "undefined") { return false; } var rows = ClassTreeGrid.getView().getSelectionModel().getSelection(); if (typeof (rows[0]) == "undefined") { Ext.Msg.alert("提示", "请选择要操作的行！"); return false; } Ext.getCmp("bName").setValue(rows[0].data.claName); AddDialog.show(); } }, '-', { text: '添加子分类', iconCls: 'a_add', handler: function () { AddDialog.setTitle("添加子分类"); AddForm.form.reset(); Ext.getCmp("btnAdd").show(); Ext.getCmp("btnEdit").hide(); Ext.getCmp("bName").hide(); Ext.getCmp("pName").show(); if (typeof (ClassTreeGrid) == "undefined") { return false; } var rows = ClassTreeGrid.getView().getSelectionModel().getSelection(); if (typeof (rows[0]) == "undefined") { Ext.Msg.alert("提示", "请选择要操作的行！"); return false; } Ext.getCmp("pName").setValue(rows[0].data.claName); AddDialog.show(); } }, '-', { text: '删除', iconCls: 'a_cross', handler: DelClass }, '-', { text: '修改', iconCls: 'a_edit', handler: function () { AddDialog.setTitle("修改分类"); AddForm.form.reset(); Ext.getCmp("btnEdit").show(); Ext.getCmp("btnAdd").hide(); Ext.getCmp("bName").hide(); Ext.getCmp("pName").hide(); if (typeof (ClassTreeGrid) == "undefined") { return false; } var rows = ClassTreeGrid.getView().getSelectionModel().getSelection(); if (typeof (rows[0]) == "undefined") { Ext.Msg.alert("提示", "请选择要操作的行！"); return false; } AddForm.form.setValues(rows[0].data); AddDialog.show(); } }, '-', { text: "刷新", iconCls: "a_refresh", handler: function () { //刷新treepanel ClassTreeGridStore.load(); } }, '-', { text: '展开所有', iconCls: 'a_edit2', handler: function () { //展开所有函数 ClassTreeGrid.expandAll(); } }, '-', { text: '折叠所有', iconCls: 'a_lock', handler: function () { //折叠所有函数 ClassTreeGrid.collapseAll(); } } ] }); //treegrid var ClassTreeGrid = Ext.create('Ext.tree.Panel', { tbar: tbar, useArrows: true, rootVisible: false, store: ClassTreeGridS
新闻热点
疑难解答
