Hi,


I have searched all over this forum and the web for an answer, so it is time I reached out here.


Using a Panel Store, I am trying to populate a panel with a single JSON object from a URL which contains many JSON objects. I can get it to work with a List, but using the desired Panel outputs nothing. I am sure I am probably doing something wrong or not understanding the use as it should be.


Below is my code and I would appreciate any input.


This is the JSON:
Code:
{
    "nodes": [{
        "node": {
            "body": "<p>\n\t&quot;<strong>External Links<\/strong>&quot; module<\/p>\n<p>\n\tThis module adds a very nice feature to sites that benefits users and does not require any additional work for the&nbsp;maintenance of the Drupal site. Simply activate the module and it will find all external links and email addresses and place a small icon next to it indicating that it is external or an email.<\/p>\n<p>\n\tExamples:<\/p>\n<p>\n\t<a href=\"http:\/\/2010.ast-ase.org\/\" title=\"2010 ASE Meeting\">2010 ASE&nbsp;Meeting<\/a><\/p>\n<p>\n\t<a href=\"mailto:mcannon@ahint.com?subject=Info from Cannon\">Matthew B Cannon<\/a><\/p>\n<p>\n\tExtra features include that can be turned on:<\/p>\n<ul>\n<li>\n\t\t<span word=\"Javascript\" data-scaytid=\"1\">Javascript<\/span>&nbsp;alert message that can say anything. Meant to inform the user they are going to a different site.<\/li>\n<li>\n\t\tExternal links default to opening in a new window<\/li>\n<li>\n\t\tIcons can be switched on and off for either links or emails<\/li>\n<li>\n\t\tRegular expression inclusion and exclusion of links considered external.<\/li>\n<\/ul>",
            "nid": "3",
            "status": "Yes",
            "title": "External Links"
        }
    },
    {
        "node": {
            "body": "<div id=\"welcomeArea\">\n<h3>\n\t\tWelcome<\/h3>\n<p>\n\t\t2011 will be a historic year as the two premier wound, <span word=\"ostomy\" data-scaytid=\"1\">ostomy<\/span>, and continence associations come together with a Universal Focus on Patient Care. The <span word=\"WOCN\" data-scaytid=\"2\">WOCN<\/span> Society and <span word=\"WCET\" data-scaytid=\"3\">WCET<\/span> will unite to educate the world on the most up-to-date patient care treatments, evidence-based research, and techniques aimed to advance the profession.<\/p>\n<ul>\n<li>\n\t\t\tUnordered list 1\n<ul>\n<li>\n\t\t\t\t\tUnordered list 2\n<ul>\n<li>\n\t\t\t\t\t\t\tUnordered list 3<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ol>\n<li>\n\t\t\tUnordered list 1\n<ol>\n<li>\n\t\t\t\t\tUnordered list 2\n<ol>\n<li>\n\t\t\t\t\t\t\tUnordered list 3<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>",
            "nid": "14",
            "status": "Yes",
            "title": "Home"
        }
    },
    {
        "node": {
            "body": "<p>\n\tI added this page after the <span word=\"Sencha\" data-scaytid=\"1\">Sencha<\/span> app was already functioning. It should not appear automatically. But it should be added to the <span word=\"Sencha\" data-scaytid=\"2\">Sencha<\/span> list after the list is pulled down.<\/p>\n<h1>\n\tIT WORKED!<\/h1>\n<p>\n\tI added this node after <span word=\"Sencha\" data-scaytid=\"3\">Sencha<\/span> was already launched and it was added to the list.<\/p>\n<h2>\n\tTest 2<\/h2>\n<p>\n\tThis time I'm updating the text to see if the Pull Down refresh also updates the node's body copy.<\/p>\n<p>\n\t&nbsp;<\/p>\n<p>\n\tSome more jibberish<\/p>\n<p>\n\t<span word=\"jgl\" data-scaytid=\"5\">jgl<\/span> <span word=\"hjsvz\" data-scaytid=\"6\">hjsvz<\/span> <span word=\"hjxdbf\" data-scaytid=\"7\">hjxdbf<\/span> <span word=\"jldx\" data-scaytid=\"8\">jldx<\/span> <span word=\"fkljb\" data-scaytid=\"9\">fkljb<\/span> <span word=\"dx\" data-scaytid=\"10\">dx<\/span>;<span word=\"kjlb\" data-scaytid=\"11\">kjlb<\/span> <span word=\"xd\" data-scaytid=\"12\">xd<\/span>;<span word=\"jbl\" data-scaytid=\"13\">jbl<\/span><\/p>",
            "nid": "19",
            "status": "Yes",
            "title": "Sencha &quot;Pull Down&quot; list refresh"
        }
    }]
}
Here's is the Model code:
Code:
Ext.regModel('NodeModel', {
    proxy    : {
        type: 'localstorage',
        id    : 'nodeModel'
    },
    fields    : [
        {name: 'nid',    type: 'string',    mapping: 'node.nid'},
        {name: 'title',    type: 'string',    mapping: 'node.title'},
        {name: 'body',    type: 'string',    mapping: 'node.body'}
        // The original code below did not work because of the dash (-).
        // To make it work I had to change the parent item to a single 
        // word string such as 'menuItem'.
        // {name: 'title',    type: 'string',    mapping: 'menu-link.title'}
    ]
});


Ext.regStore({
    model    : 'NodeModel',
    storeId    : 'NodeStore'
});
And finally, here's the View code:
Code:
Drupal.NodeBody = Ext.extend(Ext.Panel, {
    // cardSwitchAnimation: 'cube',
    // activeItem: 1,
    itemTpl: Drupal.nodeItem(),
    layout    : 'fit',
    itemCls: 'node',
    styleHtmlContent: true,
    // selectedItemCls :'selected-no-list-stlye',
    // scroll false: scolling a DataView list bounces it back to the top
//    scroll: false,
    items: [
        // buildStore()
        /*store:*/ new Ext.data.Store({
            // We provide an id for the store so it's easy to debug.
            // You can pull it up in the console with
            // Ext.getStore('store_tp');
            id: 'nodeBody_store',
            // State the model to which we want to be bound, namely, TeagramPhoto (defined in models/TeagramPhoto.js)
            model: 'NodeModel',
            // Fire off a request when the page loads. Here is why we don't *need* a controller for this simple view.
            autoLoad: true,
            proxy: {
                // JSON-P FTW
                //type: 'scripttag',
                // If you're offline, uncomment the two lines below and comment the line above and the line with the Instagram URL.
                type: 'ajax',
                url: 'http://test.local/api/node.json',
                reader: {
                    type: 'json',
                    // The root of the JSON response from which we will iterate over is called "data".
                    // See an example of the JSON response in models/data_from_instagrams.json
                    root: 'nodes'
                }
            },
            filters: [
                {
                    property: 'nid',
                    value   : 3
                }
            ]
        })
    ]
});
// register "NodeList" as an xtype to use in "NodePanel"
Ext.reg('NodeBody', Drupal.NodeBody);
Please, if anyone can help me to get the Panel to get and display just 1 of the JSON objects, it would be appreciated. Right now, nothing displays in a Panel.