`
jameszhao83
  • 浏览: 67511 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

ext中tree以及viewport的使用方法

EXT 
阅读更多
Ext.onReady(function(){
   var btn=new Ext.Button({text:"按钮"});
   var tree=new Ext.tree.TreePanel({
    	     title:"tree test",
    	     width:300,
    	     height:300,
    	     root:new Ext.tree.AsyncTreeNode({
    	     text:"root node",
    	     children:[{text:"children1",children:[{text:"children12",leaf:true}]},
    	    	 {text:"children21",leaf:true}]
    	     })
    	});
	var vp=new Ext.Viewport({
		layout:"border",
		items:[{region:"north",height:100,title:"顶部"},{region:"west",width:120,title:"目录",items:[btn,tree]},{region:"center",title:"内容部分"}]
	});
});
  • 大小: 12.7 KB
分享到:
评论

相关推荐

    extTree例子点击出现等

    ExtTree是Ext JS库中的一个组件,用于创建和展示树形结构的数据。它在Web应用程序中广泛使用,特别是在需要组织和导航层次结构信息时。在本案例中,“extTree例子点击出现界面”指的是用户在浏览ExtTree时,通过点击...

    EXT下拉框显示树形结构源代码

    - 将COMBO TREE组件添加到一个布局容器(如EXT.container.Viewport或EXT.container.Box) 通过阅读和理解"ComboTree.js"文件的代码,你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能,这将对你的EXT...

    Ext Js权威指南(.zip.001

    6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 使用ext.fly获取元素 / 256 ...

    Ext JS 深入浅出 树形结构

    Ext JS 是一个强大的JavaScript框架,主要用于构建富客户端应用...通过对`Ext.tree.Panel`、`Ext.data.TreeNode`和`Ext.data.TreeStore`的深入理解和使用,我们可以创建出功能丰富的树形视图,满足各种业务场景的需求。

    EXT2.0中文教程

    4.6.1. ext中默认的提交形式 4.6.2. 使用html原始的提交形式 4.6.3. 单纯ajax 4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度,最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField ...

    checkbox tree extjs2

    var viewport = new Ext.Viewport({ layout: 'fit', items: [tree] }); ``` 在压缩包文件"tree2"中,可能包含了实现这个Checkbox Tree的示例代码、样式文件(如CSS)或测试数据。要深入学习和实践,你可以查看...

    ExtDemoProject.zip

    使用EXTJS 开发的DEMO 含有Ext.container.Viewport 使用 使用EXTJS 封装JQUERY的插件 Ext.dashboard.Dashboard 看板布局使用 Ext.tree.Panel 树型控件使用 ACE代码编辑器 在EXTJS中的使用

    ExtJs Tree

    根据给定的信息,我们可以深入探讨ExtJs中Tree组件的相关知识点,包括其定义、特性以及具体的配置选项等。 ### ExtJs Tree概述 ExtJs Tree是一种基于ExtJs框架的树形控件,它允许开发者构建出复杂的数据层次结构。...

    Ext组件描述,各个组件含义

    **2.12 Tree Panel (Ext.tree.TreePanel)** - **xtype**: `treepanel` - **功能描述**:Tree Panel 是一个树形结构的组件,可以用来展示层次结构的数据。 - **主要用途**:适用于展示目录结构或组织架构图。 **...

    Ext 开发指南 学习资料

    4.6.1. ext中默认的提交形式 4.6.2. 使用html原始的提交形式 4.6.3. 单纯ajax 4.7. 验证苦旅 4.7.1. 不能为空 4.7.2. 最大长度,最小长度 4.7.3. 借助vtype 4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField ...

    简单的EXT加载数据的例子

    在EXT框架中,Treepanel和Gridpanel是两个核心组件,它们分别用于展示和操作树形结构数据以及表格数据。本示例将详细介绍如何在EXT中加载数据,特别是通过EXT的Treepanel来呈现一个生成的树形结构。 首先,我们要...

    ExtTreePanel新增节点

    `ExtTreePanel`是ExtJS中的一个视图组件,它基于`Ext.data.TreeStore`来存储数据,并使用`Ext.tree.View`进行渲染。`TreePanel`提供了丰富的功能,如拖放操作、节点展开/折叠、节点选择等。 2. **添加节点的原理**...

    精通JS脚本之ExtJS框架.part1.rar

    6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...

    tree with tab

    var westPanel = Ext.create('Ext.tree.Panel', { title : '菜单', region : 'west', margins : '0 5 0 0', width : 200, store : store1, rootVisible : false, listeners : { ...

    Extjs之tree

    Ext.create('Ext.container.Viewport', { layout: 'fit', // 填充整个视口 items: [{ xtype: 'treepanel', title: '我的树', store: { root: { expanded: true, // 初始展开根节点 children: [ { text: '...

    extJs xtype 类型

    2. **`viewport`:** 视口组件,表示浏览器的可视区域,能够根据浏览器窗口大小自动调整其大小,通过`Ext.ViewPort`类实现。 3. **`box`:** 盒子组件,相当于HTML中的`<div>`元素,由`Ext.BoxComponent`类提供支持。...

    Extjs主界面生成导航

    1. 生成功能导航:在Extjs中,我们可以使用Tree Panel组件来生成导航菜单。首先,需要拖拽一个Tree Panel到“west”占位符中,以便在主界面中显示导航菜单。 2. 建立“导航模型”:在Extjs中,我们需要建立一个模型...

    Extjs treeGrid 本地数据 例子

    在本例的`typeTree.html`文件中,这可能是一个简单的`Ext.container.Viewport`或者`Ext.container.Window`。 在实际应用中,你可能需要处理各种事件,如节点的点击、展开或折叠,这时可以使用` listeners`配置项...

    ExtJS5.0 树形菜单实例

    将创建的TreePanel 添加到应用的容器中,例如viewport 或者其他的布局组件。 6. **后台交互** 如果数据需要动态从服务器获取,可以配置store 的proxy,使用Ajax 或者Restful 方式与后端接口交互。 7. **扩展功能...

    Extjs规范(自己的)

    报表页面应使用`Ext.grid.Panel`或`Ext.tree.Panel`展示数据,结合`Ext.data.Store`和`Ext.data.Model`进行数据处理。利用`Ext.toolbar.Toolbar`添加操作按钮。 4.3、功能性页面 功能性页面可能包含表单、对话框...

Global site tag (gtag.js) - Google Analytics