如何在ExtJS 4中将存储加载到组合框时发送额外的参数

How to send extra parameters when loading a store to a combobox in ExtJS 4?

本文关键字:参数 组合 ExtJS 加载 存储      更新时间:2023-09-26

在ExtJS 4中使用组合框存储时,如何发送额外的参数?

我知道我可以在代理设置中使用"extraParams",但这会影响所有使用同一存储的元素。

例如,如果我有一个网格,它使用一个名为"用户"的存储,它将列出系统中的所有用户。同时,我有一个组合框,它也使用存储"Users",但这次我想列出所有具有"status=2"的用户,因此我想将Ajax调用上的param"&status=2)发送到后端。

如果我使用类似的东西

store.getProxy().extraParams = {
  status: 2
};

它将工作,但网格将同时更新为也使用"&status=2"。我只希望组合框使用参数。

我想我可以关闭网格上的"自动更新",然后在组合框上的"渲染"事件上设置"extraParams",然后当组合框被隐藏时取消设置,但这将是一个非常糟糕的解决方案。

我也可以将存储复制为"Users2",并将其用于组合框,但这也是一个糟糕的解决方案。

正确的方法是什么?对大多数人来说,这一定是一件很普通的事情。

更新1:

我知道我可以使用类似的东西:

store.load({
  params:{
    'foo1': bar1,
    'foo2': bar2
  } 
});

但是我该如何在ExtJS 4 MVC中使用它呢?在表单对象中,我只指定了"store:Users"。如何将这些额外的参数发送到.load()函数?

我尝试过以下几种:

{
xtype: 'combobox',
fieldLabel: 'Server',
name: 'server',
//store: 'ServersIP',
store: new Cloud.store.ServersIP(),
/*
listeners: {
    beforeload: function(store, options) {
        console.log(store);
    }
},
*/
valueField: 'id',
displayField: 'name_id',
emptyText: 'Select a Server...',
editable: false
},

然而,它给出了错误"Uncaught TypeError:无法读取未定义的属性"ServersIP"

但这个名字是正确的:

Ext.define('Cloud.store.ServersIP', {
extend: 'Ext.data.Store',
model: 'Cloud.model.Server', 

另外,我应该把听众放在哪里?我想在我的例子中我也没有得到正确的答案?

更新2:

我现在有一个更进一步的解决方案:

store: Ext.create('Cloud.store.ServersIP', {
proxy: {
    extraParams: {
        param1: 'value1',
        param2: 'value2'
    }
},                          
}),

以上内容不起作用。如果我在Ext.Create的params中只有一个"一级"变量,它就会起作用。出于某种原因,它不喜欢我传入proxy=>extraParams=>param1。

这个有效:

store: Ext.create('Cloud.store.ServersIP', {
aaa: 'bbb'
}),

但当然,我的extraParams不在那里。有人知道如何修复最后一部分吗?

我刚刚解决了这个问题。组合框queryMode:带有额外参数的远程。

只需在initComponent内部的"VIEW"中实例化存储,并覆盖代理

//instantiate the store
var store = Ext.create('Cloud.store.ServersIP', {
    storeId: 'YourStoreId'
});
store.proxy.extraParams = { param1: 'value1', param2: 'value2' };

和在xtype中:combobox

//set combobox store
{
    xtype: 'combobox',
    queryMode:'remote',
    store : Ext.data.StoreManager.lookup('YourStoreId'),
    ...
    ...
}

我希望你能理解我提出的解决方案。

您可以创建同一存储的新实例,而不是引用与网格相同的存储。通过这种方式,两个存储实例被分别管理。

因此,在您的表单中,将store: 'Users'替换为store: new MyApp.store.Users(),然后您可以使用更适合您的方法(外部参数、加载参数、加载监听器之前等)

您可以捕获'beforeload'存储事件并更改当前加载操作。这样,参数就不会持久存在于其他请求中。

Ext.create('Ext.data.Store', {
    model: MyModel,
    autoLoad: true,
    listeners:{
        // Fires before a request is made. op is an Ext.data.Operation object
        beforeload:function(store,op){ 
            // Set request parameters (without overriding other parameters)
            op.params = Ext.apply(op.params||{},{
                someParam:true
            });
        }
    }
});

您可以在商店中将autoLoad设置为false,然后自己调用load方法,并使用params选项:

var store = Ext.create('My.Store', {
    autoLoad: false
    ...
});
store.load({
    params: {status: 2}
});

如果您只需要组合加载一次,然后在本地模式下进行查询,这将起作用。如果您需要组合对服务器进行多次调用(远程模式),请在商店的beforeload事件中设置参数:

comboStore.on('beforeload', function(store, operation) {
    operation.params = operation.params || {};
    operation.params.status = 2;
});

这是我能想到的最好的代码。不需要监听器:)

创建一个"users"-store的新实例,并更改该实例中的params。

xtype: 'combobox',
fieldLabel: 'Users',
name: 'users',
store: (function() {
  var s = Ext.create('MyApp.store.Users');
  s.proxy.extraParams = {
    active: '1'
  }
  return s;
})(),