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