EXTJS 4 树形表格组件使用示例

页面导航:首页 > 网络编程 > JavaScript > EXTJS 4 树形表格组件使用示例

EXTJS 4 树形表格组件使用示例

来源: 作者: 时间:2016-02-20 09:49 【

EXTJS 4 树形表 26684;组件使用示例一、整体效果图二、使用说明及效果图2 1、程序代码及说明:2 1 1、表 26684;存储部分的代码说明 开启tooltip工具 Ext QuickTips init();

一、整体效果图

\

二、使用说明及效果图

2.1、程序代码及说明:

2.1.1、表格存储部分的代码说明

//开启tooltip工具
    Ext.QuickTips.init();
    //定义model
    Ext.define('partModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'partNo',   type: 'string'},
            {name: 'partName', type: 'string'},
            {name: 'partVer',  type: 'string'}
        ]
    });
    //创建一个TreeStore
    var store = Ext.create('Ext.data.TreeStore', {
        model: 'partModel',
        root:treeGridData, //在其他文件中定义的静态树型数据
 
        folderSort: true
    });

属性 说明
root

Ext.data.Model/Ext.data.NodeInterface/Object

根节点,当使用store是静态数据时,使用该属性指定数据.若需要从服务器上动态获取,则可以使用proxy属性

proxy属性的使用可参见extjs 官方 api

folderSort

Boolean 默认为 false

当设置为true时,叶子节点总是会在非叶子节点后面.

treeGridData的具体内容请参见http://download.csdn.net/detail/shui878412/7994009

2.1.2、树节点MODEL说明

TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向TreeStore的model增加一些属性,这些属性是在展示树时必须使用的.这些属性详见如下:

名称 类型 默认值 说明
parentId idType null 父节点ID,计算出来model中ID的类型
index int null 可用于排序
depth int 0
expanded bool false 是否展开
expandable bool false 是否可以展开
checked auto null
leaf bool false
cls string null 样式
iconCls string null 图标样式
icon string null 图标路径
root boolean false 是否为根节点
isLast boolean false
isFirst boolean false
allowDrop boolean true 是否可以被删除
allowDrag boolean true 是否可以被拖动
loaded boolean false
loading boolean false
href string null
hrefTarget string null
qtip string null tooltip内容
qtitle string null tooltip标题
children auto null 子节点,一般是数组

在有需要的时候可以设置这些属性以达到我们想要的结果.如可以在store中通过指定icon/iconcls的值来设置树节点中的图片等.

2.1.3、表格显示部分的代码说明

var tree = Ext.create('Ext.tree.Panel', {
    title: 'Ext树型表格使用示例',
    width: 400,
    height: 300,
    renderTo: 'treeGridDiv',
    useArrows: true,
    rootVisible: false,
    store: store,
    multiSelect: true,
    defaults:{
        sortable: true
    },
    columns: [{
        xtype: 'treecolumn',
        text: '部件编号',
        flex:2,
        dataIndex: 'partNo'
    },{
        text: '部件名称',
        flex:1,
        dataIndex: 'partName'
    },{
        text: '版本',
        width: 70,
        dataIndex: 'partVer'
    }]
});


属性 说明
useArrows

Boolean 默认为false

true时使用箭头(\)样式,false是使用的是加号(\)样式

rootVisible

Boolean 默认为true

是否显示根节点

multiSelect

Boolean 默认为false

是否可以选中多行

详细代码参见

http://download.csdn.net/detail/shui878412/7994009

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<