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"<strong>External Links<\/strong>" 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 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 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> 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 <\/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 "Pull Down" 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.