ExtJS: How to call a function within another function?

Question

I know there are a bunch of questions about calling a function in another function but unfortunately none of them worked for me or I couldn't implement to my project!

I've a Window class and two functions have been stated inside. The second one is getting getting a specific URL with ID through a combobox and returning it. I need to use this generated URL in the first function ;

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;
    }

and I need to use this returned urlWithId below in citycombo , within proxy 's url . It'll list cities depends on country that below;

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
                        }
                    },

I've tried use store.load or create a new variable and calling it but I couldn't be success for any of tries.

I'll be pleasure for any idea.

---

UPDATE

• Please check those screen-shot: UI and code structure
• I'm trying to get this full URL generated by getSelectCountry function (1) and filter cities query on citycombo with this new returned URL (2) .

Answer 1

If it's all about that tiny parameter, what you really want to do is populate the extraParams property in the beforeload listener of the store.

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

If the server/pathname is also different, you can also setUrl() .

Relevant fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2c8a

UPDATE:

So, what you really want to do:

    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: ...,

Answer 2

I see two possibilities:

1. Extend Alexander's solution. Assuming the cityCombo has the beforeload callback defined setting the url or extraparams , You define a change listener on the country combobox, and calling cityCombo's load() from there.

See below:

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

Or even better, remove the beforeload from the store and put what's there in the change of the first combobox

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

        cityStore.load();
    }
}

Note: you could refactor it even further, getting rid of the getSelectedCountry() and doing all of it on the combo passed by the listener

2. Use filter on the cityCombo instead of the round trip

Edit: Fixed display of the first code block, addd missing load() call.