Issue when trying to populate a dataview with info from a local storage store...

[Websteria]

I'm caching my data in a local store, and the list is working fine. This is the itemtap handler for my list, and when it gets to the detailPage.setData(record.data) line I get errors in the console.

 vehicleTapped: function(thisList, index, target, record){
        var detailPage = Ext.create("JeffApp.view.vehicle.VehicleDetail");
        detailPage.setData(record.data);
        this.getVehicleContainer().push(detailPage);


    }

[

WARN][Ext.data.Store#setModel] Unless you define your model through metadata, a store needs to have a model defined on either itself or on its proxy Console.js:35

[WARN][Ext.data.Operation#setModel] Unless you define your model using metadata, an Operation needs to have a model defined. Console.js:35
[WARN][Ext.data.reader.Reader#process] In order to read record data, a Reader needs to have a Model defined on it. 

In this case, the store this data came from DOES have a model defined on itself.

Ext.define('JeffApp.store.local.LocalVehicleStore', {
    extend: 'Ext.data.Store',
    alias: 'store.LocalVehicleStore',


    config: {
        //model: 'JeffApp.model.VehicleList',
        model: 'JeffApp.model.Vehicle',
        proxy: {
            type: 'localstorage',
            id: 'LocalVehicleStore'
        },
        autoLoad: true
    }
});

Here's the view I'm trying to push:

Ext.define("JeffApp.view.vehicle.VehicleDetail", {
    extend: 'Ext.DataView',
    xtype: 'vehicleDetail',
    config: {
        title: 'Vehicle Detail',
        items: [
            {
                styleHtmlContent: true,
                styleHtmlCls: 'vehicleDetail',
                itemTpl: "You clicked on the {Year} {Make} {Model}"
            }
        ]


    }
});

Any help would be greatly appreciated.

Thanks!
Jeff

[cyee]

JeffApp.view.vehicle.VehicleDetail doesn't have a store defined. That's the class you're instantiating in the vehicleTapped listener. So when you call setData(), it creates a default store, which doesn't have a model associated with it.

[Websteria]

I fixed this by putting my configuration in the right spot and by putting a store on the list.

Thank you!!!

[Websteria]

Since I've got this working now I thought I would post the working code for people who run into this problem in the future.

Container:

Ext.define('JeffApp.view.vehicle.VehicleListContainer', {
    extend: 'Ext.NavigationView',
    xtype: 'vehiclecontainer',
    fullscreen: true,
    requires: [
        'JeffApp.view.vehicle.VehicleList',
        'JeffApp.view.vehicle.VehicleDetail'
    ],
    
    config: {
        title: 'Vehicles',
        iconCls : 'maps',
        iconMask: 'true',
        navigationBar: {
            items: [
                {
                    xtype: 'button',
                    iconCls: 'refresh',
                    iconMask: true,
                    action: 'refresh'
                }
            ]
        },




        items: [
            {
                xtype: 'vehiclelist'
            }
        ]        
    }
});

View:

Ext.define("JeffApp.view.vehicle.VehicleDetail", {
    extend: 'Ext.Panel',
    xtype: 'vehicledetail',
    config: {
        title: 'Vehicle Detail',
        styleHtmlContent: true,
        styleHtmlCls: 'vehicleDetail',
        tpl: "Hi there, {Make} {Model}",
        scrollable: true


    }
});

List:

Ext.define("JeffApp.view.vehicle.VehicleList", {
    extend: 'Ext.Panel',
    xtype: 'vehiclelist',
    requires: [
        'JeffApp.store.local.LocalVehicleStore'
    ],




    config: {
        layout: 'fit',
        title: 'Vehicles',
        iconCls: 'star',


        //docked: 'bottom'
        items: [


            {


                xtype: 'list',
                itemTpl: "<img src='{GoogleImage}' /><h1>{Year} {Make} {Model}</h1> <h2>Estimated Milage: {Mileage}</h2>",
                layout:'fit',
                styleHtmlCls: 'vehicleListItem',
                styleHtmlContent: true,
                emptyText: "No Data",
                store: 'LocalVehicleStore',
                plugins: [
                    {
                        xclass: 'Ext.plugin.PullRefresh',
                        pullRefreshText: 'Pull down to refresh Vehicles.',
                        refreshFn: function(plugin){
                            JeffApp.app.getController("MainController").btnRefreshVehicles();
                            plugin.setViewState("release");
                        }


                    }
                ]


            },
            {
                id: 'LastUpdated',
                docked:'bottom',
                layout:'hbox'
            }
        ]


    }
})

Controller method which pushes the new data:

vehicleTapped: function(thisList, index, target, record){
        this.getVehicleContainer().push(
          {
              xtype: 'vehicledetail',
              data: record.data
          }
        );




    },