1. #1
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100
    Vote Rating
    5
    epiphanydigital is on a distinguished road

      0  

    Default JSON Parsing Issues

    JSON Parsing Issues


    Can someone please go over with me the ins and outs of json parsing using the built in reader for sencha touch? From everything I've read, it looks like I'm doing this correctly. I've pasted more code than is probably needed, just to make sure the flow of the application makes sense.

    The goal is supposed to be a dynamically created list with a different callback attached to each item.

    The {title} is left blank, though the correct number of list items is printed out--in my application code there are six items, but for simplicity I shredded down the JSON object to a single item.



    Code:
    // Main loading panel...
    MyDS.AppPanel = Ext.extend(Ext.Panel, {
      fullscreen :            true,
      title :                 '',
      displayField :          'text',
      store :                 MyDS.MenuStore,
      listeners : {
        beforeRender  :       function() {
          //if (MyDS.firstRun === true) {
          if (1!==1) {
            Ext.Msg.prompt(
              'Quick Start Wizard',
              'Welcome to this wonderful quick start wizard!',
              this.afterRegistration
            );
          }
        }
      },
      initComponent :         function() {
        this.dockedItems = this.buildDockedItems();
        MyDS.AppPanel.superclass.initComponent.call(this);
      },
      afterRegistration :     function() {
        //alert(choice);
        // if success :
          // persist in local db
          // show registered areas as well
            // settings
            // profiles
        // else :
          // show registration on main menu list
      },
      buildDockedItems :      function() {
        return [
          this.buildTopDockToolbar(),
          this.buildMenuPanel()
        ];
      },
      buildTopDockToolbar :   function() {
        return {
          xtype : 'toolbar',
          dock  : 'top',
          title : 'My Dietary Supplements'
        };
      },
      buildMenuPanel :         function() {
        return MyDS.MenuPanel;
      }
    });
    
    // Subpanel
    MyDS.MenuPanel = new Ext.Panel({
      items         : [
        MyDS.MenuList
      ],
      dockedItems   : [
        {
          layout : 'fit',
          xtype  : 'toolbar',
          dock   : 'top',
          ui     : 'light',
          title  : 'Main Menu'
        }
      ]
    });
    
    // THIS IS WHERE I'M HAVING THE ISSUE (as far as I can tell)
    MyDS.MenuList = Ext.extend(Ext.List, {
        store         : MyDS.MenuStore,
        itemTpl       : 'Title: {title}',
        allowDeselect : false,
        onRender      : function() {
            MyDS.MenuList.superclass.onRender.apply(this, arguments);
            this.store.load();
            console.log(this.store.Items);
        }
    });
    
    Ext.reg('MenuList', MyDS.MenuList);
    
    Ext.regModel('MenuItem', {
      fields: [
        {name: 'node',    type: 'string'},
      ]
    });
    
    MyDS.MenuStore = new Ext.data.Store({
      model: 'MenuItem',
      proxy: {
        type: 'ajax',
        url: 'sample.json',
        reader: {
          type   : 'json',
          root   : 'Items',
          record : 'node'
        }
      }
    });
    
    {
      "Items" : [
        {
          "node" : {
            "nid" : "10",
            "post_date" : "20110621120645",
            "updated_date" : "20110621120645",
            "title" : "Profiles",
            "body" : "<p>Takes us to the Profiles application panel.</p>"
          },
          "label" : "Item",
          "type" : "node"
        }
      ]
    }

  2. #2
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    274
    Vote Rating
    6
    bclinton will become famous soon enough

      0  

    Default


    Your model defines one text field named "node"

    Shouldn't it be defining your actual node record? nid, post_date, title, etc...

  3. #3
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100
    Vote Rating
    5
    epiphanydigital is on a distinguished road

      0  

    Default One more follow-up

    One more follow-up


    OMG I'M AN !!! Thanks for catching that bclinton! I think I've just been staring at this too long and it's my first Sencha app.

    What is the secret to getting that list panel to fill up the area? Right now it sits under it's parent panel (which has a toolbar) along with its own toolbar but it's height is only as big as the list requires and I only have six items. I would like this to stretch.

    I also need to switch the proxy type to JSONP. I understand a different class is used so just changing from "ajax" to "jsonp" won't work, but what is the path of least resistance here?

    THANKS!!!!!

Thread Participants: 1

Tags for this Thread