也谈谈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