Extjs GridPanel 常用属性总结

编程技术  /  houtizong 发布于 3年前   55

1、gridpanel继承了panel，其xtype为Grid，表格的列信息有类Ext.grid.ColumnModel( )定义，表格的数据存储器由Ext.data.Store( )，存储器根据解析的数据不同，可分为 JsonStore，SimpleStore,GroupingStore等

 

2、cm中的列信息包括首部显示文本header，列对应的记录集字段dataIndex，列是否排序sortable，列的渲染函数renderer，宽度width，格式化信息format等

 

3、ds可以把任何格式的数据转化成gird可以使用的形式，有两部分proxy和reader，proxy指获取数据的方式，reader是指如何解析这堆数据。这里用Ext.data.MemoryProxy专门解析JavaScript变量的。需要一次store.load进行初始化。远程读取数据使用ScriptTagProxy。

 

4、在Ext.data.ArrayReader( {},[

     { name:'id',mapping:2}//说明将序列号这一列改成第三列

    ])

 

5、在创建Grid时，可以定义属性enableColumnMove：false和enableColumnResize:false可以禁用grid默认的拖放列和改变列的宽度。

 

6、stripeRows：true 实现斑马线效果

loadMask：true实现读取数据时的遮罩和提示功能，就是出现一个加载的框，但是store.load（ ）在建立grid之后

viewConfig:{forceFit:true}使每列自动填充grid，若设置了列的宽度，则会按照比例计算。

autoExpandColumn:‘descn’ 可以让指定列descn的宽度自动伸展，但必须在cm中指定列中定义id:’descn’，只能指定一列伸展

在ds中加入sortInfo:{field:’name’, direction:’ASC’} 将按照name这一列正向排序

 

7、在ds的reader里设置type:’date’ 和dateFormat:’Y-m-dTH:i:s’，其中type是reader解析时把这一列作为日期类处理，dateFormat是把得到的字符串转换成相应的日期格式，还需要在cm中添加一行配置，配置了renderer属性用于格式化日期格式的数据，renderer：Ext.util.Format.dateRenderer(‘Y-m-d’)，还要加上type:’date’属性

 

8、Value是单元格的值；cellmeta是单元格的相关属性，主要有id和css；record是这行数据的对象，如果要获取其他列的值，可以通过record.data['id']的方式得到；rowIndex是行号，columnIndex是列号；store是构造表格时传递的ds，也就是说表格的所有数据都可以通过store获得

 

9、自动行号的实现可以再cm中添加一行代码，放在最上面一行，new Ext.grid.RowNumberer( )

 

10、删除一行，可以创建一个id为remove的按钮，然后用代码Ext.get(‘remove’).on(‘onclick’,function(){

store.remove(store.getAt(1) );//删除第二行

Gird.view.refresh();//刷新行号

})

 

11、grid.GridPanel默认的是行选择模型，行选择模型默认的是支持多选的，鼠标点击时按住shift或ctrl键就可以选择多行，如果希望只选择一行，需要在grid中设置 sm:new Ext.grid.RowSelectionModel({singleSelect:true})，另外一个选择模型就是 CellSelectionModel单元格选择模型，每次只允许选择一个单元格，在EditorGrid里默认使用的就是单元格选择模型。

 

12、Var selections=grid.getSelectionModel( ).getSelections( );

先从grid中获得SelectionModel，再从选择模型中获得当前选中的数据,selecitons.length是选中的记录条数。若果需要判断是否选择了记录，只需要selections.length是否等于0即可。

注意：tree对象中也有两种选择模型，默认的是DefaultSelectionModel每次只能选择一个节点，另外还有一个MultiSelectionModel,它可以使用ctrl键选择多个节点（注意：不允许使用shift键）

 

13、grid.getView( )必须在创建Ext.grid.GridPanel之后调用，它只能获得grid创建好的GridView实例。在viewConfig中设置参数，columnsText，sortAscText，sortDesnText这三个参数分别用来设置表格中每列的下拉菜单中的‘显示的列’，‘升序’，‘降序’这3个部分显示的文字。scrollOffset:30 显示表格右侧滚动条预留的宽度，默认是20px;

 

14、若想出现滚动条，则需定义grid高度。

 

15、分页工具条用pageSize说明一页显示几条数据，displayInfo是否显示数据信息，displayMsg只有当 displayInfo为true时才有效，用来显示有数据时的提示信息，{0}，{1}，{2}会自动被替换成对应的数据，emptyMsg没有数据时显示的信息。注意用分页工具条时需要将store.load( )在构造grid之后。

 

16、若要从本地读取数据，这需要将MemoryProxy改成PagingMemoryProxy

 

17、若要进行远程排序，就需要在ds中设置remoteSort:true。

 

18、若要对表格进行编辑，需要在cm中增加属性 editor:new Ext.grid.GridEditor(new Ext.form.TextField({ allowBlank:false}))，还需要将GridPanel改成EditorGridPanel。默认双击单元格才能编辑，可以再grid修改增加属性clicksToEdit:1，表示单击就可以修改。