ExtJS：如何在另一个函数中调用一个函数？

Posted 2023-03-16

【中文标题】ExtJS：如何在另一个函数中调用一个函数？

【英文标题】：ExtJS: How to call a function within another function?

【发布时间】：2018-07-02 09:59:07

【问题描述】：

我知道有很多关于在另一个函数中调用一个函数的问题，但不幸的是，没有一个对我有用，或者我无法在我的项目中实现！

我有一个Window 类，里面有两个函数。第二个是通过combobox 获取带有 ID 的特定 URL 并返回它。我需要在第一个function 中使用这个生成的URL；

getSelectCountry: function()
        var countryRecord   = Ext.ComponentQuery.query('[name=country]')[0].getSelectedRecord();
        var countryId       = countryRecord.get('id');
        var urlWithId       = MyApp.Globals.getUrl() + '/city/view/list/?countryid='+ countryId;

        // var store =  Ext.getStore('cityCombo');
        // store.load(
        //     url : MyApp.Globals.getUrl() + '/city/view/list/?countryid='+ countryId,
        // );

        return urlWithId;
    

我需要在citycombo 中使用返回的urlWithId，在proxy 的url 内。它将根据以下国家/地区列出城市；

Ext.define('MyApp.view.weather.SettingsWindow',  
...
getSettingsItems: function () 
        var me = this;

        var settingsItems = [
           
                xtype: 'form',
                layout: type: 'vbox', align: 'stretch', pack: 'start',
                reference: 'settingsForm',
                items: [

                        xtype: 'citycombo',
                        itemId: 'cityName',
                        name: 'city',
                        afterLabelTextTpl: MyApp.Globals.required,
                        allowBlank: false,
                        flex: 1,
                        store: 
                            storeId: 'cityCombo',
                            proxy: 
                                type: 'ajax',
                                // I neeed returned URL with ID on here.
                                url: MyApp.Globals.getUrl() + '/city/view/list/', 
                                reader: 
                                    type: 'json',
                                    rootProperty: 'data'
                                
                            ,
                            pageSize: 0,
                            sorters: 'description',
                            autoLoad: true
                        
                    ,

我尝试过使用 store.load 或创建一个新变量并调用它，但我无法成功。

我会很高兴有任何想法。

---

更新

请查看屏幕截图：UI 和 code structure 我正在尝试获取由getSelectCountry 函数

(1)

生成的完整URL，并使用这个新返回的URL

(2)citycombo 上的城市查询/strong>。

【问题讨论】：

执行 console.log(countryId) 的结果是什么？

如果我理解正确的话，你想通过调用getSelectCountry函数来动态确定每个加载操作的URL，对吗？

@JorgeMejia 它给了我需要的integer id；例如 87 并且当控制台 urlWithId 生成我在 citycombo 上需要的确切 URL 时，例如：URL/city/view/list/?countryid=97

@Alexander 我需要从countrycombo 获取此参数，例如?countryid=97，并将其传递到citycombo 的url 末尾，例如URL/city/view/list/ ?countryid=97

【参考方案1】：

我看到了两种可能性：

扩展Alexander 的 解决方案。假设cityCombo 定义了设置url 或extraparams 的前加载回调，则在country 组合框上定义change 侦听器，并从那里调用cityCombo's load()。

见下文：

listeners: 
    change: function () 
        Ext.getStore('cityCombo')
            .load()
    
    

或者更好的是，从商店中删除 beforeload 并将那里的内容放在第一个 combobox 的 change 中

listeners: 
    change: function (combo, newValue) 
        var cityStore = Ext.getStore('cityCombo')
        cityStore.getProxy()
            .setUrl(getSelectedCountry());

        cityStore.load();
    

注意：您可以进一步重构它，摆脱 getSelectedCountry() 并在侦听器传递的组合上完成所有操作

在cityCombo 上使用过滤器而不是往返

编辑：修复了第一个代码块的显示，添加了缺少的 load() 调用。

【讨论】：

好的！大概我明白了！我已经在国家组合监听器中配置了这样的代码，它加载了我需要查询的确切 URL。但它不会将此 URL 加载到 citycombo 的代理 URL。仍然显示具有不同 countryid 的城市。

代码：change: function (combo, countryId) debugger; Ext.getStore('cityCombo') .getProxy() // .setUrl(this.getSelectCountry()) .setUrl(MyApp.Globals.getUrl() + '/city/view/list/?countryid='+ countryId)

我也应该配置citybombo 吗？比如listener 等待国家组合？

@NuriEngin：我的错。我忘记在setUrl() 之后将最终负载添加到链中（这样您就可以避免cityCombo 上的额外侦听器）。编辑答案。

哦，对了。另一个更正。就像现在我们在代理上调用load() 一样，它应该在商店里。我正在更新答案。

【参考方案2】：

如果都是关于那个微小的参数，那么您真正想要做的是在 store 的 beforeload 侦听器中填充 extraParams 属性。

listeners: 
    beforeload: function(store) 
        // Get countryRecord from somewhere...
        store.getProxy().setExtraParams("countryid", countryRecord.get('id'))
    

如果服务器/路径名也不同，也可以setUrl()。

相关小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2c8a

更新：

那么，你真正想做的事：

    xtype: 'combobox',
    queryMode: 'local',
    fieldLabel: 'Country',
    store: ...,
    listeners: 
        select: function(combo, countryRecord) 
            var cityStore = combo.nextSibling().getStore();
            cityStore.getProxy().setExtraParam('countryId', countryRecord.get('Id'));
            cityStore.load();
        
    ,
,
    xtype: 'combobox',
    queryMode: 'local',
    fieldLabel: 'City',
    store: ...,

【讨论】：

亲爱的@Alexander，我正在尝试这样做；正如您将在下面的屏幕截图中看到的那样，我有一个 window 包括三个组合。第一个组合用于国家，第二个组合用于城市。当我选择国家时，它将采用countryid，当点击城市组合时，将在城市组合上生成一个带有countryid 的新查询，例如 URL + city/list/countryid 以显示属于所选国家的城市。 屏幕截图：prnt.sc/i4s621

我不确定您的示例是否适用于此配置，但我会尝试实现它。

我在citycombo 下定义了监听器，并在beforeload 内添加了 debugger 但似乎它不会触发该功能。 listeners: beforeload: function (store) debugger; store.getProxy().setUrl(getSelectCountry);