定义对象 SimpleTreePanel： /* *操作面板 */ SimpleTreePanel=Ext.extend(Ext.tree.TreePanel,{ //菜单 menu: null , //构造方法 constructor: function (){ this .menu= new Ext.menu.Menu({ items:[{ text: 添加 , handler: this .onInse
定义对象SimpleTreePanel ：
/*
* 操作面板
*/
SimpleTreePanel = Ext.extend(Ext.tree.TreePanel, {
//菜单
menu : null,
//构造方法
constructor : function() {
this.menu = new Ext.menu.Menu({
items : [{
text : "添加" ,
handler : this.onInsertNode,
scope : this
},{
text : "删除" ,
handler : this.onDeleteNode,
scope : this
},{
text : "修改",
handler : this.onUpdateNode,
scope : this
}]
});
SimpleTreePanel.superclass.constructor.call(this, {
// 渲染
renderTo : Ext.getBody(),
// 宽度
width : 200,
// 高度
height : 400,
// 树的加载器
//loader : new Ext.tree.TreeLoader(),
// 根节点
root : new Ext.tree.AsyncTreeNode({
text : "人力资源管理系统", //根节点名称
id:"1", //节点编号(如果是远程数据源,这个id将会被隐式提交,而在服务端获取该id参数不是id,是node)
children : [{ //根节点的子节点
text : "人力资源档案管理",
children : [{ //当前节点的子节点
text : "登记",
leaf : true //指定
},{
text : "复核和查询",
leaf : true
},{
text : "变更和永久删除",
leaf : true
},{
text : "删除和恢复",
leaf : true
}]
},{
text: "招聘管理",
children : [{
text : "职位发布管理",
leaf : true
},{
text : "简历管理",
leaf : true
},{
text : "招聘考试管理",
leaf : true
},{
text : "招聘考试题库管理",
leaf : true
},{
text : "录用管理",
leaf : true
}]
},{
text: "薪酬管理",
children : [{
text : "薪酬发放管理",
leaf : true
},{
text : "薪酬标准管理",
leaf : true
}]
},{
text: "调动管理",
children : [{
text : "登记",
leaf : true
},{
text : "审核",
leaf : true
},{
text : "查询",
leaf : true
}]
},{
text: "统计报表",
children : [{
text : "人员基本信息",
leaf : true
},{
text : "薪酬分布",
leaf : true
}]
}]
}),
//监听事件
listeners:{
"contextmenu":{
fn:this.onContextmenu,
scope:this
}
}
});
},
//右击菜单点击事件
onContextmenu : function(_node,_e){
//为menu动态创建一个currentNode属性
this.menu["currentNode"]=_node;
//将右击菜单显示出来
this.menu.showAt(_e.getXY());
},
//添加节点事件
onInsertNode : function(){
Ext.Msg.prompt("请输入要添加的节点名称","节点名称:",this.onInsertNodePrompt,this);
},
//删除节点事件
onDeleteNode : function(_node,_e){
Ext.Msg.confirm("系统提示","你是否要删除此节点",this.onDeleteNodeConfirm,this);
},
//修改事件
onUpdateNode : function(){
//alert(this.menu["currentNode"].text);
Ext.Msg.prompt("请输入修改后的名称","名称",this.onUpdateNodePrompt,this,false,this.menu["currentNode"].text);
},
//prompt确定按钮事件
onUpdateNodePrompt : function(_btn,_text){
if(_btn=="ok"){
this.menu["currentNode"].setText(_text);
}
},
//confirm确定按钮
onDeleteNodeConfirm : function(_btn){
if(_btn=="yes"){
this.menu["currentNode"].remove();
}
},
//添加节点prompt确定
onInsertNodePrompt : function(_btn,_text){
if(_btn=="ok"){
//每次点击添加时,将当前节点变为非叶子节点
this.menu["currentNode"].leaf=false;
//给当前节点追加一个子叶子节点
this.menu["currentNode"].appendChild(new Ext.tree.AsyncTreeNode({
text : _text,
leaf : true, //是否为叶子节点
id:Ext.id() //使用Ext动态生成id机制
}));
//展开节点
this.menu["currentNode"].expand();
}
}
});
HTML页面调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/ext-base.js"></script>
<script language="javascript" src="js/ext-all.js"></script>
<script language="javascript" src="js/ext-lang-zh_CN.js"></script>
<script language="javascript" src="js/SimpleTreePanel.js"></script>
<script language="javascript">
Ext.onReady(function(){
new SimpleTreePanel();
});
</script>
<title>LocalSimpleTreePanel</title>
</head>
<body>
</body>
</html>
转载于：http://www.zjava.net/a/web/extjs/2011/0405/806.html
分享到：
相关推荐
Tree组件支持动态加载数据，这意味着在树展开时，可以异步地从服务器获取子节点数据，而不是一开始就加载所有数据，这在处理大量数据时非常有用。动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`...
它支持分页、排序、过滤、编辑等功能，并且可以与后台数据源进行双向绑定。在示例中，可能展示了如何创建一个基本的Grid，配置列模型，加载数据，以及实现基本的交互操作。 3. **Panel的使用**：Panel是ExtJS中的一...
7. **数据绑定**：EXTJS的树结构通常与后台数据源（如JSON或XML）绑定。当对树进行编辑时，相应的数据模型也需要同步更新。可以使用`store.load`或`store.sync`方法将更改同步到服务器。 8. **拖放操作**：EXTJS...
动态树的实现首先需要一个数据源，这个数据源可以是JSON格式的服务器响应，也可以是本地定义的数据结构。数据模型通常包含节点ID、父节点ID、节点文本、子节点等信息。例如： ```json [ { "id": "1", "text": ...
ExtJS4是一款强大的JavaScript库，特别适合构建富客户端应用，其中树组件（Tree）是其重要组成部分，用于展示层次化的数据。 首先，让我们了解基本的HTML页面设置。在示例中，`index.html`是应用程序的入口点，它...
ExtJS的Tree组件提供了强大而灵活的树形结构展示功能，无论是静态数据还是动态数据加载，都能轻松应对。通过深入理解其工作原理和API，我们可以构建出满足各种需求的树形界面，提升用户体验。在实际项目中，结合其他...
url: 'your_tree_data.json', // JSON 数据源 reader: { type: 'json', rootProperty: 'children' } } }); ``` 接着，创建 `TreePanel`，并将其设置为 `ComboBox` 的 `store`： ```javascript var treePanel...
2. **定义数据源**：创建符合JSON Tree格式的数据，可以是服务器端动态生成，也可以是静态数据。 3. **创建Combotree组件**：使用ExtJS的`Ext.create`方法，指定组件类型为`Ext.tree.Panel`，并配置相关属性，如...
`TreeStore`负责管理树的数据源，而`TreePanel`则用于展示这些数据。以下是一个简单的EXTJS动态树实现的步骤： 1. **定义数据模型（Model）**：首先，我们需要定义一个数据模型来描述树节点的结构。例如： ```...
这个组件可以静态填充数据，也可以动态从服务器获取数据。 创建一个基本的下拉列表需要以下步骤： 1. **创建 Store**: 首先，你需要定义一个数据存储（Store），用于存储下拉列表的选项。例如，你可以创建一个 ...
EXTJS的树形组件不仅支持静态数据展示，还能通过Ajax异步加载数据，实现动态树。这样的特性使得树结构可以随着用户的交互而更新，极大地提升了用户体验。 动态树的实现主要涉及以下几个关键知识点： 1. **EXTJS的...
这些示例涵盖了EXTJS4的各种组件和功能，包括表格（Grid）、面板（Panel）、表单（Form）、菜单（Menu）、工具栏（Toolbar）、树形视图（Tree）、图表（Charts）等。通过运行示例，你可以直观地看到组件的外观和交互...
在人力资源管理系统的上下文中，EXTJS可以用来创建各种组件，如表格（Grid）、表单（Form）、树形视图（Tree）等，以展示员工信息、管理招聘流程、处理考勤记录、进行绩效评估等。EXTJS的数据绑定机制使得与后台...
`Ext.data.DataProxy` 是 `Ext.data.Store` 的一部分，负责从数据源获取数据。常见的 `DataProxy` 类型包括： - **AjaxProxy**: 通过 AJAX 调用获取数据。 - **MemoryProxy**: 从内存中读取数据。 - **RestProxy**:...
"extjs-tree-editor-example" 指的是一个使用Ext JS库实现的树形面板编辑器的示例项目。这个项目展示了如何在树结构中进行数据编辑，并可能与表单面板的交互。"树面板项目"通常用于展示层次结构的数据，而"表单面板...
**Ext.Ajax, DataProxy, HttpProxy, MemoryProxy, ScriptTagProxy 类**：这些类涉及EXTJS的数据层，处理不同类型的远程数据源。 26-28. **DataReader, ArrayReader, JsonReader, XmlReader 类**：数据读取器，用于...
- 前端部分使用ExtJS 2.2构建用户界面，利用其丰富的组件（如Grid、Form、Tree等）展示文件列表、提供上传/下载功能，以及进行用户交互。 - 后端部分可能使用Java或PHP等技术处理文件的存储、检索和权限控制，与...
其数据绑定机制允许开发者将UI组件与数据源进行关联，实现数据的实时更新。同时，ExtJS有强大的主题系统，可定制界面样式。 2. **树形节点（TreeNodes）**：在ExtJS中，树形组件（TreePanel）用于展示层级结构的...
5. **Tree**：创建树形视图，可以是静态的，也可以是异步加载的，允许动态添加节点。 6. **Form**：提交表单使用Ajax，添加 ComboTree 字段，以及表单验证，确保数据的完整性和正确性。 与 ExtJS 相比，jQuery ...