Sencha Touch Controller pushing a view

Question

I'm trying to work out why when I push a view onto a Ext.Navigation.View control, the view I push renders, but the data I push with it doesn't. The view renders a very simple DataView control with some json data (name & surname).

It'll work if I create the view explicitly through "Ext.Create" (see commented out lines in controller), but I'm sure I've done this before where you can push "xtype" of the view and any relevant properties/data for the view. Am I right?

By the way, I've tested the json coming back from the form submission callback and everything is fine. It just seems to be the view doesn't want to render the data I send it as part of the "push". Here's my code. Am I missing something?:

View:

Ext.define('MyCo.Booking.view.PatientClinicSearchResults', {
extend : 'Ext.DataView',
xtype : 'DataViewPatientSearchResults',

itemTpl : '{Name}',
store : {
        fields : ['Name'],
        autoLoad : true
    }

})

Controller :

Ext.define('MyCo.Booking.controller.Main', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        navViewClinics : 'NavViewClinics',
        formPanelClinicPatientSearch : 'FormPanelClinicPatientSearch'
    },
    control: {
        'NavViewClinics list' : { 
            itemtap : 'ClinicUserSearch'
        },

        'FormPanelClinicPatientSearch button' : {
            tap : 'ClinicPatientSearchResults'
        }
    }
},

ClinicUserSearch : function(list, index, element, record) {
    this.getNavViewClinics().push({ xtype : 'FormPanelClinicPatientSearch' });
},

ClinicPatientSearchResults : function(button, e) {
    var form = this.getFormPanelClinicPatientSearch();
    var navClinics = this.getNavViewClinics();

    form.submit({
        success : function(form, result) {

        // var view = Ext.create('MyCo.Booking.view.PatientClinicSearchResults', {
        //     title : 'Search Results',
        //     fullscreen: true,
        //     store: {
        //         fields: ['Name'],
        //         data : result.items
        //     },

        //     itemTpl: '<div>{Name}</div>'
        // });

        // navClinics.push(view);

        navClinics.push({ xtype : "DataViewPatientSearchResults", 
          title : 'Test',
           store : { 
                    data : result.items 
            }
        });

        }
    });        
}

});

JSON received from form submission callback:

{
"success" : true,
"items" :   [
                {
                "Name": "Jon",
                "Surname": "Doe"
                },
                {
                "Name": "Karl",
                "Surname": "Doe"
                }
            ]
}

Any help would be appreciated. Thank you.

user2241336 user2241336 · Accepted Answer · 2013-04-04T11:41:20

Problem solved. I removed the store declaration from the view and it worked. Just need to reference the data via the itemTpl property.

Sencha Touch Controller pushing a view

1 Answers