EXTJS----GRID笔记2

选择模型

当单击某一单元格时，需要被选中的为整行，则使用RowSelectionModel----行选择模型。行选择模型默认是支持多选的，如只能单选，需要设置singleSelect参数。

1

var grid = new Ext.grid.GridPanel ({

2

renderTo : 'grid',

3

store : store,

4

cm : cm,

5

sm : new Ext.grid.RowSelectionModel({singleSelect:true})

6

)};

表格视图---Ext.grid.GridView

Ext的表格控件都遵循MVC模型，Ext.data.Store可看做Model模型，Ext.grid.GridPanel中设置各种监听器可看做Controller控制器，而Ext.grid.GridView对应的就是View视图。通常情况下，不需要自行创建Ext.grid.GridView的实例，GridPanel会自行生成对应的实例，并可通过getView()函数来获取当前表格使用的视图实例。

1

Ext.get('scroll').on('click',function(){

2

grid.getView().scrollToTop();

3

})

当然，我们也可以为GridView设置初始参数：

1

viewConfig:{

2

columnsText:'显示的列',

3

scrollOffset:30, //表格右侧滚动条的宽度，默认是20px

4

sortAscText:'升序',

5

sortDescText:'降序',

6

forceFit:true

7

}

后台排序

Grid的后台排序只需在配置Ext.data.Store的时候配置remoteSort:true即可，这样下次排序的时候，Store会向后台提交两个参数：sort和dir。sort表示需要排序的字段，dir表示升序或降序(ASC/DESC)。

属性表格控件----PropertyGrid



1

var gird = new Ext.grid.PropertyGrid({

2

title:'属性表格',

3

autoHeight:true,

4

width:300,

5

renderTo:'grid1',

6

source:{

7

"名字":"不告诉你",

8

"创建时间":new Date(Date.parse('12/15/2007')),

9

"是否有效":false,

10

"版本号":.01,

11

"描述":"恩，估计没有啥可说的"

12

}

13

});

上述代码就很容易地构建出一个可编辑的Grid，且各个字段的编辑器都是对应的。如果需要只能看不能动的PropertyGrid，则：

1

grid.on("beforeedit",function(e){

2

e.cancel = true;

3

return false;

4

});

如果需要强制对name列排序，则需要修改Ext.grid.PropertyGrid.prototype.initComponent源码，将store.store.sort('name','ASC')注释掉即可。

下面示例了自定义编辑器的代码：

1

var grid = new Ext.grid.PropertyGrid({

2

title:'表格属性',

3

autoHeight:true,

4

width:300,

5

renderTo:'grid',

6

customEditors:{

7

'Start Time':new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))

8

},

9

soruce:{

10

'Start Time':'10:00 AM'

11

}

12

});

分组表格控件----Group

1

var reader = new Ext.data.ArrayReader({},[

2

{name:'id'},

3

{name:'sex'},

4

{name:'name'},

5

{name:'desc'}

6

]);

7


8

var data = [

9

[1,'male','name1','descn1'],

10

[2,'female','name2','descn2'],

11

[3,'male','name3','descn3'],

12

[4,'female','name4','descn4'],

13

[5,'male','name5','descn5']

14

];

15


16

var store = new Ext.data.GroupingStore({

17

reader:reader,

18

data:data,

19

groupField:'sex',

20

sortInfo:{field:'id',direction:"ASC"}

21

});

22


23

var grid = new Ext.grid.GridPanel({

24

store:store,

25

height:300,

26

columns:[

27

{header:'编号',dataIndex:'id'},

28

{header:'性别',dataIndex:'sex'},

29

{header:'名称',dataIndex:'name'},

30

{header:'描述',dataIndex:'desc'}

31

],

32

view:new Ext.grid.GroupingView(),

33

renderTo:'grid'

34

});

上述示例需要关注的是groupField，确定通过哪一项分组。令人困惑的是，GroupingStore要求必须设置sortInfo。同样，也可以通过grid.getView()来获取到Ext.grid.GroupingView的实例。

可拖放的表格



1

var rz = new Ext.Resizable('grid',{

2

wrap:true,

3

minHeight:100,

4

pinned:true,

5

handles:'s'

6

});

7


8

rz.on('resize',grid.syncSize,grid);

Resizable必须放在render之后，否则会出现问题。参数的构成：

第一个参数'grid'：就是说这个可改变大小的条是在div id="grid"这个元素上起作用。

wrap:true 这个参数会在构造Resizable时自动在指定id的外部包裹一层div。

minHeight:100 限制改变大小的最小高度。

pinned:true pinned就是显示蓝色细线和上面的三个小点，突出提示。如果为true，则一直显示；false则只当鼠标放到上面时才出现。

handles:'s' 's'即'south'。Ext中的东南西北对应上下左右，用来设置拖动的方向。

在同一个表格里拖放

只需将grid的属性enableDragDrop设置为true，表格就支持了拖拽。但这样还不能实现真正意义上的拖拽，总会显示一个禁止放下的图标。这是因为Grid里面没有设置DropTarget，就是放置被拖动数据的目标。对grid.container进行如下设置，让表格的容器成为DropTarget：

1

var ddrow = new Ext.dd.DropTarget(grid.container,{

2

ddGroup:'GridDD',

3

copy:false,

4

notifyDrop:function(dd,e,data){

5

//选中了多少行

6

var rows = dd.getDragData(e).rowIndex;

7

if (typeof(index) == 'undefined')

8

{

9

return

10

}

11


12

//修改store

13

for(i = 0 ; i < rows.length;i++) {

14

var rowData = rows[i];

15

if (!this.copy) store.remove(rowData);

16

store.insert(index,rowData);

17

}

18

}

19

});

Grid与右键菜单

Grid提供了4个与右键菜单有关的事件：

contextmenu : (Ext.EventObject e): 全局性的右键事件

cellcontextmenu:(Grid this,Number rowIndex, Number cellIndex,Ext.EventObject e): 单元格的右键事件

rowcontextmenu:(Grid this,Number rowIndex, Ext.EventObject e): 行上的右键事件

headercontextmenu:(Grid this,Number colIndex, Ext.EventObject e): 表头的右键事件

原文地址：http://www.blogjava.net/zhengzhili/archive/2009/10/21/299161.html