也谈谈Ext.Grid之记录用户使用习惯—隐藏列

在论坛看到http://www.iteye.com/topic/457854

 

自己有点想法,于是随手写了个示例:

 

功能: 用户点击grid的表头菜单显示/隐藏列,重新刷新页面后保留。

 

代码如下:

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '/images/s.gif';
  Ext.chart.Chart.CHART_URL = '/js/extjs/3.0/resources/charts.swf';
  Ext.QuickTips.init();
  testCookie();
});

function testCookie(){
  Ext.state.Manager.setProvider(
    new Ext.state.CookieProvider({
      expires: new Date(new Date().getTime()+(1000*60*60*24*365))
    })
  );
  var grid = new Ext.grid.GridPanel({
    width: 400,
    height: 200,
    autoScroll: true,
    trackMouseOver:false,
    ddGroup:'myDDGroup',
    sm:new Ext.grid.CellSelectionModel({}),
    cm: new Ext.grid.ColumnModel({
      columns:[
	      {header: '序号', dataIndex: 'id', sortable: true },
	      {header: '名字', dataIndex: 'name', sortable: true},
	      {header: '描述', dataIndex: 'descript', sortable: true}
	    ]
    }),
    viewConfig:{
      forceFit:true
    },
    renderTo:Ext.getBody(),
    store:new Ext.data.SimpleStore({
      fields:['id','name','descript'],
      data:[
        [1,'name001','this is name001'],
        [2,'name002','this is name002'],
        [3,'name003','this is name003'],
        [4,'name004','this is name004']
      ]
    }),
    
    stateful:true,
    stateId:'cookiegrid',
    //要存入cookie的数据
    getState: function(){
      return {initColumn:this.initColumn};
    },
    applyState:function(state, config){
      if(state){
        Ext.apply(this,state);
      }
      //根据cookie取值设置hidden与否
      var cm = this.getColumnModel();
      for(var k in state.initColumn){
        var col = cm.findColumnIndex(k);
        cm.setHidden(col,state.initColumn[k])
      }
    },
    listeners:{
      //afterrender是3.0新增的,2.2可以监听render
      'afterrender':function(grid){
        //监听事件,把cm的显示情况存入cookie(可优化为延迟保存)
        //没用stateEvents的原因是hiddenchange不是grid的事件,而监听beforedestory的话,用户刷新的时候不会执行。
        grid.getColumnModel().on('hiddenchange',function(cm,columnIndex,hidden){
          if(!grid.initColumn)grid.initColumn={};
          grid.initColumn[cm.getDataIndex(columnIndex)]=hidden;
          grid.saveState();
        });
      }
    }
  })
}

 

谢谢yiminghe兄的提醒...忘了GRID有覆盖这段实现了...见笑了..

 

下面还有一种我的写法,是用stateEvents的:

function testCookie(){
  Ext.state.Manager.setProvider(
	  new Ext.state.CookieProvider({
	    expires: new Date(new Date().getTime()+(1000*60*60*24*365))
	  })
	);
  var grid = new Ext.grid.GridPanel({
    width: 400,
    height: 200,
    autoScroll: true,
    trackMouseOver:false,
    ddGroup:'myDDGroup',
    sm:new Ext.grid.CellSelectionModel({}),
    cm: new Ext.grid.ColumnModel({
      columns:[
	      {header: '序号', dataIndex: 'id', sortable: true },
	      {header: '名字', dataIndex: 'name', sortable: true},
	      {header: '描述', dataIndex: 'descript', sortable: true}
	    ]
    }),
    viewConfig:{
      forceFit:true
    },
    renderTo:Ext.getBody(),
    store:new Ext.data.SimpleStore({
      fields:['id','name','descript'],
      data:[
        [1,'name001','this is name001'],
        [2,'name002','this is name002'],
        [3,'name003','this is name003'],
        [4,'name004','this is name004']
      ]
    }),
    
    stateful:true,
    stateId:'cookiegrid',
    //下面有把cm的该事件托管给grid
    stateEvents:['hiddenchange'],
    //要存入cookie的数据
    getState: function(){
      return {initColumn:this.getColumnModel().initColumn};
    },
    //恢复
    applyState:function(state, config){
      if(state){
        Ext.apply(this,state);
      }
      //根据cookie取值设置hidden与否
      var cm = this.getColumnModel();
      for(var k in state.initColumn){
        var col = cm.findColumnIndex(k);
        cm.setHidden(col,state.initColumn[k])
      }
    },
    listeners:{
      'beforerender':function(grid){
        grid.on('hiddenchange',function(cm,columnIndex,hidden){
          if(!cm.initColumn){
            cm.initColumn = {};
          }
          //监听事件,把cm的显示情况存入cookie
          cm.initColumn[cm.getDataIndex(columnIndex)]=hidden;
          this.saveState();
        },this);
        //托管事件
        grid.relayEvents(grid.getColumnModel(),['hiddenchange']);
      }
    }
  })
}

 

 

