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

一、总体效果图

version=1&modificationDate=1412058826000&api=v2" alt="">

二、使用说明及效果图

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是静态数据时,使用该属性指定数据.若须要从server上动态获取,则能够使用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是使用的是加号(

version=1&modificationDate=1412067101165&api=v2" alt="">)样式

rootVisible

Boolean 默觉得true

是否显示根节点

multiSelect

Boolean 默觉得false

能否够选中多行

具体代码參见

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

EXTJS 4 树形表格组件使用演示样例的更多相关文章

  1. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

  2. 01_MUI之Boilerplate中:HTML5演示样例,动态组件,自己定义字体演示样例,自己定义字体演示样例,图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

  3. 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...

  4. MapGuide应用程序演示样例——你好,MapGuide!

    图 3‑4显示了基于MapGuide的Web应用程序的开发流程,整个开发流程能够分为五个阶段.图中,矩形代表任务,椭圆形被任务使用的或被任务创建的实体,箭头代表数据流. 1) 载入文件类型的数据,配置 ...

  5. C#开发Unity游戏教程循环遍历做出推断及Unity游戏演示样例

    C#开发Unity游戏教程循环遍历做出推断及Unity游戏演示样例 Unity中循环遍历每一个数据,并做出推断 非常多时候.游戏在玩家做出推断以后.游戏程序会遍历玩家身上大量的所需数据,然后做出推断. ...

  6. JDBC连接MySQL数据库及演示样例

    JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识         JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...

  7. 最简单的视音频播放演示样例8:DirectSound播放PCM

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  8. RHEL5 X86-64上安装Oracle 11gR2演示样例与总结

    进入Oracle DBA行业也有好几年了,可是说到安装Oracle的经验,我还真不是特别多,印象中刚開始每次安装都有点磕磕碰碰,随着接触Oracle的时间越来越长,各方面的原理.机制也都有一定的了解后 ...

  9. 10分钟理解Android数据库的创建与使用(附具体解释和演示样例代码)

    1.Android数据库简单介绍. Android系统的framework层集成了Sqlite3数据库.我们知道Sqlite3是一种轻量级的高效存储的数据库. Sqlite数据库具有以下长处: (1) ...

随机推荐

  1. JS 手机号中间4位变星号

    一:正则方法 var str1 = '13991367972'var reg = /^(\d{3})\d*(\d{4})$/;var str2 = str1.replace(reg,'$1****$2 ...

  2. KVM中存储的配置

    存储配置和启动顺序 QEMU提供了对多种块存储设备的模拟,包括IDE设备.SCSI设备.软盘.U盘.virtio磁盘等,而且对设备的启动顺序提供了灵活的配置. 1. 存储的基本配置选项 在qemu-k ...

  3. phpstorm使用Database关联数据库

    1.如图选择mysql 配置数据库连接及shh 点击Test Connection,如果成功,即可点击ok连接mysql数据库 2.如图选择所有的表 3.更新数据

  4. Python+selenium(定位一组元素)

    我们熟知Webdriver有8种定位元素的方法,但是当需要定位一组元素的时候,可以使用Webdriver提供的与之对应的8种用于定位一组元素的方法,分别是: find_elements_by_id() ...

  5. Leetcode 236.二叉树的最近公共祖先

    二叉树的最近公共祖先 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x ...

  6. Linux 修改主机名

    1 vi /etc/sysconfig/network 2 vi /etc/hosts 3 hostname xxx 4 Done! 退出重连后生效

  7. 聊聊flink的log.file配置

    本文主要研究一下flink的log.file配置 log4j.properties flink-release-1.6.2/flink-dist/src/main/flink-bin/conf/log ...

  8. SGU515:Recover path 【最短路】

    警告:这题卡SPFA,警告:这题卡SPFA 这不是演习 题目大意:给出一个无向图,以及一些点的序列,要找出一条最短的路径使得通过所有点,题目保证存在一条头尾都在点的序列中的最短路满足题意 思路:没有最 ...

  9. 【构造+DFS】2017多校训练三 HDU 6060 RXD and dividing

    acm.hdu.edu.cn/showproblem.php?pid=6060 [题意] 给定一棵以1为根的树,把这颗树除1以外的结点划分为k个集合(可以有空集),把1加入划分后的集合 每个集合的结点 ...

  10. Atlantis(hdu1542)

    题意:求n个矩阵的面积并. /* 线段树维护扫描线 把每个矩形看成两条线段,从左到右添加线段,如果是矩形左边的线段,那就给线段所在的区间(y值)cover+1,反之则cover-1. 并且如果这条线段 ...