树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。
在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。
简单的Tree
代码：
<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>
treePanel展开所有，关闭所有
CatalogTtree.expandAll(); //展开所有节点
CatalogTtree.collapseAll(); //关闭所有节点
TreeGrid简例,带弹出window的form表单
代码：
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: ClassTreeGridStore,
multiSelect: false,
singleExpand: false,
columns: [{ //定义tree的列
xtype: 'treecolumn',
text: '分类名称', //显示的表头列名称
flex: 2,
sortable: true,
dataIndex: 'claName' //对应store的列字段名称
}, {
text: '最小分值',
flex: 1,
dataIndex: 'lowScroe',
sortable: true
}, {
text: '最大分值',
flex: 1,
dataIndex: 'topScore',
sortable: true
}]
, listeners: {
//点击行触发事件
itemclick: function (record, node) {
//把列的qcid传递给QuesGridStore刷新对应的grid或tree
QuesGridStore.load({ params: { csId: node.data.qcId } });
}
}
});
//弹出window的form表单
var AddForm = Ext.create("Ext.form.Panel", {
border: false,
fieldDefaults: {
msgTarget: 'side', //提示信息在右旁边显示图标
labelWidth: 105,
align: "right",
regexText: '格式错误', //错误提示
allowBlank: false //不与许为空
},
defaults: {
padding: 15,
width: 380
},
defaultType: "textfield",
items: [
{
xtype: "hidden",
name: 'pId',
},
{
fieldLabel: '父分类名称',
id: "pName",
name: 'pName',
disabled: true
},
{
fieldLabel: '兄弟分类名称',
id: "bName",
name: 'bName',
disabled: true
},
{
fieldLabel: '分类名称',
name: 'claName',
},
{
//表单中的数字控件
xtype: "numberfield",
fieldLabel: '最小分值',
name: 'lowScroe',
regex: /^\d+$/, //正则验证
maxLength: 100,
},
{ //表单中的数字控件
xtype: "numberfield",
fieldLabel: '最大分值',
regex: /^\d+$/,
regexText: '格式错误',
name: 'topScore',
}
]
});
//要弹出的window
var AddDialog = Ext.create("Ext.window.Window", {
iconCls: 'a_add',
closeAction: 'hide', //窗口关闭的方式：hide/close
resizable: false,
closable: true, //是否可以关闭
modal: true, //是否为模态窗口
items: AddForm,
buttons: [{
text: '添加',
iconCls: 'a_add',
id: "btnAdd",
handler: function () {
if (AddForm.form.isValid()) {
if (AddDialog.title == '添加兄弟分类') {
//O为兄弟分类，1为子分类
AddClass(0);
}
else {
AddClass(1);
}
}
}
},
{
text: '修改',
iconCls: 'a_edit', //样式
id: "btnEdit",
handler: EditClass
},
{
id: "btnCancel",
iconCls: 'a_cross', //样式
text: '重置',
handler: function () {
//重置AddForm.form表单
AddForm.form.reset();
}
}]
});
new Ext.Viewport({
layout: "border",
renderTo: Ext.getBody(),
defaults: {
bodyStyle: "background-color: #FFFFFF;",
frame: true
},
items: [{ region: "north", height: "60%", split: true, layout: "fit", border: true, items: [ClassTreeGrid] }
]
});
//添加分类
function AddClass(type) {
var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
var id = 0;
var leaf = false;
//兄弟分类
if (type == 0) {
id = rows[0].data.pId;
}
else {
id = rows[0].data.qcId;
}
Ext.Ajax.request({
method: "post",
url: "/queClass/Add",
params: { json: Ext.JSON.encode(AddForm.form.getValues()), id: id },
callback: function (options, success, response) {
if (success) {
var json = response.responseText;
json = Ext.decode(json);
ClassTreeGridStore.load();
Ext.Msg.alert("提示", json.msg);
AddDialog.hide();
}
else {
Ext.Msg.alert("提示", "系统繁忙");
}
}
});
}
//删除分类
function DelClass() {
var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
if (typeof (rows[0]) == "undefined") {
Ext.Msg.alert("提示", "请选择要操作的行！");
return false;
}
Ext.Ajax.request({
method: "post",
url: "/queClass/Delete/",
params: { qcId: rows[0].data.qcId },
callback: function (options, success, response) {
if (success) {
var json = response.responseText;
json = Ext.decode(json);
ClassTreeGridStore.load();
Ext.Msg.alert("提示", json.msg);
AddDialog.hide();
}
else {
Ext.Msg.alert("提示", "系统繁忙");
}
}
});
}
//修改分类
function EditClass() {
var rows = ClassTreeGrid.getView().getSelectionModel().getSelection();
if (typeof (rows[0]) == "undefined") {
Ext.Msg.alert("提示", "请选择要操作的行！");
return false;
}
Ext.Ajax.request({
method: "post",
url: "/queClass/Edit/",
params: { json: Ext.JSON.encode(AddForm.form.getValues()), qcId: rows[0].data.qcId },
callback: function (options, success, response) {
if (success) {
var json = response.responseText;
json = Ext.decode(json);
ClassTreeGridStore.load();
Ext.Msg.alert("提示", json.msg);
AddDialog.hide();
}
else {
Ext.Msg.alert("提示", "系统繁忙");
}
}
});
}
});