//tz

不需要这么麻烦的吧，应该直接设置 stateful stateId就可以了

var grid = new Ext.grid.GridPanel({
    width: 400,
    height: 200,
    autoScroll: true,
    trackMouseOver:false,
    ddGroup:'myDDGroup',
    sm:new Ext.grid.CellSelectionModel({}),
    cm: new Ext.grid.ColumnModel({
      columns:[
	      {header: '序号', dataIndex: 'id', sortable: true },
	      {header: '名字', dataIndex: 'name', sortable: true},
	      {header: '描述', dataIndex: 'descript', sortable: true}
	    ]
    }),
    viewConfig:{
      forceFit:true
    },
    renderTo:Ext.getBody(),
    store:new Ext.data.SimpleStore({
      fields:['id','name','descript'],
      data:[
        [1,'name001','this is name001'],
        [2,'name002','this is name002'],
        [3,'name003','this is name003'],
        [4,'name004','this is name004']
      ]
    }),
    
    stateful:true,
    stateId:'cookiegrid'
});

Extjs 自带的 蛮好

来自 GridPanel.js 源码

//stateful 如果设置了，运行
initStateEvents : function(){
        Ext.grid.GridPanel.superclass.initStateEvents.call(this);
        this.colModel.on('hiddenchange', this.saveState, this, {delay: 100});
    },


//grid 的相关状态
getState : function(){
        var o = {columns: []};
        for(var i = 0, c; c = this.colModel.config[i]; i++){
            o.columns[i] = {
                id: c.id,
                width: c.width
            };
            if(c.hidden){
                o.columns[i].hidden = true;
            }
        }
        var ss = this.store.getSortState();
        if(ss){
            o.sort = ss;
        }
        return o;
    },

//初始恢复
applyState : function(state){
        var cm = this.colModel;
        var cs = state.columns;
        if(cs){
            for(var i = 0, len = cs.length; i < len; i++){
                var s = cs[i];
                var c = cm.getColumnById(s.id);
                if(c){
                    c.hidden = s.hidden;
                    c.width = s.width;
                    var oldIndex = cm.getIndexById(s.id);
                    if(oldIndex != i){
                        cm.moveColumn(oldIndex, i);
                    }
                }
            }
        }
        if(state.sort){
            this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);
        }
        delete state.columns;
        delete state.sort;
        Ext.grid.GridPanel.superclass.applyState.call(this, state);
    }

谢谢yiminghe兄的提醒...忘了GRID有覆盖这段实现了...见笑了..

受用，原来Ext都自带了的。不过自己写一下也无坏处，培养一下思维能力。

把下面这段加到Grid怎么没有效果 ？

                stateful:true,  
		stateId:'cookiegrid',  
		// 要存入cookie的数据
		getState: function(){  
			return {initColumn:this.initColumn};  
		},  
		applyState:function(state, config){  
			if(state){  
				Ext.apply(this,state);  
			}  
			// 根据cookie取值设置hidden与否
			var cm = this.getColumnModel();  
			for(var k in state.initColumn){  
				var col = cm.findColumnIndex(k);  
				cm.setHidden(col,state.initColumn[k]);
			}
		},  
		listeners : {
			'beforerender' : function(grid) {
				grid.on ('hiddenchange', function(cm, columnIndex, hidden) {
					if(!cm.initColumn) {
						cm.initColumn = {};
					}
					// 监听事件,把cm的显示情况存入cookie
					cm.initColumn[cm.getDataIndex (columnIndex)] = hidden;
					this.saveState ();
				}, this);
				// 托管事件
				grid.relayEvents (grid.getColumnModel (), ['hiddenchange']);
			}
		}

能不能 说明一下 stateId:'cookiegrid'  这个属性的意思

看Component的api咯

stateId : String
The unique id for this component to use for state management purposes (defaults to the component id if one was set, otherwise null if the component is using a generated id).
See stateful for an explanation of saving and restoring Component state.


不需要像我的那么麻烦,看2楼的yiminghe的说法.

Ext自带的这个stateful,这个保持状态能保持多久？用户注销后重新登录就失效了，能否设置这个cookie的时间?

# Ext.state.Manager.setProvider( 
#       new Ext.state.CookieProvider({ 
#         expires: new Date(new Date().getTime()+(1000*60*60*24*365)) 
#       }) 
#     ); 

好东西啊。

savestate原来有这个功能。
没仔细看api和源码。罪过。