zoukankan      html  css  js  c++  java
  • TreePanel 各项属性

    1、Ext.tree.TreePanel
    主要配置项:
    root:树的根节点。
    rootVisible:是否显示根节点,默认为true。
    useArrows:是否在树中使用Vista样式箭头,默认为false。
    lines:是否显示树线,默认为true。
    loader:树节点的加载器,默认为Ext.tree.TreeLoader。
    selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
    pathSeparator:树节点路径的分隔符,默认为“/”。
    singleExpand:是否一次只展开树中的一个节点,默认为true。
    requestMethod:请求方法,可选值有POST、GET。
    containerScroll:是否将树形面板注册到滚动管理器ScrollManager中。
    autoScroll:当内容超过预设的高度时自动出现滚动条。
    draggable:是否允许拖曳。
    enableDD:设置树的节点是否可以拖动。
    主要方法:
    collapseAll():收缩所有树节点
    expandAll():展开所有树节点
    getRootNode():获取根节点
    getNodeById(String id):获取指定id的节点
    expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )
    expandPath( String path, [String attr], [Function callback] )
    getChecked( [String attribute], [TreeNode startNode] )
    selectPath( String path, [String attr], [Function callback] )
    getSelectionModel():


    2、Ext.data.Node
    主要配置项:
    id:节点id
    leaf:当前节点是否为叶子节点
    主要属性:
    id:节点id
    attributes:节点属性的集合
    parentNode:当前节点的父节点
    childNodes:当前节点所有子节点组成的数组
    firstChild:当前节点的第一个直接子节点,如果没有则为null值
    lastChild:当前节点的最后一个直接子节点,如果没有则为null值
    nextSibling:当前节点的下一个兄弟节点,如果没有则为null值
    previousSibling:当前节点的前一个兄弟节点,如果没有则为null值
    主要方法:
    appendChild( Node/Array node ):追加新的子节点
    bubble( Function fn, [Object scope], [Array args] ):从当前节点开始向上迭代调用指定函数,如果指定函数返回false则将终止迭代。
    args:传入函数中的参数,默认为当前节点
    cascade( Function fn, [Object scope], [Array args] ):从当前节点开始向下迭代调用指定函数,如果指定函数返回false则将终止迭代。
    contains( Node node ):当前节点是否包含指定子节点。
    eachChild( Function fn, [Object scope], [Array args] ):迭代当前节点的所有子节点调用指定函数,如果指定函数返回false则将终止迭代。
    findChild( String attribute, Mixed value ):查找具有指定属性的第一个子节点。
    findChildBy( Function fn, [Object scope] ):根据自定义函数查找第一个符合要求的子节点,如果自定义函数返回true则说明匹配成功。
    getDepth():取得当前节点的深度,根节点的深度为0
    getOwnerTree():取得当前节点所在树。
    getPath( [String attr] ):取得当前节点对应的路径,这个路径在程序中可用于展开或者选择节点。
    attr:用于查找路径的属性,默认为节点id
    hasChildNodes():是否有子节点
    indexOf( Node node ):取得指定子节点的索引值,未找到返回-1。
    insertBefore( Node node, Node refNode ):在当前节点的指定子节点之前插入一个新的子节点。
    node:要插入的新节点
    isAncestor( Node node ):判断指定节点是否为当前节点的父节点(可以是任何一级中的父节点)。
    isFirst():是否为父节点的第一个子节点。
    isLast():是否为父节点的最后一个子节点。
    isLeaf():是否为叶子节点。
    item( Number index ):取得指定索引的子节点。
    remove():从父节点中删除当前节点。
    removeChild( Node node ):删除当前节点的指定子节点。
    replaceChild( Node newChild, Node oldChild ):用新的子节点替换当前节点的指定子节点。
    sort( Function fn, [Object scope] ):用指定的排序函数为当前节点的子节点进行排序。


    3、Ext.tree.TreeNode
    主要配置项:
    text:节点上的文本信息
    qtip:节点上的提示信息
    icon:节点图标对应的路径
    iconCls:应用到节点图标上的样式
    checked:当前节点的选择状态
    true:在节点前显示一个选中状态的复选框
    false:在节点前显示一个未选中状态的复选框
    不指定该值:不显示任何复选框
    href:节点的连接属性,默认为#
    hrefTarget:显示节点连接的目标框架
    editable:是否允许编辑,默认为true
    expanded:是否展开节点,默认为false
    disabled:是否禁用节点,默认为false
    singleClickExpand:是否通过单击方式展开节点
    allowChildren:是否允许当前节点具有子节点,默认为true
    expandable:当不含子节点时,是否总显示一个加减图标,默认为false
    uiProvider:节点的UI类,默认为Ext.tree.TreeNodeUI
    主要属性:
    text:节点上的文本信息
    disabled:当前节点是否被禁用
    主要方法:
    collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):收缩当前节点
    deep:是否级联收缩全部子节点
    collapseChildNodes( [Boolean deep] ):收缩所有子节点
    disable():禁用当前节点
    enable():启用当前节点
    ensureVisible( [Function callback], [Object scope] ):确保所有父节点都是展开的
    expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):展开当前节点
    expandChildNodes( [Boolean deep] ):展开所有子节点
    isExpanded():当前节点是否展开
    isSelected():当前节点是否被选中
    select():选择当前节点
    setText( String text ):设置当前的文本
    toggle():切换当前节点的展开和收缩状态
    unselect():取消对当前节点的选择
    getUI():取得节点的UI对象


    4、Ext.tree.AsyncTreeNode
    主要配置项:
    loader:当前节点的树加载器,默认使用树中配置的树加载器
    主要方法:
    isLoaded():当前节点是否已经加载数据
    reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数


    5、Ext.tree.TreeNodeUI
    主要方法:
    getAnchor():从节点的UI中获取焦点的<a>元素
    getIconEl():获取图标的<img>元素
    getTextEl():获取文本节点
    addClass( String/Array className ):
    removeClass( String/Array className ):
    hide():
    show():
    isChecked():取得节点的选择状态,如果当前节点没有复选框则函数返回false
    toggleCheck( Boolean (optional) ):设置节点复选框的选择状态


    6、Ext.tree.TreeNodeUI作为树形节点的视图,我们可以通过node.ui的方式获得某个Ext.tree.TreeNode实例对应的Ext.tree.TreeNodeUI。

    主要函数:

    addClass( )给节点增加样式;

    removeClass()给节点删除样式;

    getAnchor()获得页面上与树形对应的<a>标签;

    getIconEl()获得页面上与树形对应的<img>标签;

    getTextEl()获得页面上与树形对应的包含文字的<span>标签部分;

    hide()和show()函数可以控制树形节点是否隐藏;

    isChecked()函数可以判断节点中Checkbox状态;

    toggleCheck()函数可以修改节点中的Checkbox状态;

    7、Ext.tree.DefaultSelectionModel
    是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。
    主要方法:
    clearSelections():清除对树中所有节点的选择
    getSelectedNode():取得当前被选中的节点
    isSelected( TreeNode node ):节点是否被选中
    select( TreeNode node ):选中指定节点
    unselect( TreeNode node ):取消指定节点的选中状态
    selectNext():选择当前被选节点的下一个节点
    selectPrevious():选择当前被选节点的上一个节点


    8、Ext.tree.MultiSelectionModel
    是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。
    主要方法:
    clearSelections():清除所有节点的选中状态
    getSelectedNodes():取得被选节点组成的数组
    isSelected( TreeNode node ):节点是否被选中
    select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
    unselect( TreeNode node ):取消指定节点的选中状态


    9、Ext.tree.TreeLoader
    提供了对子节点的延时加载功能,请求指定的URL地址,返回子节点数据,返回的数据格式如下:
    [
    {
    id: 1,
    text: "node1",
    leaf: true,
    check: false
    },
    {
    id: 2,
    text: "node2",
    children: [
    {
    id: 3,
    text: "node3",
    leaf: true
    }
    ]
    }
    ]
    树节点展开时,当前节点的id会作为请求参数被发送到服务器,在服务器可以通过node参数名进行获取。
    主要配置项:
    dataUrl:获取子节点的URL地址。
    baseAttrs:子节点的基本属性对象,该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
    baseParams:基本的请求参数,这些参数会被附加到每一个节点的请求中
    clearOnLoad:在加载前是否移除已存在的子节点,默认为true。
    preloadChildren:在第一次加载子节点后是否递归加载所有子节点。
    requestMethod:请求方法,可选值有POST、GET。
    uiProviders:加载器创建子节点的UI实现类。
    url:与dataUrl作用相同。
    主要方法:
    load( Ext.tree.TreeNode node, Function callback, (Object) scope ):从指定的URL加载树节点。
    node:需要加载子节点的树节点。


    10、Ext.tree.TreeEditor
    主要配置项:
    alignment:对齐方式。
    editDelay:两次点击节点触发编辑操作的延时时间,默认为350毫秒。
    hideEl:在显示编辑器组件时是否隐藏绑定元素。
    maxWidth:编辑器的最大宽度,默认为250。


    11、Ext.tree.TreeSorter
    主要配置项:
    property:用于排序的节点属性名,默认为text。
    dir:排序方向,可选值有asc、desc,默认为asc。
    caseSensitive:是否区分大小写,默认为false。
    folderSort:叶节点是否排在非叶节点之下,默认为false。
    leafAttr:叶子节点在folder排序时的值,默认为leaf。
    sortType:一个自定义函数用于在排序前转换节点值。

    12、若要设置选中节点的属性node.setText(‘new node’),其他属性的设置可以模仿这种方式。

    13、tree.setRootNode( )设置根节点;root.appendChild(node1)表示把node1插到根上面,也就是root添加子节点node1;root.expand(true,true)其中第一个参数表示是否递归展开子节点,如果为false,就只展开第一级节点,下面的子节点仍然是折叠状态。第二个参数表示是否要动画效果。

    注意:若要出现树形效果,必须要给定一个初始高度,或者定义autoHeight为true。

    14、若要从本地读取json数据,需要写个文本文件为树形提供json数据。需要在TreePanel中设置属性loader:new Ext.tree.TreeLoader(dataUrl:’03-03.txt’},还得将根节点的TreeNode改成AsyncTreeNode,因为TreeNode不支持Ajax,无法生成子节点。若要实现读取本地js中的json数据,也需要设置loader,此处的url不需要设置,同样TreeNode改成AsyncTreeNode。

    注意:在txt文档里应定义节点的属性leaf:true,不然节点会无限循环下去。

    15、若要实现从后台读取数据,需要给根节点设置个id,然后dataUrl将jsp或php文件链上,注意节点的id不能重复。这里不能再使用root.expand(true)进行递归展开了,不然会导致树形节点不断向后台发送请求,直到所有的节点都展开为止,无法实现异步的效果。

    16、icon比iconCls的优先级高,iconCls只能设置背景图片,icon设置的是img中的src部分。

    17、若是将tree渲染到某个panel里,不能再用root.expand(true,true)实现根节点展开功能,需要在root中加一个属性expanded:true。

    18、TreeNode里的view部分称为UI,包括缩进用的空白,节点之间的连接线,节点展开和折叠的图标以及显示的标题。

    19、在弹出框属性中设置animEl:node.ui.textNode实现动态效果,是从节点飞出来的。

    20、可以设置节点href属性,以及在新页面打开hrefTarget:’_blank’

    21、treepanel事件有click,beforeload,contextmenu右键菜单事件,nodedrop,beforestartedit,complete等。

    22、从一棵树拖到另一棵树,需要分别设置enableDrag和enableDrop。

    23、clear( )表示清空过滤条件,这会让树形显示出所有节点;clearBlank:true表示如果查询的字符串是空字符串,就执行clear();autoClear:true表示每次过滤之前先执行clear(),否则会在上次过滤的结果上进行查询;remove表示会删除不符合过滤条件的节点,这样就不能使用clear()恢复为过滤之前的状态了。

  • 相关阅读:
    CSS3动画
    Grid布局
    JS向上取整、向下取整、四舍五入等
    JS DOM资料
    关于setInterval和setTimeout中的this指向问题
    JavaScript 高级技巧 Memoization
    请求接口的方式
    HTTP协议知识
    CSS样式重置
    Chrome 为什么使用多进程,不使用多线程
  • 原文地址:https://www.cnblogs.com/bailuobo/p/2626852.html
Copyright © 2011-2022 走看看