【问题标题】:How to send extra parameters when loading a store to a combobox in ExtJS 4?将商店加载到 ExtJS 4 中的组合框时如何发送额外参数?
【发布时间】:2013-07-19 17:54:53
【问题描述】:

在 ExtJS 4 中为组合框使用 store 时如何发送额外参数?

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

即,如果我有一个使用名为“用户”的商店的网格,它将列出系统中的所有用户。同时,我有一个组合框,它也使用商店“用户”,但这次我想列出所有具有“状态=2”的用户,因此我想发送参数“&status=2”对后端的 Ajax 调用。

如果我使用类似的东西:

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

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

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

我还可以将商店复制到“Users2”并将其用于组合框,但这也是一个丑陋的解决方案。

这样做的正确方法是什么?对于大多数人来说,这一定是很常见的事情。

更新 1:

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

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

但是我将如何在 ExtJS 4 MVC 中使用它?我只是在表单对象中指定“商店:用户”。我如何将这些额外参数发送到 .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: Cannot read property 'ServersIP' of undefined”

但是名字是对的:

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 的参数中只有一个“一级”变量,它就可以工作。出于某种原因,当我传入 proxy => extraParams => param1 时,它不喜欢它。

这个有效:

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

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

【问题讨论】:

  • 在 store 中添加一个 beforeload 监听器

标签: javascript extjs extjs4 extjs4.1 extjs4.2


【解决方案1】:

您可以捕获 '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
            });
        }
    }
});

【讨论】:

  • Reviewer here:请简要说明您的代码是如何工作的,以帮助提问者更好地理解它。
  • @TheZver,在 Ext JS 6.0.1 中我不得不稍微更新一下: op.setParams(Ext.apply(op.getParams()||{},{ ...跨度>
【解决方案2】:

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

只需在 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'),
    ...
    ...
}

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

【讨论】:

    【解决方案3】:

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

    创建“用户”存储的新实例并更改其中的参数。

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

    【讨论】:

    • 代理在存储类的所有实例(和关联的模型)之间共享,因此将为MyApp.store.Users的所有实例设置extraParams...
    • 我的测试结果显示它确实为 MyApp.store.Users 的所有实例设置了 extraParams。
    【解决方案4】:

    您可以创建同一存储的新实例,而不是引用与网格相同的存储。这样两个商店实例是分开管理的。

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

    【讨论】:

    • 这听起来正是我想要的。但是,我无法让它工作。我已经更新了我的问题。
    • 是的可以确认它不起作用。尝试了 3 天......不走运,这是一个带有过滤器和存储的 extjs 错误。您甚至不能将额外的参数作为结果发布。
    【解决方案5】:

    你可以在你的store上设置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;
    });
    

    【讨论】:

    • 您的示例不使用 ExtJS 4 中使用的 MVC。我将如何在 MVC 中指定这些负载参数?我刚刚在表单对象上设置了“商店:用户”。
    • 另外,Grid 使用的是同一个 Store。将商店设置为“autoLoad=false”将迫使我在所有使用商店的地方手动加载商店。我在应用程序的许多地方都使用了该商店。
    • 对网格和组合使用相同的存储实例是在乞求问题。当您的组合过滤其商店以应用其查询时,这也将过滤您的网格。这可能不是你想要的。您应该通过使用xtypexclass 提供配置来为组合提供自己的商店。
    • 是的,这就是我现在拥有的方式,但我认为这是一个丑陋的解决方案。我希望能够使用一个通用存储,然后根据使用存储的对象应用参数。就像网格可能需要“&status=1&clean=1”,而组合框可能需要“&status=2&clean=0”。 ExtJS 默认不支持这个真是太糟糕了。所需要的只是能够将“参数”直接放在使用商店的对象上。
    • 您忽略了另一个问题,那就是数据绑定到视图。如果您在一个视图中更改同一个商店实例,另一个视图将随之更改,从而导致奇怪的意外问题。
    猜你喜欢
    • 1970-01-01
    • 2013-02-04
    • 2014-11-06
    • 2017-06-21
    • 2015-05-26
    • 1970-01-01
    • 1970-01-01
    • 2014-05-28
    • 1970-01-01
    相关资源
    最近更新 更多