1. #1
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    111
    Answers
    9
    Vote Rating
    0
    Websteria is on a distinguished road

      0  

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

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


    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.

    Code:
     vehicleTapped: function(thisList, index, target, record){
            var detailPage = Ext.create("JeffApp.view.vehicle.VehicleDetail");
            detailPage.setData(record.data);
            this.getVehicleContainer().push(detailPage);
    
    
        }
    [
    Code:
    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
    Code:
    [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.

    Code:
    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:
    Code:
    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

  2. 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.

  3. #2
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Answers
    5
    Vote Rating
    6
    cyee is on a distinguished road

      1  

    Default


    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.

  4. #3
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    111
    Answers
    9
    Vote Rating
    0
    Websteria is on a distinguished road

      0  

    Default This seems to be a repeating pattern with me...

    This seems to be a repeating pattern with me...


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

    Thank you!!!

  5. #4
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    111
    Answers
    9
    Vote Rating
    0
    Websteria is on a distinguished road

      0  

    Default Fixed code

    Fixed code


    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:
    Code:
    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:
    Code:
    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:
    Code:
    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:
    Code:
    vehicleTapped: function(thisList, index, target, record){
            this.getVehicleContainer().push(
              {
                  xtype: 'vehicledetail',
                  data: record.data
              }
            );
    
    
    
    
        },

Thread Participants: 1

Tags for this Thread