`

轻松修改TreePanel 的图标样式 和 背景图片

    博客分类:
  • Ext
阅读更多
给树形结构定义图标 的css

.x-tree-node-collapsed .x-tree-node-icon{background-image:url(/foreigns/back/img/icon/book.png);}
.x-tree-node-expanded .x-tree-node-icon{background-image:url(/foreigns/back/img/icon/book_open.png);}
.x-tree-node-leaf .x-tree-node-icon{background-image:url(/foreigns/back/img/icon/page_white.png);}


加一个背景图片

var tree = new Ext.tree.TreePanel({
		bodyStyle:'background:url(/foreigns/back/img/logo/bgb.jpg) repeat;', 
		baseCls:'bgimage',
		border:false,
		root:root,
		loader:loader,
		rootVisible:false
	});



分享到:
评论

相关推荐

    通过CSS样式来修改ExtJS:TreePanel的小图标

    这里,我们使用`background`属性设置了新的图标图片(1.gif),并使用`transparent`让背景变为透明,保持与原有布局一致。 2. 修改展开状态图标: 对于已展开的节点,其类名会包含`.x-tree-node-expanded`。同样,...

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    Extjs入门教程(treePanel和GridPanel)

    在教程中,你可能会学到如何创建和配置TreePanel,包括加载数据、设置节点图标、处理节点的展开和折叠事件,以及添加拖放功能。TreePanel通常用于展现文件系统、组织架构或层级关系的数据。 GridPanel则是ExtJS中的...

    TreePanel 带复选框的树

    8. **图片资源**:`img`目录可能包含了TreePanel中使用的图标和其他图像资源。 综上所述,"TreePanel 带复选框的树"涉及的技术点包括TreePanel组件的使用、JSON数据格式、事件处理、CSS样式定制以及JavaScript库的...

    treePanel与gridPanel技术实现页面的增删改查

    在本文中,我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件,广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据,如文件...

    ext.net Menu + TreePanel

    它是一个强大的工具集,提供了多种组件,包括Menu(菜单)和TreePanel(树形面板),这两个组件在Web应用中广泛用于导航和数据组织。 Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单...

    Ext TreePanel

    TreePanel提供了一种交互式的树形视图,用户可以通过展开、折叠节点来查看和操作数据。 在Ext JS中,TreePanel是基于Ext.grid.Panel扩展的,它包含了树形数据的渲染和操作功能。TreePanel可以与Ext.data.TreeStore...

    ExtJS 3.4关于TreePanel的一些实例

    7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 11. 树形的拖放 12. 判断拖放目标 13. 树之间的拖放 14. 过滤器 15. 对树进行排序 16. 对树增加复选框 代码中有详尽的注释。

    Ext TreePanel Checked Ext复选框树

    综上所述,"Ext TreePanel Checked Ext复选框树"是一个强大的前端组件,它提供了便捷的多级选择功能,并且可以通过丰富的API和配置选项进行高度定制,以适应各种业务场景。在实际项目中,正确理解和使用这一特性,...

    用coolite布局,数据库绑定Treepanel,用Tabpanel显示

    通过将数据库中的数据绑定到TreePanel,可以实时更新和展示数据。这通常涉及到Ajax技术,通过异步请求获取服务器端的数据,并利用JSON或XML格式解析后填充到TreePanel中。 3. **TreePanel的节点点击事件**:在...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    在本文中,我们将深入探讨ExtJS库中的两个关键组件:TreePanel和TabPanel,并结合实际测试情况来理解它们如何协同工作。ExtJS是一款强大的JavaScript框架,用于构建富客户端应用程序,而TreePanel和TabPanel是其核心...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    TreePanel-test.0.2.rar

    7. **img**:图片文件夹,通常包含树节点的图标和其他视觉元素,如展开/折叠箭头,复选框图标等。 在大数据量场景下,一个优秀的树形组件必须考虑到性能问题。`TreePanel.js`可能会采用虚拟DOM技术,只渲染可视区域...

    无废话ExtJs 系列教程十五[树:TreePanel]

    - **folderIcon** 和 **leafIcon**:分别设置文件夹节点和叶节点的图标。 - **expandable**:设置节点是否可展开。 - **expanded**:默认是否展开节点。 - **animate**:是否启用动画效果。 4. **加载数据** ...

    extjs TreePanel

    - **useArrows**: 是否启用Vista样式的箭头图标来表示节点的展开和折叠状态,默认是`false`。 - **lines**: 控制是否显示连接节点的线条,默认是`true`。 - **loader**: TreePanel的加载器,用于从服务器获取或...

    Extjs做的treepanel+tab切换页

    通过以上分析,我们可以看出这个项目是如何利用ExtJS 3.2的强大功能,结合TreePanel 和TabPanel 实现了一个交互式的界面。这样的设计在很多业务场景中都有应用,比如文件管理系统、多文档编辑环境等,能够有效地提供...

    Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

    同时,`Treepanel_1.gif`和`Treepanel_2.gif`可能是对问题的示例展示,通过这些图片可以帮助理解问题的实际表现。 总的来说,解决EXTJS TreePanel的MultiSelectionModel重置问题需要深入理解EXTJS的组件模型和事件...

Global site tag (gtag.js) - Google Analytics