display json data

[lwss]

Hi,

I hope someone can help me out with this.
I wan't to show some json data in my app but i can't get it to work.
Probably doing something tootaly wrong, but still learning.

my view

var titleBar = Ext.create('Ext.TitleBar', {    title:'Home',
});

// here i wan't to show my json data
var content = Ext.create('Ext.Panel', {                     
     xtype: 'dataview',
    margin:'20px',
      itemTpl: ['{title}'],
    store :{xclass : 'senchaTest.store.articles'},
    
});




var detailContainer = Ext.create('Ext.Container', {
    flex: 1,
    scrollable: true,
    items:[titleBar,
           content],
});


var nestedList = Ext.create('Ext.NestedList', {
    store :{xclass : 'senchaTest.store.listItems'},
    title: 'Home',
    displayField: 'title',
    detailContainer: detailContainer,
    detailCard: true,
    flex: 1,
    width:'25%',
    listeners: {
      itemtap: function(nestedList, list, index, target, record) {
         // content.setHtml(record.get('id')),
          titleBar.setTitle(record.get('title'));
        }
    },
});


Ext.Viewport.add({
    layout: 'hbox',
    items: [
        nestedList,
        detailContainer,
        ]
});
    
});

my store

Ext.define('senchaTest.store.articles', {    extend: 'Ext.data.TreeStore',
    requires: [
        'senchaTest.model.articleModel'
    ],


    config: {
        autoLoad: true,
        model: 'senchaTest.model.articleModel',
        defaultRootProperty: 'article',
        proxy: {
            type: 'ajax',
            url: 'resources/json/article.json',
                 reader: {
                     type: 'json',
                     rootProperty: 'article'
                 }
        }
    }
});

and my json

{    "article":
{
  "id": "79",
  "dpid": "2104085110",
  "title": "some text",
  "intro": "some text"
}

Someone can help me out with this?
Would appreciate it.

Thanks,
Laurens

[warrean]

What's the error message? (e.g. in Chrome, check Developer Tools - Console tab)

I don't know if your code is wrong, but when referencing a store from a view I try to do it like this:
View:
store: 'Articles'

Store:
config {
..
storeId: 'Articles'
}

Also I think your JSON file is missing a ' } '.

[lwss]

Hi warrean,

Thanks for your reply.
There is nog error message in the console log.
The way how i make the reference to my store should have to work.
In the nestedlist i do the same and that works.

You're right i am missing a } in the json, unfortunatly that didn't solve the problem.

more ideas are welcome

[lwss]

anyone else got an idea how to solve this?

[hotdp]

anyone else got an idea how to solve this?

Looks like you are missing model and fields, take a look here:
http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Model

[lwss]

Arg.. forgot to post my model.
This is al the code i have, it stil doesn't work.
Anyone an idea?

Store

Ext.define('senchaTest.store.articles', {
    extend: 'Ext.data.TreeStore',
    requires: ['senchaTest.model.articleModel'],


    config: {
        autoLoad: true,
        model: 'senchaTest.model.articleModel',
        defaultRootProperty: 'article',
        proxy: {
            type: 'ajax',
            url: 'resources/json/article.json',
                 reader: {
                     type: 'json',
                     rootProperty: 'article'
                 }
        }
    },
});

Model

Ext.define('senchaTest.model.articleModel', {    extend: 'Ext.data.Model',
    config: {
        fields: [{name: 'title', type: 'string'}]
    }
});

view

var titleBar = Ext.create('Ext.TitleBar', {
    title:'Home',
    });
// here i want to show my json data
var content = Ext.create('Ext.Panel', {
     xtype: 'dataview',
     margin:'20px',
     itemTpl: '{title}',
     html: 'test',
     store :{xclass : 'senchaTest.store.articles'},
});
var detailContainer = Ext.create('Ext.Container', {
    flex: 1,
    scrollable: true,
    items:[titleBar,
           content
          ],
});
var nestedList = Ext.create('Ext.NestedList', {
    store :{xclass : 'senchaTest.store.listItems'},
    title: 'Home',
    displayField: 'title',
    detailContainer: detailContainer,
    detailCard: true,
    flex: 1,
    width:'25%',
    listeners: {
      itemtap: function(nestedList, list, index, target, record) {
         // content.setHtml(record.get('id')),
          titleBar.setTitle(record.get('title'));
        }
    },
});


Ext.Viewport.add({
    layout: 'hbox',
    items: [
        nestedList,
        detailContainer,
      
        ]
});

json

{
    "article":
{
  "id": "79",
  "dpid": "2104085110",
  "title": "some text",
  "intro": "some text"
}
}

[hotdp]

Hi,
So the problem is that the nestedlList is empty right?
Are there any empty rows? Have you tried with the example from KitchenSink?

[haduki]

// here i want to show my json data
var content = Ext.create('Ext.Panel', {
     xtype: 'dataview',//if you use Ext.create,this line does nothing.
                        // so your 'content' is 'panel' not 'dataview'
     margin:'20px',
     itemTpl: '{title}',
     html: 'test',
     store :{xclass : 'senchaTest.store.articles'},
});

[lwss]

Hi,

Thanks for the reply's.
The nested list works fine.
It's the panel on the right (see image) where i wan't to show data (from json) dependent of the id of the list item

[haduki]

Have you read my post,and read document?
On the right ,it is a PANEL,not dataview.
Read doc pls,there is no 'itemTpl' config in PANEL.

var content = Ext.create('Ext.Panel', {
     //xtype: 'dataview',
     margin:'20px',
     //itemTpl: '{title}',
     tpl:'{title}',
     data:{title: ''},
     html: 'test',
      //store :{xclass : 'senchaTest.store.articles'},
});

listeners: {
      itemtap: function(nestedList, list, index, target, record) {
          content.setData({title:record.get('id')}),
          titleBar.setTitle(record.get('title'));
        }
    },