ExtJS：如何在组件函数中调用另一个函数生成的带参URL

我明白你的痛点——你想让城市下拉框跟着选中的国家动态切换数据源，但之前直接硬写URL或者尝试store.load()的方式没成功，核心问题是时机不对：要么初始化时国家还没选中，要么没有在国家变化时触发更新。下面给你一套可行的实现方案：

步骤1：重构城市下拉框的Store配置 #

首先修改getSettingsItems里的citycombo配置，去掉固定URL，关闭自动加载（因为一开始没有选中的国家，加载也没用）：

{
    xtype: "citycombo",
    itemId: "cityName",
    name: "city",
    afterLabelTextTpl: MyApp.Globals.required,
    allowBlank: false,
    flex: 1,
    store: {
        storeId: "cityCombo",
        proxy: {
            type: "ajax",
            url: '', // 先留空，后续动态设置
            reader: {
                type: "json",
                rootProperty: "data"
            }
        },
        pageSize: 0,
        sorters: 'description',
        autoLoad: false // 关闭自动加载
    }
}

步骤2：给国家下拉框添加选中变化监听 #

找到你表单里的国家下拉框配置，添加change事件监听——当选中的国家变化时，调用你的getSelectCountry获取带参URL，更新城市Store的代理地址并重新加载：

// 假设你的国家下拉框配置是这样的，添加listeners
{
    xtype: "countrycombo", // 替换成你实际的xtype
    name: "country",
    afterLabelTextTpl: MyApp.Globals.required,
    allowBlank: false,
    flex: 1,
    listeners: {
        change: function(combo) {
            // 获取当前SettingsWindow实例
            var windowInstance = this.up('window');
            var cityStore = Ext.getStore('cityCombo');
            
            if (!cityStore) return;
            
            // 调用你的方法生成带参URL
            var dynamicUrl = windowInstance.getSelectCountry();
            // 更新Store的代理URL
            cityStore.getProxy().setUrl(dynamicUrl);
            // 重新加载城市数据
            cityStore.load();
        }
    }
}

步骤3：优化getSelectCountry方法（可选但推荐） #

把全局查找组件改成在当前Window内查找，避免页面上有多个同名组件时出错，同时增加错误处理：

getSelectCountry: function(){
    // 用down方法在当前Window内精准查找国家下拉框
    var countryCombo = this.down('[name="country"]');
    if (!countryCombo) {
        console.error('未找到国家下拉框组件');
        return '';
    }
    
    var countryRecord = countryCombo.getSelectedRecord();
    if (!countryRecord) {
        console.error('未选中任何国家');
        return '';
    }
    
    var countryId = countryRecord.get('id');
    return MyApp.Globals.getUrl() + '/city/view/list/?countryid='+ countryId;
}

步骤4：处理初始化时的默认选中情况 #

如果页面加载时国家下拉框默认有选中值，需要手动触发一次城市加载，在SettingsWindow的initComponent方法里添加逻辑：

Ext.define('MyApp.view.weather.SettingsWindow', {
    extend: 'Ext.window.Window',
    // ...其他配置
    
    initComponent: function() {
        var me = this;
        me.callParent(arguments);
        
        // 初始化完成后，检查是否有默认选中的国家
        var countryCombo = me.down('[name="country"]');
        var defaultRecord = countryCombo.getSelectedRecord();
        
        if (defaultRecord) {
            var cityStore = Ext.getStore('cityCombo');
            var initialUrl = me.getSelectCountry();
            cityStore.getProxy().setUrl(initialUrl);
            cityStore.load();
        }
    },
    
    // ...你的getSelectCountry和getSettingsItems方法
});

为什么之前的方法没成功？ #

• 你之前尝试的store.load()如果是在初始化时调用，此时国家下拉框还没渲染完成或者没有选中值，会导致countryRecord为undefined，报错中断执行。
• 硬写URL的方式无法响应国家选中的变化，自然不能动态更新数据源。

按照上面的步骤实现，就能完美实现“选中国家→自动加载对应城市列表”的需求了。

内容的提问来源于stack exchange，提问作者Nuri Engin