Displaying Twitter Search Query

[ac360]

Hi there,

I've been following a youtube tutorial on creating a Sencha App in Sencha Architect to simply display tweets. I'm now trying to modify it to show tweets containing a keyword.

My JSON link is valid. But I cannot get the app to display the tweet data. I think it's a simple problem. But here is the code.

JSON link: http://search.twitter.com/search.json?q=ojai&count=3

Code:

Model:

Ext.define('MyApp.model.Tweet', {    extend: 'Ext.data.Model',


    config: {
        fields: [
            {
                name: 'text',
                mapping: 'results.text'
            },
            {
                name: 'created_at',
                mapping: 'results.created_at',
                type: 'date'
            },
            {
                name: 'profile_image_url',
                mapping: 'results.profile_image_url'
            },
            {
                name: 'name',
                mapping: 'results.from_user_name'
            }
        ]
    }
});

Store:

Ext.define('MyApp.store.Tweets', {    extend: 'Ext.data.Store',


    requires: [
        'MyApp.model.Tweet'
    ],


    config: {
        autoLoad: true,
        model: 'MyApp.model.Tweet',
        storeId: 'Tweets',
        proxy: {
            type: 'jsonp',
            url: 'http://search.twitter.com/search.json?q=ojai&count=20',
            reader: {
                type: 'json'
            }
        }
    }
});

Views:

Ext.define('MyApp.view.MyPanel', {    extend: 'Ext.Panel',


    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Ojai Tweets',
                items: [
                    {
                        xtype: 'button',
                        hidden: true,
                        itemId: 'Back',
                        ui: 'back',
                        text: 'Back'
                    }
                ]
            },
            {
                xtype: 'list',
                id: 'TweetList',
                itemId: 'mylist',
                itemTpl: [
                    '<div style="float:left;width:60px;">',
                    '    <img src="{profile_image_url}">',
                    '</div>',
                    '<div style="margin-left:62px;">',
                    '    {text}<br>{created_at:date("d M Y")}',
                    '</div>'
                ],
                store: 'Tweets'
            },
            {
                xtype: 'panel',
                id: 'TweetPreview',
                padding: '12px',
                tpl: [
                    '<div style="float:left;width:60px;">',
                    '    <img src="{profile_image_url}">',
                    '</div>',
                    '<div style="position:relative;margin-left:64px;">',
                    '    {name}',
                    '    <br>',
                    '    <div style="color:gray;font-size:80%;">',
                    '',
                    '</div>',
                    '',
                    '<div style="clear:both;margin-top:6px;background-color:white;padding:6px;border-radius:10px;">',
                    '    {text}',
                    '    <br>',
                    '    <div style="color:grey;font-size:80%;padding-top:6px;">Posted: {created_at:date("d M Y h:m")}</div>',
                    '</div>'
                ],
                scrollable: true
            }
        ],
        listeners: [
            {
                fn: 'onBackTap',
                event: 'tap',
                delegate: '#Back'
            },
            {
                fn: 'onTweetlisItemTap',
                event: 'itemtap',
                delegate: '#TweetList'
            }
        ]
    },


    onBackTap: function(button, e, options) {
        button.hide();


        this.setActiveItem(0);


        this.down("#TweetList").deselectAll();


    },


    onTweetlisItemTap: function(dataview, index, target, record, e, options) {
        this.setActiveItem(1);


        this.down("#Back").show();


        this.down("#TweetPreview").setData(record.data);
    }


});

[ac360]

woooo! Solved! I forgot to set the root property to "results" in the jsonreader

            reader: {                type: 'json',
                rootProperty: 'results'
            }

[scottmartin]

Good to hear .. thanks for the update.

Scott.