`
atian25
  • 浏览: 468820 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

分享到:
评论
11 楼 shily_yuanling 2009-11-30  
^^^^^^^
10 楼 kimmking 2009-10-19  
好东西啊。

savestate原来有这个功能。
没仔细看api和源码。罪过。
9 楼 atian25 2009-10-19  
showker 写道
Ext自带的这个stateful,这个保持状态能保持多久?用户注销后重新登录就失效了,能否设置这个cookie的时间?


# Ext.state.Manager.setProvider( 
#       new Ext.state.CookieProvider({ 
#         expires: new Date(new Date().getTime()+(1000*60*60*24*365)) 
#       }) 
#     ); 
8 楼 showker 2009-10-17  
Ext自带的这个stateful,这个保持状态能保持多久?用户注销后重新登录就失效了,能否设置这个cookie的时间?
7 楼 goodfifa08 2009-09-01  
很好很强大
6 楼 atian25 2009-09-01  
看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的说法.
5 楼 goodfifa08 2009-09-01  
能不能 说明一下 stateId:'cookiegrid'  这个属性的意思
4 楼 goodfifa08 2009-09-01  
把下面这段加到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']);
			}
		}

3 楼 showker 2009-08-31  
受用,原来Ext都自带了的。不过自己写一下也无坏处,培养一下思维能力。
2 楼 atian25 2009-08-31  
谢谢yiminghe兄的提醒...忘了GRID有覆盖这段实现了...见笑了..
1 楼 yiminghe 2009-08-27  
不需要这么麻烦的吧,应该直接设置 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);
    }

相关推荐

    Ext.grid.GridPanel属性祥解

    `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    var grid = new Ext.grid.GridPanel({ store: store, // 绑定数据存储 columns: [/* 定义列 */], plugins: [editor], // 使用 RowEditor 作为插件 title: 'My Grid', width: 500, height: 300, renderTo: ...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    这篇文章的标题指出这是一个关于“Ext.grid.plugin.RowEditing”的重构,版本为v1.4,发布日期为2011年9月11日。重构通常意味着代码的改进,可能涉及性能优化、错误修复或功能增强。在4.0版本中,RowEditing插件的...

    可编辑表格Ext.grid.EditorGridPanel

    Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...

    Ext grid panel 滚动条位置不变

    为了实现在数据刷新时滚动条位置不变的效果,我们需要对`Ext.grid.GridView`进行扩展或覆盖。具体做法是监听`beforerefresh`和`refresh`事件,在这些事件中记录并恢复滚动条的位置。 ##### 监听beforerefresh事件 ...

    Ext.grid.ColumnModel显示不正常

    Ext.grid.ColumnModel显示不正常

    Ext.ux.touch.grid-master.rar

    Ext.ux.touch.grid-master 提供了触摸优化的滚动、筛选、排序、分页等功能,同时支持自定义列渲染和行为,使开发者可以创建出高度定制化的数据展示界面。 此压缩包中可能包含以下内容: 1. `README` 文件:通常包含...

    Ext表格列锁定+多表头插件

    1. Ext.grid.GridView:这是Ext Grid的基础视图组件,负责渲染表格的行和列。 2. Ext.grid.LockingGridView:这是扩展的GridView,增加了列锁定功能。 3. Ext.grid.plugin.GroupHeader:这是一个插件,用于创建多级...

    Ext.get与Ext.fly的区别

    ### Ext.get与Ext.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...

    封装Ext.grid.Grid+dwr实现增删该查

    首先,`Ext.grid.Grid`是Ext JS框架中的核心组件之一,它提供了一个可滚动、可排序、可分页的表格视图,用于展示大量结构化数据。Grid可以通过配置列模型、数据源和各种插件,实现高度定制化的数据展示。例如,我们...

    extjs-Ext.ux.form.LovCombo下拉框

    `Ext.ux.form.LovCombo`通过特定的代码处理,确保在火狐浏览器中也能正确地获取用户的选择值。另一方面,“火狐下div不显示背景色的问题”可能涉及到CSS的渲染差异,`Ext.ux.form.LovCombo`对此进行了修正,使得...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    EXT.form组件

    EXT.form组件的事件处理也很重要,例如`Ext.form.TriggerField`的`onTriggerClick`事件,会在用户点击触发按钮时触发,通常用于执行下拉菜单的显示或隐藏操作。 EXT.form组件的灵活性和丰富性使得开发者可以轻松地...

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    在Ext JS库中,`Ext.grid.plugin.RowExpander`是一个扩展插件,用于在网格行中添加可展开的详情区域。在Ext4.2版本中,用户可能遇到一个特定的问题,即`RowExpander`的`collapsebody`和`expandbody`事件无法正常触发...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    Ext.data.Store的基本用法

    `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。本文将详细介绍`Ext.data.Store`的基本用法。 #### 二、创建Ext....

    Ext.form表单中各种属性应用详解

    ### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...

    Ext.window从右下角弹出/隐藏

    为了实现窗口的动态弹出和隐藏,使用了`Ext.TaskMgr`进行定时任务管理。其中,`upTask`用于控制窗口向上移动,而`downTask`则用于控制窗口向下移动。这两个任务的执行间隔均为`moveSpeed`,单位为毫秒。 ##### 4. *...

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

Global site tag (gtag.js) - Google Analytics