JSON Panel not working

[mcannon]

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:

{
    "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:

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:

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.

[mitchellsimoens]

Ok.. are you doing an update(html/data) on the panel somewhere?

[mcannon]

No. I was trying to call in the information the same way as I was for a List which works. I'm reading the Sencha Touch in Action book (which is incomplete as of now) so I only know as much as that book and internet searches have gotten me.

I'm registering the Panel which contains the store as an xtype and calling it into the items of a Card layout. Calling a List with similar configs into the Card layout works fine. Calling in the Panel with those configs displays nothing in the content area. The only things that display are the dockedItems.

If need be, I can post all of the code I am working on. I just tried to post what I thought would be relevant to my current issue.

[mitchellsimoens]

About the book... it is going to be rewritten to use Sencha Touch 2. I just signed on as a new co-author to do the migrating and write the new chapters.

[mcannon]

I finally got the content of the store to populate the panel. The solution I found was to wrap the store inside of a DataView like so:

Drupal.NodeDataView = new Ext.DataView({
    store: new Ext.data.Store({
        id: 'nodeBody_store',
        model: 'NodeModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url : 'http://test.local/api/node.json',
            reader: {
                type: 'json',
                root: 'nodes'
            }
        },
        listeners : {
            'load' : function(records, operation, success){
                console.log(records.data.items);
                for(i = 0; i <= records.data.items.length; i++){
                    if(i != 0){
                        console.log(i);
                        records.data.items[i].rendered = false;
                        // records.doComponentLayout();
                    };
                };
            }
        }
    }),
    tpl: Drupal.nodeDetails,
    itemSelector: '.node-wrapper',
    fullscreen: true
});

I place this store inside of a panel (not sure if that's a good idea?)

Drupal.NodeBody = Ext.extend(Ext.Panel, {
    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,
    dockedItems: [{
        xtype: 'toolbar',
        title: '<h2 class="page-title">Node Full Page</h2>'
    }],
    items: [
        Drupal.NodeDataView
    ]
});
// register "NodeList" as an xtype to use in "NodePanel"
Ext.reg('NodeBody', Drupal.NodeBody);

This results in a list of JSON objects similar to using a List. A List is not what I want. I want to display just one single JSON object at a time depending on the menu list item that was clicked. Within the store I have used a filetr to acheive a single JSON object like so:

filters: [
    {
        property: 'nid',
        value   : 3
    }
]

That worked from a display perspective, but it also limited the actual store to just that one object.

My goal to to load a single JSON within a panel which is displayed within a Card. How can I go about manipulation the view/model on the fly?