1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    lwss is on a distinguished road

      0  

    Default Answered: display json data

    Answered: display json data


    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

    Code:
    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
    Code:
    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
    Code:
    {    "article":
    {
      "id": "79",
      "dpid": "2104085110",
      "title": "some text",
      "intro": "some text"
    }
    Someone can help me out with this?
    Would appreciate it.

    Thanks,
    Laurens

  2. 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.
    Code:
    var content = Ext.create('Ext.Panel', {
         //xtype: 'dataview',
         margin:'20px',
         //itemTpl: '{title}',
         tpl:'{title}',
         data:{title: ''},
         html: 'test',
          //store :{xclass : 'senchaTest.store.articles'},
    });
    Code:
    listeners: {
          itemtap: function(nestedList, list, index, target, record) {
              content.setData({title:record.get('id')}),
              titleBar.setTitle(record.get('title'));
            }
        },

  3. #2
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    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 ' } '.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    lwss is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    lwss is on a distinguished road

      0  

    Default


    anyone else got an idea how to solve this?

  6. #5
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Answers
    8
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    Quote Originally Posted by lwss View Post
    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

  7. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    lwss is on a distinguished road

      0  

    Default


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

    Store
    Code:
    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
    Code:
    Ext.define('senchaTest.model.articleModel', {    extend: 'Ext.data.Model',
        config: {
            fields: [{name: 'title', type: 'string'}]
        }
    });
    view
    Code:
    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
    Code:
    {
        "article":
    {
      "id": "79",
      "dpid": "2104085110",
      "title": "some text",
      "intro": "some text"
    }
    }

  8. #7
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Answers
    8
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


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

  9. #8
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Code:
    // 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'},
    });
    I write English by translator.

  10. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    10
    Answers
    1
    Vote Rating
    0
    lwss is on a distinguished road

      0  

    Default


    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
    Attached Images

  11. #10
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    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.
    Code:
    var content = Ext.create('Ext.Panel', {
         //xtype: 'dataview',
         margin:'20px',
         //itemTpl: '{title}',
         tpl:'{title}',
         data:{title: ''},
         html: 'test',
          //store :{xclass : 'senchaTest.store.articles'},
    });
    Code:
    listeners: {
          itemtap: function(nestedList, list, index, target, record) {
              content.setData({title:record.get('id')}),
              titleBar.setTitle(record.get('title'));
            }
        },
    I write English by translator.

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar