EXTJS实现Tree控件详解与实例

需积分: 3 31 浏览量更新于2024-07-26 收藏 256KB DOC 举报

"这篇资源是关于EXTJS中Tree控件的实例代码，展示了如何在Java环境中设置EXTJS的页面结构，包括引入必要的CSS和JavaScript库，以及如何编写JavaScript代码来操作Tree控件。" EXTJS中的Tree控件是一种用于显示层次结构数据的组件，它在用户界面中常被用来展示文件系统、组织结构或任何其他具有层级关系的数据。这篇实例代码详细地讲解了EXTJS Tree控件的使用方法。首先，代码中引入了EXTJS的核心库，如`extjs4.0/bootstrap.js`，这是EXTJS框架的基础，包含了所有组件和功能的实现。接着，引入了国际化文件`extjs4.0/locale/ext-lang-zh_CN.js`，使得EXTJS的提示信息和错误信息可以显示为中文。此外，还引入了自定义的公共函数文件`fn_function.js`，这可能包含了一些自定义的扩展功能或者与Tree控件交互的辅助函数。在HTML的`<head>`部分，设置了页面的元信息，如关键词和描述，以及禁止浏览器缓存的设置，确保每次访问都能获取最新的内容。同时，引入了EXTJS的样式表`ext-all-gray.css`和图标文件`icon.css`，以保证Tree控件的视觉效果。接下来的JavaScript部分，可以看到一个注释掉的`Ext.require`语句，这通常用于按需加载EXTJS的模块。在这个例子中，可能需要加载`Ext.form.*`、`Ext.tree.*`等模块，这些模块包含了创建表单和Tree控件所需的功能。在EXTJS中创建Tree控件，通常需要定义数据模型（Model）、数据存储（Store）和Tree视图（TreePanel）。数据模型定义了树节点的属性，数据存储负责加载和管理数据，而TreePanel则是实际在页面上展示的组件。树的节点可以通过JSON格式的数据进行填充，每个节点包括id、text、children等属性，其中children属性用于表示子节点。例如，创建一个简单的TreePanel可能如下： ```javascript Ext.application({ name: 'MyApp', launch: function () { var treeStore = Ext.create('Ext.data.TreeStore', { root: { text: '根节点', expanded: true, children: [ { text: '节点1', leaf: true }, { text: '节点2', expanded: true, children: [ { text: '子节点1', leaf: true }, { text: '子节点2', leaf: true } ] } ] } }); Ext.create('Ext.tree.Panel', { title: '我的树', width: 200, height: 200, store: treeStore, renderTo: Ext.getBody() }); } }); ``` 在这个例子中，我们创建了一个名为"MyApp"的应用，并在启动时创建了一个TreePanel。TreePanel的store使用了之前定义的treeStore，显示的根节点包含两个子节点，其中一个子节点又有两个叶子节点。 Tree控件提供了丰富的事件监听和操作方法，比如节点的点击、展开、折叠等，可以根据需求添加相应的事件处理器来实现特定的功能，如选中子节点后的保存和过滤操作。在实际的项目中，可能会结合后台数据动态加载节点，或者使用Ajax异步更新数据。 EXTJS的Tree控件是一个强大的工具，通过实例代码的学习，我们可以更好地理解和运用它来构建层次结构的用户界面。在实际开发中，根据业务需求进行适当的扩展和定制，可以实现复杂的数据展示和交互功能。

*********/

/**************************定义categoryTree的右击菜单开始**************

****************/

var contextMenu=Ext.create('Ext.menu.Menu',{//菜单

items: [{//当前容器中的子组件集合

text: '新增',

id:'popadd',

iconCls: 'addIcon', //菜单项图标

handler: addItemRecord //菜单项被点击时调用的方法

},{

text: '修改', //菜单项文本

id:'popedit',

iconCls: 'editIcon', //菜单项图标

handler: editItemRecord //菜单项被点击时调用的方法

},{

text: '删除', //菜单项文本

id:'popdelete',

iconCls: 'deleteIcon', //菜单项图标

handler: deleteItemRecord //菜单项被点击时调用的方法

},'-',{

text: '上传附件', //菜单项文本

id:'popupload',

iconCls: 'uploadIcon', //菜单项图标

handler: uploadfile //菜单项被点击时调用的方法

},'-',{

text: '下载附件', //菜单项文本

id:'popdownload',

iconCls: 'downloadIcon', //菜单项图标

handler: uploadfile //菜单项被点击时调用的方法

},'-',{

text: '刷新', //菜单项文本

id:'poprefresh',

iconCls: 'refreshIcon', //菜单项图标

handler: refreshItemRecord //菜单项被点击时调用的方法

}]

});

/**************************定义categoryTree的右击菜单结束**************

****************/

/**************************定义tree开始******************************

******/

var categoryStore=Ext.create('Ext.data.TreeStore', {//树的数据源

store

extend: 'Ext.data.Model',//继承自model组件

fields: [ //定义字段

{name: 'cid', type: 'string'},

{name: 'text', type: 'string'},

{name: 'level', type: 'int'},

{name: 'categoryid', type: 'string'},

{name: 'categoryname', type: 'string'},

{name: 'description', type: 'string'}

剩余30页未读，继续阅读

angelyao

粉丝: 0
资源: 1

EXTJS实现Tree控件详解与实例

Ext Tree实例：数据库增删改查操作方法

Ext MessageBox 使用详解与实例演示

EXT JS实战指南：以实例解析Ajax框架

利用Ext Js生成动态树实例代码

Ext拖动实例树和表格全

Ext grid与树实例

Ext拖动实例树和表格全 超实用

Ext源代码 bolg实例

EXT JS 实例集合

一个简单的Ext.XTemplate的实例代码

最新资源

Ext拖动实例树和表格全超实用