Apply extraParams to Store

[insomnix]

I am trying to pass the device location to the test url and return data. The problem is that I can't even pass a test string through. Placing data in the extraParams directly works fine, but every method I have tried to load the data dynamically fails. Below is the latest trial.

Ext.define('Pin.store.pinStore', {
    extend: 'Ext.data.Store',
    requires: [
        'Pin.model.pinData'
    ],

    config: {
        autoLoad: true,
        model: 'Pin.model.pinData',
        storeId: 'pinStore',
        proxy: {
            type: 'ajax',
            url: 'http://www.mysite.com/test.php',
            reader: {
                type: 'json'
            }
        },
        listeners: [
            {
                fn: 'onJsonstoreBeforeLoad',
                event: 'beforeload'
            }
        ]
    },

    onJsonstoreBeforeLoad: function(store, operation, eOpts) {

        Ext.apply(store.getProxy().extraParams, {
            name: 'test'
        });

    }

});

Can someone please tell me what I am doing wrong.

[ssamayoa]

Not quite sure what your problem is but I use a lot extraParams, ex:

someStore.getProxy().extraParams = {
param: someValue;
};
someStore.load();

[insomnix]

No joy with that method. I have also tried many others in the before load event, including:

store.load({
  params: {name: 'test'}
});

This is really starting to frustrate me.

[insomnix]

Since no one else has responded to this post, I decided to search for other methods again. Hear is what I have tried so far on the before load event on the store, and the error I took from the console:

store.getProxy().extraParams = {
    name: 'test'
};
store.load();

Uncaught RangeError: Maximum call stack size exceeded

store.proxy.extraParams.name='test'

Uncaught TypeError: Cannot read property 'extraParams' of undefined

store.getProxy().extraParams.name = 'test';

Uncaught TypeError: Cannot set property 'name' of undefined

I even tried placing some data in the extraParams on the store and then attempted to read that data in a popup:

alert( 'params ' + store.proxy.extraParams );

Uncaught TypeError: Cannot read property 'extraParams' of undefined

So either there is something seriously wrong with Architect, or there is no good documentation anywhere on how to do this. Any help would be appreciated.

[ssamayoa]

Sorry to hear your frustation but your problem has nothing to do with SA.

From the first code snippet I have the sense that you are firing load() in beforeload or load events directly or indirectly.

The other code snippets are incorrect even if 3rd is accessing proxy correctly, extraParams is expected to be an object.

Showing just code snippets without a context is useless.

Upload a test case project and may be we can figure out what are you doing wrong.

Regards.

[insomnix]

Most of what I was testing were shots in the dark. I have also tried many similar functions in other places in my code and I just can't seem to pass any values to my test url. I have used Extjs 3 on projects and have never had trouble passing variables, but this is my first app and have never used Architect before. Here is the generated code from the rest of the app.

Application:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    models: [
        'pinData'
    ],
    stores: [
        'pinStore'
    ],
    views: [
        'pinContainer'
    ],
    name: 'Pin',

    launch: function() {

        Ext.create('Pin.view.pinContainer', {fullscreen: true});
    }

});

View:

Ext.define('Pin.view.pinContainer', {
    extend: 'Ext.Panel',

    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Pin',
                items: [
                    {
                        xtype: 'button',
                        hidden: true,
                        itemId: 'btnBack',
                        ui: 'back',
                        text: 'Back'
                    }
                ]
            },
            {
                xtype: 'list',
                itemId: 'pinList',
                itemTpl: [
                    '<div>{Name}</div>'
                ],
                store: 'pinStore'
            },
            {
                xtype: 'panel',
                itemId: 'mapPanel',
                items: [
                    {
                        xtype: 'map',
                        bottom: 0,
                        itemId: 'mymap',
                        left: 0,
                        right: 0,
                        top: 0,
                        useCurrentLocation: true
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onBtnBackTap',
                event: 'tap',
                delegate: '#btnBack'
            },
            {
                fn: 'onPinListItemTap',
                event: 'itemtap',
                delegate: '#pinList'
            },
            {
                fn: 'onMymapMaprender',
                event: 'maprender',
                delegate: '#mymap'
            },
            {
                fn: 'onPanelInitialize',
                event: 'initialize'
            }
        ]
    },

    onBtnBackTap: function(button, e, options) {
        button.hide();
        this.down("#mymap").hide();
        this.setActiveItem(0);
        this.down("#pinList").deselectAll();
    },

    onPinListItemTap: function(dataview, index, target, record, e, options) {
        this.setActiveItem(1);
        this.down("#btnBack").show();
        this.down("#mymap").show();
        this.down("#mapPanel").setData(record.data);
    },

    onMymapMaprender: function(map, gmap, options) {
        var lat, lng;
        var geoLocationOptions = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
        var position = navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,geoLocationOptions);

        function geoLocationSuccess(position) {
            lat = position.coords.latitude;
            lng = position.coords.longitude;

            var locations = [
                new google.maps.LatLng(lat, lng)
            ];
            for (var i = 0; i < locations.length; i++) {
                var m = locations[i];
                new google.maps.Marker({
                    position: m,
                    map: gmap,
                    draggable: false,
                    animation: google.maps.Animation.DROP
                });
            }
        }

        function geoLocationError() {
            Ext.Msg.alert('Error','Error while getting your location');
        }
    },

    onPanelInitialize: function(component, options) {

    }

});

I want to pass the current location of the device as lat and long to the server so I can return data relevant to the current location. Then I can put those items in the list and when the item is selected those locations show on the map. I am just hung up on how to get a variable passed to the extraParams.

[insomnix]

Anyone?

[bharatn]

use setExtraParam api

store.getProxy().setExtraParam('name', 'test');

[insomnix]

You are awesome, that works. I thought I had tried that before and it hadn't worked, but I guess I did it wrong. Thank you very much.

[dazashman]

Hi, I am having the same problem. I am glad to hear that this has solved your problem but I am having trouble working out where to add the setExtraParams api within Architect.

I am new to using Sencha so any help would be appreciated.