正文

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

IP云
IP云V管理员/10 阅读
08/20
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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添加一些属性,这些属性是在展示树时必须使用的.这些属性详见例如以下:

名称
类型
默认值
说明
parentIdidTypenull父节点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