游乐游手机版
首页/前端开发/文章详情

Ext中store.load与reload区别及示例

时间:2026-06-11 07:10
ExtJS中Store的reload方法本质调用load,但会复用上一次请求的lastOptions参数,完全忽略新传入参数;而load则接收新配置,处理远程排序等功能,最终通过Proxy发起HTTP请求。

很多开发者困惑于 Ext JS 中 Store 的 load() 与 reload() 方法究竟有何区别。从源码角度分析,reload() 本质就是调用 load(),但它会自动复用上一次请求的配置参数。

查看 reload() 的实现,它会先将上一次请求的配置选项(lastOptions)合并,然后再次调用 load() 方法。这意味着:如果你使用 reload() 刷新数据,它不会理会你新传入的参数,而是完全按照之前的参数重新发起请求。

ext中store.load跟store.reload的区别示例介绍

复制代码 代码如下:

reload : function(options){ this.load(Ext.applyIf(options||{}, this.lastOptions)); },

再来看 load() 方法本身,它接收一个配置对象,然后调用 storeOptions() 处理参数。如果开启了远程排序(remoteSort)并且存在排序信息,还会自动将排序字段和排序方向拼接到请求参数中。最终通过 execute() 方法调用 Proxy 发起请求。

复制代码 代码如下:

load : function(options) { options = Ext.apply({}, options); this.storeOptions(options); if(this.sortInfo && this.remoteSort){ var pn = this.paramNames; options.params = Ext.apply({}, options.params); options.params[pn.sort] = this.sortInfo.field; options.params[pn.dir] = this.sortInfo.direction; } try { return this.execute('read', null, options); // <-- null represents rs. No rs for load actions. } catch(e) { this.handleException(e); return false; } },

Store 中 load() 与 reload() 的核心区别可以用一句话概括:load() 会带着你新传入的参数去请求数据,而 reload() 则沿用上一次的参数再请求一遍。用一个贴切的比喻:快递员送货时,如果你重新填写了地址,那就是 load();如果只是催他再送一次,他拿到的仍是上次填的地址,那就是 reload()。

因此在实际开发中,如果需要根据当前条件刷新数据,请使用 load() 并传入最新的参数;如果只想重新拉取一遍之前的数据,或者用于定时刷新,使用 reload() 会更加便捷。但需特别注意:reload() 会把上次的参数原封不动再次提交,包括分页信息、筛选条件等。如果中途改变了排序条件或查询条件,却忘记更新参数,直接调用 reload() 就会导致数据对不上的问题。

来源:https://www.jb51.net/article/51195.htm
上一篇Extjs Label组件字段标签与HTML属性值对齐的完整方法详解 下一篇Ext GridPanel数据加载完成后进行操作的详细示例代码
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
Layui弹出层监听子页面键盘快捷键实现方法
前端开发 · 2026-07-06

Layui弹出层监听子页面键盘快捷键实现方法

子页面键盘事件监听需在DOM加载完成后绑定,父页无法直接监听子页按键,必须由子页自身监听后通过parent或postMessage通知父页。典型写法为子页调用父页已定义的关闭函数。需注意焦点状态、输入法及layui版本兼容性等陷阱。

Layui表单提交时携带当前页面Meta信息的实现方法
前端开发 · 2026-07-06

Layui表单提交时携带当前页面Meta信息的实现方法

Layui表单提交不会自动携带页面Meta信息,需在form on( submit )回调中手动读取meta内容并拼接到表单数据,注意后端字段映射及特殊字符编码,多meta时按需选取。

HTML5拖拽事件流状态转移监控调试
前端开发 · 2026-07-06

HTML5拖拽事件流状态转移监控调试

HTML5拖拽事件流易因漏监听或未调用preventDefault而中断。需掌握dragstart设置数据、dragover接受放置、drop触发条件等关键点。通过统一日志捕获事件上下文、识别常见状态丢失场景并配合可视化面板,可清晰定位拖拽过程断点。

uni-app实现小红书商品详情图卡片切换
前端开发 · 2026-07-06

uni-app实现小红书商品详情图卡片切换

通过手写touch事件与transform控制五张卡片,动态计算translateX、scale、opacity及z-index模拟层叠滑动效果。滑动距离超过80rpx触发切换,否则复位。图片仅渲染当前及前后两张,有效优化加载性能与渲染效率。

图像旋转倾斜与扭曲的Canvas像素矩阵变换
前端开发 · 2026-07-06

图像旋转倾斜与扭曲的Canvas像素矩阵变换

Canvas图像变形本质是操作坐标系,图像被动跟随。旋转需先平移原点至目标中心再旋转后复位;倾斜通过仿射变换矩阵实现;扭曲无原生API,可用分块模拟或转用WebGL。每次变换前保存状态,完成后恢复,避免坐标系偏移。