制作一个简单的Grid

 1ExtJs----Grid笔记var cm = new Ext.grid.ColumnModel([
 2);

Grid常用功能详解
    
enableColumnMove : true/false  //是否可拖放列
    enableColumnResize : true/false  //是否可以改变列的宽度
    stripeRows : true/false  //斑马线效果
    如果需要每列自动填满Grid,可以使用viewConfig配置中的foreceFit。即:

1);

    Gird支持中文排序需要重写Ext.data.Store的applySort函数:

 1;

在单元格中显示红色的字、图片和按钮

 1ExtJs----Grid笔记var cm = new Ext.grid.ColumnModel([
 2}

给Grid的行和列设置颜色
ExtJs----Grid笔记//设置行的颜色
}

1ExtJs----Grid笔记//修改列的颜色,使用renderer属性配置如下方法
2}

    当然,如果只想修改Grid某一行的样式,还可以用grid.getView().addRowClass(r,css);修改Grid某一单元格的样式,可以用Ext.get(grid.getView().getCell(r,c)).addClass(css)或grid.getVies().getRow(r).style.backgroundColor = "red"。

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

1;

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

1)

    当然,我们也可以为GridView设置初始参数:

1}

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

属性表格控件----PropertyGrid

 1);

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

1);

    如果需要强制对name列排序,则需要修改Ext.grid.PropertyGrid.prototype.initComponent源码,将store.store.sort('name','ASC')注释掉即可。
    下面示例了自定义编辑器的代码:

 1);

分组表格控件----Group

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

可拖放的表格
    
1rz.on('resize',grid.syncSize,grid);
    
    Resizable必须放在render之后,否则会出现问题。参数的构成:
    第一个参数'grid':就是说这个可改变大小的条是在div >  1);

分类:

技术点:

相关文章: