EXTJS 4 树形表格组件使用演示样例
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时使用箭头( version=1&modificationDate=1412067101165&api=v2" alt="">)样式 |
rootVisible |
Boolean 默觉得true 是否显示根节点 |
multiSelect |
Boolean 默觉得false 能否够选中多行 |
具体代码參见
http://download.csdn.net/detail/shui878412/7994009
EXTJS 4 树形表格组件使用演示样例的更多相关文章
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- 01_MUI之Boilerplate中:HTML5演示样例,动态组件,自己定义字体演示样例,自己定义字体演示样例,图标字体演示样例
1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- MapGuide应用程序演示样例——你好,MapGuide!
图 3‑4显示了基于MapGuide的Web应用程序的开发流程,整个开发流程能够分为五个阶段.图中,矩形代表任务,椭圆形被任务使用的或被任务创建的实体,箭头代表数据流. 1) 载入文件类型的数据,配置 ...
- C#开发Unity游戏教程循环遍历做出推断及Unity游戏演示样例
C#开发Unity游戏教程循环遍历做出推断及Unity游戏演示样例 Unity中循环遍历每一个数据,并做出推断 非常多时候.游戏在玩家做出推断以后.游戏程序会遍历玩家身上大量的所需数据,然后做出推断. ...
- JDBC连接MySQL数据库及演示样例
JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识 JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...
- 最简单的视音频播放演示样例8:DirectSound播放PCM
===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...
- RHEL5 X86-64上安装Oracle 11gR2演示样例与总结
进入Oracle DBA行业也有好几年了,可是说到安装Oracle的经验,我还真不是特别多,印象中刚開始每次安装都有点磕磕碰碰,随着接触Oracle的时间越来越长,各方面的原理.机制也都有一定的了解后 ...
- 10分钟理解Android数据库的创建与使用(附具体解释和演示样例代码)
1.Android数据库简单介绍. Android系统的framework层集成了Sqlite3数据库.我们知道Sqlite3是一种轻量级的高效存储的数据库. Sqlite数据库具有以下长处: (1) ...
随机推荐
- JS 手机号中间4位变星号
一:正则方法 var str1 = '13991367972'var reg = /^(\d{3})\d*(\d{4})$/;var str2 = str1.replace(reg,'$1****$2 ...
- KVM中存储的配置
存储配置和启动顺序 QEMU提供了对多种块存储设备的模拟,包括IDE设备.SCSI设备.软盘.U盘.virtio磁盘等,而且对设备的启动顺序提供了灵活的配置. 1. 存储的基本配置选项 在qemu-k ...
- phpstorm使用Database关联数据库
1.如图选择mysql 配置数据库连接及shh 点击Test Connection,如果成功,即可点击ok连接mysql数据库 2.如图选择所有的表 3.更新数据
- Python+selenium(定位一组元素)
我们熟知Webdriver有8种定位元素的方法,但是当需要定位一组元素的时候,可以使用Webdriver提供的与之对应的8种用于定位一组元素的方法,分别是: find_elements_by_id() ...
- Leetcode 236.二叉树的最近公共祖先
二叉树的最近公共祖先 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x ...
- Linux 修改主机名
1 vi /etc/sysconfig/network 2 vi /etc/hosts 3 hostname xxx 4 Done! 退出重连后生效
- 聊聊flink的log.file配置
本文主要研究一下flink的log.file配置 log4j.properties flink-release-1.6.2/flink-dist/src/main/flink-bin/conf/log ...
- SGU515:Recover path 【最短路】
警告:这题卡SPFA,警告:这题卡SPFA 这不是演习 题目大意:给出一个无向图,以及一些点的序列,要找出一条最短的路径使得通过所有点,题目保证存在一条头尾都在点的序列中的最短路满足题意 思路:没有最 ...
- 【构造+DFS】2017多校训练三 HDU 6060 RXD and dividing
acm.hdu.edu.cn/showproblem.php?pid=6060 [题意] 给定一棵以1为根的树,把这颗树除1以外的结点划分为k个集合(可以有空集),把1加入划分后的集合 每个集合的结点 ...
- Atlantis(hdu1542)
题意:求n个矩阵的面积并. /* 线段树维护扫描线 把每个矩形看成两条线段,从左到右添加线段,如果是矩形左边的线段,那就给线段所在的区间(y值)cover+1,反之则cover-1. 并且如果这条线段 ...