Sencha Touch 2: Reloading a treeStore in nestedList to reflect user selection

Question

I have a nested list in my application, and when users make a selection they are taken to a detailCard with some options. One of these options is to "confirm" their selection. Once confirmed, the selection should be removed from the list. This works on the server side, so if the app is refreshed the selection is gone. However I was hoping to remove the selection in the treeStore itself and refresh the view somehow so that users can immediately see the effect of their confirmation. I was following a tutorial for nestedList that I can't seem to find anymore, and this code is based on that:

var itemId = '';
Ext.define('MyApp.view.MainView',
{
extend: 'Ext.tab.Panel',
xtype: 'main',
alias: "widget.mainview",

requires: [
    'Ext.dataview.NestedList',
    'Ext.data.proxy.JsonP'
],
config:
{
    tabBarPosition: 'bottom',

    items: [
    {
        xtype: 'nestedlist',
        title: 'Listings',
        iconCls: 'home',
        displayField: 'listingValue',
        scrollable: true,

        detailCard:
        {
            xtype: 'panel',
            scrollable: true,
            styleHtmlContent: true,
            items: [
            {
                xtype: 'fieldset',
                readOnly: true,
                title: 'Schedule Information:',
                items: [
                    {
                        name: 'from',
                        id: 'from',
                        xtype: 'textareafield',
                        label: 'From',
                        readOnly: true
                    },
                    {
                        name: 'to',
                        id: 'to',
                        xtype: 'textareafield',
                        label: 'To',
                        readOnly: true
                    },
                    {
                        name: 'moreInfo',
                        id: 'moreinfo',
                        xtype: 'textfield',
                        label: 'More Info',
                        readOnly: true
                    },

                ]
            },
            {
                xtype: 'container',
                flex: 1,
                items: [
                {
                    xtype: 'button',
                    text: 'Confirm',
                    action: 'confirmSelection',
                    margin: '10 5',
                    padding: '5',
                    ui: 'confirm'
                }]
            }]
        },

        listeners:
        {
            itemtap: function (nestedList, list, index,
                element, post)
            {
                var detailCard = this.getDetailCard();
                detailCard.setHtml('');
                itemId = post.get('id');
                Ext.getCmp('from').setValue(post.get(
                    'from'));
                Ext.getCmp('to').setValue(post.get('to'));
                Ext.getCmp('moreinfo').setValue(post.get(
                    'moreinfo'));

            }

        },



        store:
        {
            type: 'tree',

            fields: [
                'id', 'from', 'to', 'fromcity', 'tocity',
                'time', 'address',
                {
                    name: 'leaf',
                    defaultValue: true
                },

                {
                    name: 'listingValue',
                    convert: function (value, record)
                    {

                        listingValue = '$<b>' + record.get(
                            'address') + '</b> ' + record
                            .get('fromcity') + ' to ' +
                            record.get('tocity');

                        return listingValue;
                    }
                }
            ],

            root:
            {
                leaf: false
            },

            proxy:
            {
                type: 'jsonp',
                url: 'http://myURL.com/page.php?action=go',
                reader:
                {
                    type: 'json',
                    rootProperty: 'root'
                }
            }
        }
    },
    {
        title: 'Dashboard',
        iconCls: 'action',

        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Dashboard'
            },

        ]
    }]
   }
});

I have no idea what to do at this point, because the store is set up in the view and I'm not sure how to access it in my controller. I learned about treeStore.removeAll() and treeStore.load() , but how can I call those functions in a controller when the store is set up without any type of reference name? Is there a way I can remove the user's selection and display the view, or perhaps reload the view altogether so it can retrieve the new list from the server?

Answer 1

Because my list is on the first page of my app, I managed to get away with window.location.reload(); and reloading the whole app. Its not the most elegant solution, but the changes are reflected.

I won't accept my own answer just yet in case someone comes along with a better solution.