extJs pass parameter from combobox selection to store creation via proxy

Question

I'm using ExtJs6, when I select an item in a combobox I want it to load a store using a proxy, passing a parameter from combobbox selection to the proxy. I also want to include the username and password from the login screen. (don't know how to save that part and reuse)

So far the method I use on combobox selection is as follows.

    onComboboxSelect: function (combo, record, eOpts) {

    console.log('new listener was hit');
    //console.log(combo);
    //console.log(record);
    //console.log(eOpts);
    //debugger;

    //return selected Item
    var selectedValue = record.get('ClientName');
    var selectedCID = record.get('ClientID');

    //return clientId from store
    //var storeClients = Ext.data.StoreManager.lookup('myClientListStoreID');
    //var targetRecord = storeClients.findRecord('ClientName', selectedValue);

    var newStore = Ext.create('ExtApplication1.store.PositionsStore');
    console.log(newStore);
    newStore.load({
        callback: function (records) {
            Ext.each(records, function (record) {
                console.log(record);
            });
        }
    });
    console.log(newStore);

    //load positions store???
    //var x1 = Ext.data.StoreManager.lookup('myStore');
    //var x2 = Ext.data.StoreManager;
    //console.log(x1);
},

How can I take a parameter from that... SELECTEDCID, and pass to the store creation below

var encodedFilename = Ext.urlEncode({
user: 'myUsername',
pw: 'myPassword',
cid: 'paramater from combobox selection'
});

Ext.define('ExtApplication1.store.PositionsStore', {
extend: 'Ext.data.Store',

model: 'ExtApplication1.model.PositionsModel',

storeId: 'myStore',

alias: 'store.positionsstore',

proxy: {

    type: 'ajax',
    url: 'http://localhost:51020/Service4.svc/DownloadPos?' + encodedFilename,

    reader: {
        type: 'json',
        rootProperty: 'data'
    }

},

autoLoad: false

});

lastly, how can I pass the username and password from my login window as well.

I EDITED COMBOBOX SELECT HERE......

    onComboboxSelect: function (combo, record, eOpts) {

    console.log('new listener was hit');
    //console.log(combo);
    //console.log(record);
    //console.log(eOpts);
    //debugger;

    //return selected Item
    var selectedValue = record.get('ClientName');
    var selectedCID = record.get('ClientID');


    //return clientId from store
    //var storeClients = Ext.data.StoreManager.lookup        
('myClientListStoreID');
    //var targetRecord = storeClients.findRecord('ClientName',  
selectedValue);


    //find the grid that was created
    var mainPortalView = Ext.getCmp('mainportalID');
    var targetGrid = mainPortalView.down('grid');

    //find the store associated with that grid
    var targetStore = targetGrid.getStore();
    console.log(targetStore);
    //debugger

    //load and add items to the store

    //targetStore.proxy.extraParams = {
    //    user: 'stephen',
    //    pw: 'forero',
    //    cid: selectedCID
    //};

    targetStore.load({
        params: {
            user: 'stephen',
            pw: 'forero',
            cid: selectedCID
        },
        callback: function (records) {
            Ext.each(records, function (record) {
                console.log(record);
            });

            console.log(targetStore);

            //var targetStore2 = targetGrid.getStore();
            //console.log(targetStore2);
        }
    });

I CREATE THE VIEW WITH GRID HERE

var myStore = Ext.create('ExtApplication1.store.PositionsStore');

var gridSummary = Ext.create('Ext.grid.Panel', {
    store: myStore,
    width: 600,
    title: 'my first grid',
    columns: [
        {
            text: 'AcctNum',
            dataIndex: 'AcctNum',
            width: 100
        },
        {
            text: 'AcctShortCode',
            dataIndex: 'AcctShortCode',
            flex: 1
        },
        {
            text: 'Exchange',
            dataIndex: 'Exchange',
            width: 200
        }
    ]
});



Ext.define('ExtApplication1.view.main.MainPortal', {
    extend: 'Ext.panel.Panel',

    xtype: 'mainportal',

    alias: 'widget.mainportal',

    id: 'mainportalID',

    html: 'user... this is the main portal window',

    autoScroll: true,

    bodyPadding: 10,

    items: [
        gridSummary
    ]

});

Answer 1

You can pass params for store.load method.

newStore.load({
    params: {
        user: 'myUsername',
        pw: 'myPassword',
        cid: 'paramater from combobox selection'
    },
    callback: function (records) {
        Ext.each(records, function (record) {
            console.log(record);
        });
    }
});

Answer 2

First things first -

1) You are creating a store everytime a value is selected. Please take that store creation code out of the select callback

2) From your store proxy, its visible that you are passing username and password(???) as parameters to a get call. Please don't even think about using the password there. The password should be input to only one service - the login service. Even there also you should encrypt the password.

Now to answer your question - In your select callback, get a reference to the store and then do the following -

var store = [YOUR_STORE]; store.proxy.extraParams = { user: 'myUsername' pw: 'myPassword', cid: 'paramater from combobox selection' }; store.load(....);

or if you only want to set the cid,

store.proxy.extraParams.cid = '......'; store.load(........);

Hope that helps :)