1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Answers
    1
    Vote Rating
    2
    tmcdonald is on a distinguished road

      0  

    Default Unanswered: Using a local JSON variable with a store

    Unanswered: Using a local JSON variable with a store


    I'm probably overlooking the obvious.

    I want to have a list control on a number of views that displays contents of a store. I want to use a local json object that I am pushing/popping data off of as the content of the store.

    How would I go about doing that?

    I thought maybe I could do something like this:

    Code:
    var store = Ext.getStore('MyStore');
    store.removeAll();
    store.setStore(this.jsondata);
    However, each time I try to call Ext.getStore() it returns as undefined.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Answers
    3498
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How are you creating the store?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Answers
    1
    Vote Rating
    2
    tmcdonald is on a distinguished road

      0  

    Default


    I am building the store as a json store. Right now I have it pointing at nothing. Should I create an empty file to point at?

    I'd like to build a variable up within my application (add and removing items to it as required) and then point to that variable as the store. I basically want to grab the most recent data and populate it within a list that would access the store.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Answers
    3498
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    No, like are you creating the store in the stores array in Ext.application? Are you creating the store somewhere else?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Answers
    1
    Vote Rating
    2
    tmcdonald is on a distinguished road

      0  

    Default


    Well I guess I naively created a Model and Store in the model/store folders. So MyApp.model.bc, and MyApp.store.bcstore.

    Code:
    Ext.define('MyApp.store.bsstore', {
        extend: 'Ext.data.Store',
        alias: 'store.breadcrumbstore',
        requires: [
            'MyApp.model.bc'
        ],
    
        config: {
            model: 'MyApp.model.bc',
            storeId: 'bcstore',
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json'
                }
            }
        }
    });
    I then create a json array within my controller to keep track of changes.

    From your comment, I'm obviously going about it completely wrong. Can you steer me in the right direction?
    What I'm trying to achieve is to build a "bread crumb" to allow the user to go back within the navigation view (and pop off the views until the clicked on view was visible) and my first thought was this could be achieved by using a horizontal list.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Answers
    3498
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You created the store definition with Ext.define and saving it to a js file in store directory. But how are you creating the store?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Answers
    1
    Vote Rating
    2
    tmcdonald is on a distinguished road

      0  

    Default


    Right now I suppose I'm not really creating a store at all. I've got a json variable in my controller that I'm populating with data, that I'd like to reference as the store. I could create an empty file on disk to point at if that is a reasonable starting point?
    I push data to the json variable with MyJsonVar.push(newdata);

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Answers
    3498
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Where are you requiring the store to be loaded if at all? Just creating the file isn't good enough, you should add the store to the stores array in Ext.application.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Answers
    1
    Vote Rating
    2
    tmcdonald is on a distinguished road

      0  

    Default


    Ok, I've added an empty json file, set the store to autoload, referenced the store from my list, and the store is in the stores list within my app.js / Ext.application.

    So how would I now set it up so that a variable gets referenced as the store? If I can at all?

    Looking at the TouchStyle example, it uses:
    Code:
    var store = Ext.getStore("Categories");
     
    ... 
    
    var productsStore = this.productsView.getStore();
    if (productsStore) {
    productsStore.removeAll();
    }
    this.productsView.setStore(store);
    So I thought I could do something like this:
    Code:
    var store = Ext.getStore("bcstore");
    store.setStore(myJsonData);
    However, store returns as undefined. This is why I wonder if I can in fact do what I'm trying to accomplish.
    I looked at the Categories store - it doesn't have an id or xtype, so I'm confused how the reference is working there, but not in my code. Obviously I'm overlooking something...

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Answers
    1
    Vote Rating
    2
    tmcdonald is on a distinguished road

      0  

    Default


    I've figured out how to use a local store and place the results in a horizontal list if anyone else is interested:

    Code:
    Ext.define('MyApp.store.MyJsonStore', {
        extend: 'Ext.data.Store',
        requires: [
            'MyApp.model.MyModel'
        ],
    
        config: {
            model: 'MyApp.model.MyModel',
            storeId: 'MyJsonStore'
        }
    });
    
    Ext.define('MyApp.model.MyModel', {
        extend: 'Ext.data.Model',
        config: {
            idProperty: 'mymodel',
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json'
                }
            },
            fields: [
                {
                    name: 'id'
                },
                {
                    name: 'label'
                },
                {
                    name: 'pageId'
                }
            ]
        }
    });
    
    Ext.define('MyApp.view.Main', {
        extend: 'Ext.navigation.View',
        alias: 'widget.main',
    
        config: {
            items: [
                {
                    xtype: 'panel',
                    items: [
                        {
                            xtype: 'button',
                            id: 'navButton',
                            text: 'Click'
                        }
                    ]
                }
            ]
        }
    
    });
    
    Ext.define('MyApp.view.MyContainer', {
        extend: 'Ext.Container',
    
        config: {
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'dataview',
                    docked: 'top',
                    height: 30,
                    id: 'dvpg1',
                    scrollable: 'horizontal',
                    inline: 'wrap : false',
                    itemTpl: [
                        '<div>&gt; {label}&nbsp;&nbsp;</div>'
                    ],
                    store: 'MyJsonStore'
                },
                {
                    xtype: 'button',
                    id: 'pagetwo',
                    text: 'Go to page three'
                }
            ]
        }
    });
    
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                navButton: '#navButton',
                main: 'main',
                pagetwo: '#pagetwo',
                dvpg1: '#dvpg1'
            },
    
            control: {
                "navButton": {
                    tap: 'onPageOneTap'
                },
                "pagetwo": {
                    tap: 'onPageTwoTap'
                },
                "dvpg1": {
                    itemtap: 'onListItemTap'
                }
            }
        },
    
        onPageOneTap: function(button, e, options) {
            var form = Ext.create('MyApp.view.MyContainer');
    
            var model = Ext.create('MyApp.model.MyModel', {"label" : "MyContainer"});
            var store = Ext.getStore('MyJsonStore');
    
            store.add(model);
            store.sync();
    
            this.getMain().add(form);
        }
    });

Thread Participants: 1