使用简单的配置就可以实现 store, columns, selModel , pagingToolbar ,
最重要的一点是实现分页时可以保持前一页的选中状态,
但是要遵守其中的一些规定,至于哪些规定呢,看下面的代码就知道啦!
代码如下:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ext.namespace('Ext.ux.grid');
-
- Ext.ux.grid.CollectGrid = Ext.extend(Ext.grid.GridPanel,{
-
-
-
-
-
-
- keepSelectedOnPaging: false,
-
-
-
-
-
- recordIds:new Array(),
-
-
-
-
-
- idColName:'',
-
-
-
-
-
- url: '',
-
-
-
-
-
-
- rowNumber : true,
-
-
-
-
-
-
- checkBox: true,
-
-
-
-
-
-
-
-
-
-
- CM_JR_Record: null,
-
-
-
-
-
-
- pagingBar: true,
-
-
-
-
-
-
-
-
- pagingConfig:{
- pageSize: 20,
-
- displayInfo: true,
- displayMsg: '当前记录数: {0} - {1} 总记录数: {2}',
- emptyMsg: '<b>0</b> 条记录'
- },
-
- viewConfig:{
- forceFit: true
- },
-
-
- initComponent: function(){
- if(this.CM_JR_Record){
- this.init_SM_CM_DS();
- }
- if(this.pagingBar){
- this.init_PagingBar();
- }
- if(this.keepSelectedOnPaging){
- this.init_OnPaging();
- }
- Ext.ux.grid.CollectGrid.superclass.initComponent.call(this);
- },
-
-
-
-
-
-
- init_SM_CM_DS: function(){
- var gCm = new Array();
- var gRecord = new Array();
-
- if(this.rowNumber){
- gCm[gCm.length]=new Ext.grid.RowNumberer();
- }
- if(this.checkBox){
- var sm = new Ext.grid.CheckboxSelectionModel();
- gCm[gCm.length] = sm;
- this.selModel = sm;
- }
-
- for(var i=0;i<this.CM_JR_Record.length;i++)
- {
- var g = this.CM_JR_Record[i];
- if(g.visiable || g.visiable=='undefined' || g.visiable==null){
- gCm[gCm.length] = g;
- }
-
- gRecord[gRecord.length]={
- name: g.dataIndex,
- type: g.type || 'string'
- }
- }
-
-
- this.cm = new Ext.grid.ColumnModel(gCm);
- this.cm.defaultSortable = true;
-
-
- this.store = new Ext.data.Store({
-
- proxy: new Ext.data.HttpProxy({
- url: this.url,
- method: 'post'
- }),
- reader:new Ext.data.JsonReader({
- totalProperty: 'totalProperty',
- root: 'root'
- },
- Ext.data.Record.create(gRecord)
- )
-
- });
-
-
- this.pagingConfig.store = this.store;
-
- if(this.pagingBar){
- this.store.load({params:{start:0,limit:this.pagingConfig.pageSize}});
- }else{
- this.store.load();
- }
-
- },
-
-
-
-
- init_PagingBar: function(){
- var bbar = new Ext.PagingToolbar(this.pagingConfig);
- this.bbar = bbar;
- },
-
- init_OnPaging: function(){
-
- this.idColName = this.CM_JR_Record[0].dataIndex ;
-
- this.selModel.on('rowdeselect',function(selMdl,rowIndex,rec ){
-
-
- for(var i=0;i<this.recordIds.length;i++)
- {
- if(rec.data[this.idColName] == this.recordIds[i]){
- this.recordIds.splice(i,1);
- return;
- }
- }
-
-
- },this);
-
- this.selModel.on('rowselect',function(selMdl,rowIndex,rec){
- if(this.hasElement(this.recordIds)){
- for(var i=0;i<this.recordIds.length;i++){
- if(rec.data[this.idColName] == this.recordIds[i]){
- return;
- }
- }
- }
-
- this.recordIds.unshift(rec.data[this.idColName]);
-
- },this);
-
- this.store.on('load',function(st,recs){
- if(this.hasElement(this.recordIds)){
- st.each(function(rec){
- Ext.each(this.recordIds,function(item,index,allItems){
- if(rec.data[this.idColName] == item){
- this.selModel.selectRecords([rec],true);
- return false;
- }
- },this);
- },this);
- }
- },this);
-
- },
-
- hasElement : function(recIds){
- if(recIds.length > 0)
- return true;
- else
- return false;
- }
-
- }
- )
分享到:
相关推荐
在使用表格的分页功能时,我们把该控件的start与limits参数与Hibernate的分页功能影射,从页实现了动态的分页效果;而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
扩展的GridPanel,让其分页后保持选择状态
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
针对Gridpanel多表头的扩展,适用于2.2的ext版本,3以上的没有测试过,有兴趣的可以自己研究研究。
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便,下面是从网上搜到的解决方案。
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
EXT实例GridPanel. 实现简单的。
改变gridpanel的行颜色,以及gridpanel 的表格变色
EXT GridPanel获取某一单元格的值
NULL 博文链接:https://wv1124.iteye.com/blog/741559
Ext的gridpanel控件二次加载时丢失解决方案
Extnet GridPanel 增行 删行 弹出窗体 页面传值
gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊 gridpanel的使用,挺好的啊
NULL 博文链接:https://redboy5711.iteye.com/blog/259913