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,表示单击就可以修改。
请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
技术博客集 - 网站简介:
前后端技术:
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用:
1.编程技术分享及讨论交流,内置聊天系统;
2.测试交流框架问题,比如:Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识,如有侵权请发邮件到站长邮箱,站长会尽快处理;
4.站长邮箱:[email protected];
文章归档
文章标签
友情链接