var root = new Ext.tree.TreeNode({
id:"root",
text:"Sample"
});
var ITDep = new Ext.tree.TreeNode({id:"c1",text:"IT Dep",href:"http://www.sina.com",hrefTarget:"_blank",leaf:false});
var HRDep = new Ext.tree.TreeNode({id:"c2",text:"HR Dep",leaf:false});
root.appendChild(ITDep);
root.appendChild(HRDep);
ITDep.appendChild(new Ext.tree.TreeNode({id:"c3",text:"Leo",leaf:true}));
ITDep.appendChild(new Ext.tree.TreeNode({id:"c4",text:"Tom",leaf:true}));
ITDep.appendChild(new Ext.tree.TreeNode({id:"c5",text:"Ray",leaf:true}));
HRDep.appendChild(new Ext.tree.TreeNode({id:"c6",text:"Sarah",leaf:true}));
var tree = new Ext.tree.TreePanel({
renderTo:"hello",
root: root,
width:100
});
tree.on("click",function(node,event){
alert("click on "+node.text);
});
分享到:
相关推荐
学习example中的实际应用案例,如grid的拖拽和树的拖拽,可以帮助我们更好地掌握EXT 2.0的使用技巧,同时提升项目开发能力。 总之,EXT 2.0的源码和示例为开发者提供了一条深入理解EXT工作机制的路径,通过学习和...
最后,dmtest.jsp是我们的主JSP页面,它可能包含了EXT的配置和布局,以及调用前述的example4.js中的函数来初始化和操作TREE。在JSP页面中,我们可能看到类似以下的代码片段: ```jsp <%@ taglib prefix="ext" uri=...
var treePanel = Ext.create('Ext.tree.Panel', { store: treeStore, width: 200, renderTo: Ext.getBody() }); ``` 接下来,表格组件(GridPanel)是用于展示二维数据的,通常与数据存储(Data Store)结合使用...
{name: 'John Doe', email: 'john.doe@example.com', phone: '555-1234'}, // 更多数据... ] }); var columns = [ {header: 'Name', dataIndex: 'name', flex: 1}, {header: 'Email', dataIndex: 'email', ...
比如,你可以使用Ext.data.Store来存储和加载JSON数据,然后将其绑定到GridPanel、TreePanel等组件上。 ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url...
构建一棵静态的树通常需要预先定义好树的数据结构,然后通过 `Ext.tree.TreePanel` 的配置选项来展示。 **9.3 构建动态的树** 构建动态的树则需要在运行时通过 AJAX 调用等方式动态加载子节点。这通常涉及到使用 `...
<ext:treepanel id="tree" title="Tree Example" width="200" height="200"> <ext:root> <ext:node text="Node 1"> <ext:node text="Child Node 1.1"/> <ext:node text="Child Node 1.2"/> </ext:node> <ext:...
这个压缩包文件包含的示例和资源主要展示了如何利用ExtJS实现数据操作(增删改查)以及树形视图(TreePanel)的界面设计。 首先,"增删改查"(CRUD,Create、Read、Update、Delete)是任何数据驱动应用的基础功能。...
var treePanel = Ext.create('Ext.tree.Panel', { title: 'Tree Example', width: 200, store: treeStore, rootVisible: false, renderTo: Ext.getBody() }); ``` 在上述代码中,我们创建了一个TreeStore,并...
var treePanel = Ext.create('Ext.tree.Panel', { store: treeStore, title: 'Dynamic Tree', width: 300, height: 300, renderTo: Ext.getBody() }); ``` 5. **处理用户交互** 当用户点击节点时,可以...
var tree = new Ext.tree.TreePanel({ renderTo: 'tree-example', title: 'Tree Example', width: 300, root: new Ext.tree.AsyncTreeNode({ text: 'Root Node', expanded: true, loader: new Ext.tree....
3. **常用组件**:包括`Ext.grid.GridPanel`(表格)、`Ext.tree.TreePanel`(树形视图)、`Ext.form.FormPanel`(表单)等。 4. **自定义组件**:开发者可以根据需要创建自己的组件,实现特定的功能需求。 #### 五、...
Extjs4 Treegrid是基于Ext JS框架的一个模块,用于创建树形结构的数据网格。Ext JS是一个成熟的、基于JavaScript的前端框架,它提供了一套丰富的UI组件,用来创建丰富的交互式应用程序。Treegrid结合了树形视图和...