ExtJS中Store注册beforeload监听事件重新加载grid的方法,用于条件查询 如果我们使用条件查询过滤表格中的数据,而请求的是同一个URL,只是根据传入的参数不同而得到不同结果集的情况下,我们可以使用Store的addListener方法注册一个beforeload事件,在请求前注入参数:
grid.getStore().addListener({
beforeload:function(store,records,options){
store.baseParams = {
query:'true',
name:name //name为之前定义的变量
};
}
});要显示全部的话,可以重新传入不同的参数,让后台根据参数进行不同的处理:
grid.getStore().addListener({
beforeload:function(store,records,options){
store.baseParams = {
query:'false',
name:name
};
}
});
先上核心代码,恍然大悟的直接去修改代码吧!
store.on('beforeload', function (store, options) {
var new_params = { name: Ext.getCmp('search').getValue() };
Ext.apply(store.proxy.extraParams, new_params);
// alert('beforeload');
});
在Ext 3 中的
store.on('beforeload', function () {
store.baseParams = {
name: '5555555',
intss: '666666666'
};
});
已经不适合与ext4 系列了。
下面给出完整的代码。原理很简单,将搜索条件放在store的baseParams中,每次加载都赋值。
只是需要强制赋值,因为默认的pagetoolbar只会把start、limit、page、sort、dir传递给store。
var store = new Ext.data.Store({
pageSize: GridPageSize,
model: 'Master',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/master/GetMasterData',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
fields: [
{ name: 'Id' },
{ name: 'Master_Name' }
//排序
sorters: [{
property: 'Master_Name',
direction: 'DESC'
分享到:
相关推荐
在开发基于ExtJS框架的应用程序...通过以上方法,开发者可以在ExtJS中有效地管理Store的加载过程,提供良好的用户反馈机制,增强应用程序的交互性和可用性。这些技术细节对于构建高效、响应迅速的Web应用程序至关重要。
- `load`事件:当Store从服务器加载数据时触发,可以在此事件中处理加载后的数据。 - `beforeload`事件:在数据请求发送到服务器前触发,可以在这里添加额外的请求参数,如排序条件或过滤器。 4. **后端接口**: ...
5. **事件监听**:可以通过监听`beforeload`和`load`事件来在数据加载前后执行额外的操作,如显示加载提示或处理加载错误。 6. **优化性能**:为了提高性能,可以使用`remoteSort`和`remoteFilter`配置项,让服务器...
- 监听`beforeload`事件,在数据开始加载前弹出提示框,比如使用`Ext.MessageBox.show()`创建一个消息框。 - 使用`load`方法的`callback`参数,当数据加载完成后执行,用于关闭提示框。 - 对于`reload`方法,同样...
本文将通过解析提供的代码片段以及结合ExtJS的相关API文档,详细介绍如何实现在ExtJS Grid中的行跨页选中功能。 #### 基本原理与步骤 要实现ExtJS Grid行跨页选中,主要涉及以下几个步骤: 1. **记录选中的项**:...
传递自定义参数,可以监听`beforeload`事件并在其中修改操作参数,或者直接修改store的proxy额外参数: ```javascript // 方法1:使用beforeload事件 treeStore.on('beforeload', function(store, operation) { ...
在ExtJS中,需要设置`store`的`pageSize`属性来指定每页的数据量,并监听`store`的`load`事件来更新分页状态。 3. **动画效果**:要实现动画效果,我们需要扩展(extend)默认的PagingToolbar和GridView。例如,`...
3. **事件监听**:`ds`数据存储在`beforeload`事件触发时,会更新请求参数。这里,`sto.baseParams.start` 和 `sto.baseParams.limit` 分别设置为分页工具栏的`cursor`(当前页开始的记录数)和`pageSize`,确保每次...
4. **监听事件**:你可以监听`load`事件来响应数据加载完成,`beforeload`事件可以在数据加载前执行某些操作,如添加额外的请求参数。 5. **自动加载**:通过设置`autoLoad`配置项,可以决定分页存储是否在创建后...
在此过程中,通过监听store的'beforeload'事件,可以在数据加载之前动态地添加请求参数,这样做可以确保每次数据加载都是最新的。 在创建gridpanel的过程中,使用了Ext.create方法,初始化了一个Ext.grid.Panel对象...
用户在分页工具栏上操作时,EXTJS会触发相应的事件,如`beforeload`(在加载数据前触发)、`load`(数据加载后触发)等。开发者可以通过监听这些事件来执行自定义逻辑,例如更新数据显示或者处理错误。 6. **...
ExtJS Tree 是一个基于JavaScript的UI组件库ExtJS中的一个重要组成部分,用于构建可交互的树形数据结构。在Web应用程序中,它常被用来展示层级关系的数据,如目录结构、组织架构或者数据库的表关系。ExtJS Tree的...
- `beforeLoad`: 数据加载前触发的事件,可以用来修改请求参数,如分页信息。 5. **事件监听和处理**: 为了响应用户操作,如单击行或分页按钮,需要添加事件监听器。例如,使用`addListener`或简写`on`方法添加...
- **事件**:组件有丰富的事件系统,如`click`、`select`、`beforeload`等,可以监听并响应这些事件。 4. **数据模型与存储** - **Store**:数据存储,用于管理数据集,与数据源进行交互,如XML、JSON等。 - **...