1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    aelderiel is on a distinguished road

      0  

    Default extjs 3.4 dataview + xtemplate simple loop

    extjs 3.4 dataview + xtemplate simple loop


    I'm trying to display data from php using dataview and jsonstore. But it seems that i am mistaken somewhere.
    Well, now i'm pretty sure that i'm stupid, but i can't get how this xtemplate working.
    Here my json from php to js:

    Code:
    {"success":true,"data":{"images":[{"id":"2"},{"id":"2"},{"id":"2"},{"id":"2"}]}}
    and here my dataview:
    Code:
    {
    xtype        : 'dataview',
    autoScroll   : true,
    emptyText    : 'No data',
    itemSelector : 'div.x-storage-linked',
    id           : 'cartdata',
    multiSelect  : true,
    plugins      : new Ext.DataView.DragSelector( { dragSafe : true } ),
    store        : new Ext.data.JsonStore({
        url           : '/aecms/user-photos-view/',
        autoLoad      : true,
        root          : 'data',
        fields        : [
        'images'
        ],
        listeners : {
                scope : this,
                load  : function(store) {
                    var data = store.reader.jsonData;
                    if (data.systemMessage) {
                        infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
                    }
                } 
        } 
    }),
    tpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<tpl for="images">',
                '<div class="x-storage-linked">', 
                        '<a title="test">{id}</a>',
                '</div>',
            '</tpl>',
        '</tpl>'
    )
    }
    and in the end i'm getting an empty text message.
    I tried to display data as an array itself without images, json was:
    Code:
    {"success":true,"data":[{"id":"2"},{"id":"2"},{"id":"2"},{"id":"2"}]}
    and tpl was:
    Code:
    '<tpl for=".">',
        '<div class="x-storage-linked">', 
                '<a title="test">{id}</a>',
        '</div>',
      '</tpl>'
    ofc it's displaying only one object (link with 2 as html), but i need 4 objects.
    Thanks in advance.


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The store shouldn't use the root config, the reader needs to.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    aelderiel is on a distinguished road

      0  

    Default


    Thank you for answer, but i still can't get a rid of my problem, here my new dataview:
    Code:
    xtype        : 'dataview',autoScroll   : true,
    emptyText    : 'No data',
    itemSelector : 'div.x-storage-linked',
    id           : 'cartdata',
    multiSelect  : true,
    plugins      : new Ext.DataView.DragSelector( { dragSafe : true } ),
    store        : new Ext.data.Store({           
        autoLoad      : true,
        proxy: new Ext.data.HttpProxy({
            type: 'ajax',
            url : '/aecms/user-photos-view/',
            simpleSortMode: true
        }),
        reader: new Ext.data.JsonReader({
                type: 'json',
                root: 'data',
                fields        : [
                    {name:'images', type: 'auto'}
                  
                ]
        }),
        listeners : {
                scope : this,
                load  : function(store) {
                    var data = store.reader.jsonData;
                    if (data.systemMessage) {
                        infoReport(data.systemMessage.title, data.systemMessage.message, data.systemMessage.icon);
                    }
                }
            } 
    }),
    tpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<tpl for="images">',
                '<table class="storage-photoreport-table">',
                        '<tr>',
                            '<td>',
                                '<div class="storage-photoreport-wrap x-storage-linked" id="{id}">',
                                    '<div class="storage-photoreport">',
                                        '<a title="Cart" rel="cart-lightbox" href="{img_big}"><img src="{img_mid}"/></a>',
                                    '</div>',
                                '</div>',
                            '</td>',
                        '</tr>',
                        '<tr>',
                            '<td>{name}</td>',
                        '</tr>',
                        '<tr>',
                            '<td>{save}</td>',
                        '</tr>',
                        '<tr>',
                            '<td>',
                                '<span class="delete-ico pt delete_from_cart" onclick="deleteFromCart($(this));">delete</span>',
                            '</td>',
                        '</tr>',
                    '</table>',
           '</tpl>',
        '</tpl>'
    )
    And my json:
    Code:
    {"success":true,"data":
        {
            "images":
            [{
                "img_mid":"\/FileStorage\/thumbs\/M_e495f9a2074f643ed3bcc844c99d8f53.jpg",
                "img_big":"\/FileStorage\/thumbs\/B_e495f9a2074f643ed3bcc844c99d8f53_W.jpg",
                "name":"cart.jpg",
                "save":"<a href=\"\/storage.php?id=e18417eb8e823dbdf05199d0dc3151bc\"><img src=\"\/aecms\/interface\/ico\/save.png\"><\/a> 2306x1311px",
                "id":61540
            },
            {
                "img_mid":"\/FileStorage\/thumbs\/M_49d662e93ead63a18434a053e22db740.jpg",
                "img_big":"\/FileStorage\/thumbs\/B_49d662e93ead63a18434a053e22db740_W.jpg",
                "name":"snils.jpg",
                "save":"<a href=\"\/storage.php?id=9459fa7daf4dd451f689f21207a9a290\"><img src=\"\/aecms\/interface\/ico\/save.png\"><\/a> 739x565px",
                "id":61539
            }]
        }
    }
    Same result as before: emptyText message: 'No data';

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Put the reader on the proxy.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread