- 浏览: 468779 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
njliukang:
请问一下,如果是异步树,应该怎么解决?貌似用expandpat ...
ExtJS Tree刷新后自动展开并选择节点 -
xiaoyueyue5721:
这是ScriptDataSet,如果换成OdaDataSet呢 ...
Birt动态填充DataSet数据 -
leexiaodong2009:
我准备要用那个锁定。
ExtJS 3.0 优秀扩展简介 (持续更新) -
babyhhcsy:
pizza823 写道分享下另外中方法store里面不用变在列 ...
ExtJS EditorGridPanel中时间日期编辑问题的总结 -
冷月宫主:
高手,请问一下有没有使用Ext做过多表头锁定左侧指定列的处理? ...
仅供纪念,曾做过的一些界面截图
在论坛看到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和源码。罪过。
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的说法.
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就可以了
Extjs 自带的 蛮好
来自 GridPanel.js 源码
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); }
发表评论
-
[4.x] Ext.ux.button.AutoRefresher
2011-05-23 11:22 2826/** * @class Ext.ux.b ... -
ExtJS 4.x 定制你的js
2011-05-01 00:04 0... -
ExtJS4.x 随笔(2011-04-29更新)
2011-04-29 13:41 38761.某个激活/禁用的checkboxfield,需要提交后台的 ... -
ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)
2011-04-27 15:24 12781Ext4.0 自带的Ext.ux.RowEditing还不够完 ... -
ExtJS Tree刷新后自动展开并选择节点
2010-07-29 10:48 17785很久没写EXTJS的tip了... 今天帮组员写了一个 ... -
仅供纪念,曾做过的一些界面截图
2010-07-06 16:55 3583仅供记录用. 1.亚运(EXTJS) ... -
ExtJS3.x 随笔(2010-07-08更新)
2010-07-02 17:15 3657谨用该贴来记录一些使 ... -
Ext JS 3.2.0发布 -- 不少令人振奋的特性(更新翻译后的release-notes)
2010-04-01 15:02 3802不少令人振奋的新功能 1.form里面的复合组件 ---写 ... -
ExtJS EditorGridPanel中时间日期编辑问题的总结
2009-09-23 09:48 10289老是被反复问到这个问题,烦了...总结下... 1.首 ... -
Ext 3.0.1 Release Notes
2009-08-31 07:58 3968难熬的三天....JE终于恢复了.... 可惜要付费 ... -
ExtJS 常见问题 - by tz
2009-08-14 16:13 0经常在群里面被问到的一些问题,不如汇集起来算了... ... -
ExtJS 3.0 优秀扩展简介 (持续更新)
2009-08-14 10:14 17367自带示例里面的扩展就 ... -
ExtJS 2.3/3.0 定制你所需要的模块
2009-08-12 13:49 13303很实在的一个需求,就是 ... -
ExtJS Combo 下拉列表正常显示HTML标签内容
2009-08-11 15:02 5919解决问题: http://www.iteye.com/pro ... -
ExtJS 3.0 Designer Preview (官方的IDE可视化工具)
2009-08-11 12:35 24703原文地址: http://extjs.com/blog/200 ... -
ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案
2009-08-06 12:41 62522010-07-08补充: DateField隐藏的 ... -
ExtJS 输入框/MessageBox.prompt 禁止粘贴
2009-07-30 13:33 6804回答问题http://www.iteye.com/proble ... -
ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug
2009-07-27 16:16 11381如果你不知道lovcombo是什么,看http://setti ... -
续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)
2009-07-27 15:55 5989续前文:http://atian25.iteye.com/bl ... -
ExtJS Chart 扩展 - 增加对数据的过滤等操作
2009-07-24 17:41 921309.07.27 , 重构了下,详见:http://atia ...
相关推荐
`Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...
var grid = new Ext.grid.GridPanel({ store: store, // 绑定数据存储 columns: [/* 定义列 */], plugins: [editor], // 使用 RowEditor 作为插件 title: 'My Grid', width: 500, height: 300, renderTo: ...
这篇文章的标题指出这是一个关于“Ext.grid.plugin.RowEditing”的重构,版本为v1.4,发布日期为2011年9月11日。重构通常意味着代码的改进,可能涉及性能优化、错误修复或功能增强。在4.0版本中,RowEditing插件的...
Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
为了实现在数据刷新时滚动条位置不变的效果,我们需要对`Ext.grid.GridView`进行扩展或覆盖。具体做法是监听`beforerefresh`和`refresh`事件,在这些事件中记录并恢复滚动条的位置。 ##### 监听beforerefresh事件 ...
Ext.grid.ColumnModel显示不正常
Ext.ux.touch.grid-master 提供了触摸优化的滚动、筛选、排序、分页等功能,同时支持自定义列渲染和行为,使开发者可以创建出高度定制化的数据展示界面。 此压缩包中可能包含以下内容: 1. `README` 文件:通常包含...
1. Ext.grid.GridView:这是Ext Grid的基础视图组件,负责渲染表格的行和列。 2. Ext.grid.LockingGridView:这是扩展的GridView,增加了列锁定功能。 3. Ext.grid.plugin.GroupHeader:这是一个插件,用于创建多级...
### Ext.get与Ext.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...
首先,`Ext.grid.Grid`是Ext JS框架中的核心组件之一,它提供了一个可滚动、可排序、可分页的表格视图,用于展示大量结构化数据。Grid可以通过配置列模型、数据源和各种插件,实现高度定制化的数据展示。例如,我们...
`Ext.ux.form.LovCombo`通过特定的代码处理,确保在火狐浏览器中也能正确地获取用户的选择值。另一方面,“火狐下div不显示背景色的问题”可能涉及到CSS的渲染差异,`Ext.ux.form.LovCombo`对此进行了修正,使得...
Ext.grid.GridPanel 删除线 放到example文件夹下运行
EXT.form组件的事件处理也很重要,例如`Ext.form.TriggerField`的`onTriggerClick`事件,会在用户点击触发按钮时触发,通常用于执行下拉菜单的显示或隐藏操作。 EXT.form组件的灵活性和丰富性使得开发者可以轻松地...
在Ext JS库中,`Ext.grid.plugin.RowExpander`是一个扩展插件,用于在网格行中添加可展开的详情区域。在Ext4.2版本中,用户可能遇到一个特定的问题,即`RowExpander`的`collapsebody`和`expandbody`事件无法正常触发...
在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...
`Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。本文将详细介绍`Ext.data.Store`的基本用法。 #### 二、创建Ext....
### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...
为了实现窗口的动态弹出和隐藏,使用了`Ext.TaskMgr`进行定时任务管理。其中,`upTask`用于控制窗口向上移动,而`downTask`则用于控制窗口向下移动。这两个任务的执行间隔均为`moveSpeed`,单位为毫秒。 ##### 4. *...
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...