1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    oskars is on a distinguished road

      0  

    Default Help with stores and lists.

    Help with stores and lists.


    I have setup a Json-file like this: Here!

    I have my code like this:

    Code:
    var mytab = new Ext.Component({
                title: 'My Tab',
                cls: 'mytab',
                scroll: 'vertical',
                html: ['Testing...']
            });
    How do I properyly add my Json-file to a store, and apply it to "mytab" as a list?

    I have tried several different codes, but I am a newbie to this, so I need some help =)

    Thanks in advance!

  2. #2
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    oskars is on a distinguished road

      0  

    Default


    I have tried a lot now... why does this code not work?

    Chrome Debug sais:
    sencha/ext-touch-debug.js:11505
    Uncaught TypeError: Cannot read property 'prototype' of undefined


    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
            
            
            var timeline2 = new Ext.Component({
                title: 'Timeline',
                cls: 'timeline',
                scroll: 'vertical',
                store: 'myStore',
                tpl: [
                    '<tpl for=".">',
                        '<div class="tweet">',
                                '<div class="avatar">{Datum}</div;>',
                                '<div class="tweet-content">',
                                    '<h2>{Namn}</h2>',
                                    '<p>{Text}</p>',
                                '</div>',
                        '</div>',
                    '</tpl>'
                ]
            });
    		
    		var store = new Ext.data.JsonStore({
    		    // store configs
    		    autoDestroy: true,
    		    url: 'ajax.asp?show=comments_list2',
    		    storeId: 'myStore',
    		    // reader configs
    		    root: 'items',
    		    idProperty: 'Id',
    		    fields: ['Datum', 'Rubrik', 'Namn', 'Text', 'Id']
    		
    		});
    		
    	    
    	    var panel = new Ext.TabPanel({
                fullscreen: true,
                animation: 'pop',
                items: [timeline2]
            });
    
       
            
        }
    });

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    64
    Vote Rating
    0
    jeroenvduffelen is on a distinguished road

      0  

    Default


    Hey Oskars,

    I've already filed that error as a bug.. seems to be something with the model / fields the JsonReader cannot find.

    I don't know if you've got the latest version of Sencha Touch, but this example of setting up a store should work for your component as well.

    Code:
    // First create a model (this is like a blueprint of your json data
    // This model will be loaded into you store
    		Ext.regModel('book', {					// book is the name of the model, this name is used in the store
    			idProperty: 'id',					// for the store to recognize the unique id from your json data
    			fields: [
    				{name: 'id', type: 'string'},
    				{name: 'title', type: 'string'},
    				{name: 'slug', type: 'string'},
    				{name: 'author', type: 'string'},
    				{name: 'chapters', type: 'object'},
    			],
    		});
    
    		this.state.books = new Ext.data.JsonStore({
    			autoLoad: false,					// should the store auto load the data
    			model: 'book',						// convert the raw json data into the right objects for this reader using the "book" model specified above here.
    			storeId: 'books',					// just a unique id for this store
    			proxy: {
    				url: '/books.json',				// the url the json should be loaded from 
    				type: 'ajax',
    				reader: {
    					root: 'books'				// the root element of the json data from which this store should load it's objects from.
    				}
    			},
    		});

  4. #4
    Ext User
    Join Date
    Jun 2010
    Posts
    8
    Vote Rating
    0
    oskars is on a distinguished road

      0  

    Default


    Oh! Okey! Thanks!

    But... with this code:

    Code:
    // First create a model (this is like a blueprint of your json data
    // This model will be loaded into you store
    Ext.regModel('book', {     // book is the name of the model, this name is used in the store
     idProperty: 'Id',     // for the store to recognize the unique id from your json data
     fields: [
      {name: 'Datum', type: 'string'},
      {name: 'Rubrik', type: 'string'},
      {name: 'Namn', type: 'string'},
      {name: 'myText', type: 'string'},
      {name: 'Id', type: 'string'}
     ],
    });
    this.state.book = new Ext.data.JsonStore({
     autoLoad: true,     // should the store auto load the data
     model: 'book',      // convert the raw json data into the right objects for this reader using the "book" model specified above here.
     storeId: 'mylist',     // just a unique id for this store
     proxy: {
      url: '/ajax.asp?show=comments_list',    // the url the json should be loaded from 
      type: 'ajax',
      reader: {
       root: 'items'    // the root element of the json data from which this store should load it's objects from.
      }
     },
    });
    I get this error:
    Uncaught TypeError: Cannot set property 'book' of undefined
    Row 47 is this.state.book = new Ext.data.JsonStore({

    I have tried different combinations.. but can't get it to work.

    I have the latest version =)

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    It means that this.state doesnt exist yet. Also, you can't bind a store to just any component (although that would be cool).

    By switching to using a DataView, DataPanel or List instead of a Component you should be able to achieve what you are trying to do. Could you try the following code?

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {        
            // First create a model (this is like a blueprint of your json data
            // This model will be loaded into you store
            Ext.regModel('book', {
                // book is the name of the model, this name is used in the store
                idProperty: 'Id',
                // for the store to recognize the unique id from your json data
                fields: [
                {
                    name: 'Datum',
                    type: 'string'
                },
                {
                    name: 'Rubrik',
                    type: 'string'
                },
                {
                    name: 'Namn',
                    type: 'string'
                },
                {
                    name: 'myText',
                    type: 'string'
                },
                {
                    name: 'Id',
                    type: 'string'
                }
                ]
            });
            
            var bookStore = new Ext.data.JsonStore({
                autoLoad: true,
                // should the store auto load the data
                model: 'book',
                // convert the raw json data into the right objects for this reader using the "book" model specified above here.
                storeId: 'mylist',
                // just a unique id for this store
                proxy: {
                    url: '/ajax.asp?show=comments_list',
                    // the url the json should be loaded from
                    type: 'ajax',
                    reader: {
                        root: 'items'
                        // the root element of the json data from which this store should load it's objects from.
                    }
                },
            });
    
            var timeline2 = new Ext.DataView({
                title: 'Timeline',
                cls: 'timeline',
                store: 'myStore',
                itemSelector: 'div.tweet',
                singleSelect: true,
                tpl: [
                    '<tpl for=".">',
                    '<div class="tweet">',
                        '<div class="avatar">{Datum}</div>',
                        '<div class="tweet-content">',
                            '<h2>{Namn}</h2>',
                            '<p>{Text}</p>',
                        '</div>',
                    '</div>',
                    '</tpl>'
                ]
            });
    
            var panel = new Ext.TabPanel({
                fullscreen: true,
                animation: 'pop',
                items: [timeline2]
            });
        }
    });

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    7
    Vote Rating
    0
    mrsixcount is on a distinguished road

      0  

    Default


    I just tried the code with the following data.json instead of a dynamic driven one just to see if I could get the json reader working but nothing shows up but the tab Timeline.

    {
    items:[
    {Datum: 'Image one', Rubrick:'r', Namn:'Name', myText:'Some Text', Id:'id'},
    {Datum: 'Image two', Rubrick:'r2', Namn:'Name2', myText:'Some Text2', Id:'id2'}
    ]
    }

    Am I doing something wrong?

    Thanks in advance.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    I think its because the property is called 'data', not 'items' on a store.

  8. #8
    Ext User
    Join Date
    Aug 2007
    Posts
    7
    Vote Rating
    0
    mrsixcount is on a distinguished road

      0  

    Default


    Hi Tommy,

    but in your code your root is "items"

    proxy: {
    url: '/ajax.asp?show=comments_list',
    // the url the json should be loaded from
    type: 'ajax',
    reader: {
    root: 'items'
    // the root element of the json data from which this store should load it's objects from.
    }
    },

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    The root is the field in which all your items exist in your json data. If you define data directly on the store, you dont have to define this.

  10. #10
    Ext User
    Join Date
    Aug 2007
    Posts
    7
    Vote Rating
    0
    mrsixcount is on a distinguished road

      0  

    Default


    looks like the problem was with the JSON data
    should have been double quoted and it then works.

Similar Threads

  1. Stores, sub-stores & filters - help
    By Bobbin in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Nov 2009, 1:10 PM
  2. Lists and Iteration
    By innovator in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Sep 2008, 5:34 AM
  3. Sortable Lists?
    By keithpitt in forum Ext 1.x: Help & Discussion
    Replies: 15
    Last Post: 15 Jun 2008, 1:20 PM
  4. [2.0] htmleditor - editing lists in IE
    By slobo in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 22 Feb 2008, 6:46 AM
  5. Zebra: (un)ordered lists
    By Compugasm in forum Community Discussion
    Replies: 2
    Last Post: 7 Nov 2006, 7:00 PM

Thread Participants: 3