JSON Parsing Issues

[epiphanydigital]

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.

// 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"
    }
  ]
}

[bclinton]

Your model defines one text field named "node"

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

[epiphanydigital]

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!!!!!