Extjs grid 组件
表格面板类Ext.grid.Panel
重要的配置参数
columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
重要的配置参数
text : String 列的标题 默认是""
dataIndex : String 和Model的列一一对应的
sortable : true 可以整理,可以进行分类的
field: 可编辑字典配置
重要方法
getStore 返回当前页面所关联的store
重要属性
ownerCt
组件所属的 Container (当前组件被添加到一个容器 中时此值被自动设置)
title : String 表格的标题
renderTo : Mixed 把表格渲染到什么地方
width : Number 宽
height: Number 高
frame : Boolean 是否填充渲染这个Panel
forceFit : true 设定表格的列是否自动填充
store : store 数据集合
tbar: [] 头部工具栏
dockedItems : Object/Array 表格停靠在上下左右的工具条
selType : 'checkboxmodel', 选择框的选择模式
multiSelect :true,//允许多选
plugins 插件
Ext.ComponentQuery 组建查询去
Ext.grid.column 它包含了表头的的配置和单元格的配置。
列模式的住类
Ext.grid.column.Action xtype: actioncolumn
在表格中渲染一组图标按钮,并且为他赋予某种功能
altText : String 设置应用image元素上的alt
handler :function(view,rowindex,collndex,item,e);
icon : 图标资源地址
iconCls : 图标样式
items : 多个图标的数组
function(o,item,rowIndex,colIndex ,e)
stopSelection : 设置是否单击选中不选中
选择模式的根类Ext.selection.Model
重要方法
1.1撤销选择 deselect( Ext.data.Model/Index records,
Boolean suppressEvent ) : void
1.2得到选择的数据getSelection( ) : Array
1.3得到最后被选择数据getLastSelected( ) : void
1.4判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
1.5选择你指定的行selectRange( Ext.data.Model/Number startRow,
Ext.data.Model/Number endRow, [Boolean keepExisting],
Object dir ) : void
keepExisting true保持已选则的,false重新选择
隐藏了一个单元格的选择模式 selType: 'cellmodel'
得到被选择的单元格getCurrentPosition() Object
很实用选择你要特殊处理的数据 selectByPosition({"row":5,"column":6})
Ext.selection.CheckboxModel 多选框选择器
Ext.selection.RowModel rowmodel 行选择器
重要属性
3.1multiSelect 允许多选
3.2simpleSelect 单选选择功能
3.3enableKeyNav 允许使用键盘
Grid的特性Ext.grid.feature.Feature
Ext.grid.feature.RowBody 表格的行体
Ext.grid.feature.AbstractSummary
一个小的抽象类，包含在表格中使用的各种摘要计算的公共行为。
Ext.grid.feature.Summary
这个特性被用来在表格的底部放置一个摘要行
Ext.grid.feature.Grouping
分组地显示grid行集合
Ext.grid.plugin.DragDrop
主意:配置有变化
viewConfig:{ plugins:[ Ext.create('Ext.grid.plugin.DragDrop', { ddGroup:'ddTree', //拖放组的名称 dragGroup :'userlist', //拖拽组名称 dropGroup :'userlist' //释放租名称 enableDrag:true, //是否启用 enableDrop:true }) ] }
Ext.toolbar.Paging 分页组建
dockedItems: [{ xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }],
Paging Scroller 分页滚动条
表格支持无限滚动条的方式分页，有上千条数据时你可以一直滚动滚动条就可以加载(跟微博的无限滚动条一样)，没有一次渲染数千条的性能问题，需要做如下的配置
Ext.create('Ext.grid.Panel', {
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection: true,
});
demo 下载 https://github.com/ningmengxs/Extjs.git
