Overriding the applyHtml function in Architect

[craigwalshuk]

I am displaying a list of tweets from a particular user or hash tag when a button is pressed:

this.getSocialNavigation().push({
    xtype: 'list',
    id: 'TweetList',
    itemTpl: [
    '<img src="{profile_image_url}" class="avatar" />',
    '<div class="tweet">',
    '<span class="posted">{created_at:timeAgoInWords}</span>',
    '<h2>{from_user}</h2>',
    '<div class="tweettext">{text}</div>',
    '</div>'
    ],
    store: 'Tweets',
    title: 'Tweet List'
});

but the links, hashtags and usernames are just coming back as text, so I had a look at the touchtweets example in the sdk and found the TweetListItemText.js file that is overriding the applyHtml function to covert them:

/**
 * This is the component used in TweetListItem's to display the text of a tweet.
 *
 * This needs to be special so we can:
 *  - linkify URLs in the tweet
 *  - Wrap usernames with spans
 *  - Wrap hashtags with spans.
 */
Ext.define('Twitter.view.TweetListItemText', {
    extend: 'Ext.Component',


    /**
     * We simply override the applyHtml method, which is called when the {@link #html} configuration is changed.
     * We run a few regexs and try and match the URLs, hashtags or usernames, and then return the resulting value
     * so the {@link #html} configuration can be updated (updateHtml).
     */
    applyHtml: function(html) {
        // replace URLs with proper tags
        html = html.replace(/(http:\/\/[^\s]*)/g, "<a class=\"link\" target=\"_blank\" href=\"$1\">$1</a>");


        // usernames
        html = html.replace(/(^|\s)@(\w+)/g, "$1<span class=\"username\">@$2</span>");


        // hashtags
        html = html.replace(/(^|\s)#(\w+)/g, "$1<span class=\"hashtag\">#$2</span>");


        return html;
    }
});

How do I implement the above in Architect?

[aconran]

add a basic function and name it applyHtml

[craigwalshuk]

Hi Aaron thanks for your reply.

Here is what I have on the button tap action in my controller that doesn't seem to work:

this.getSocialNavigation().push({
    xtype: 'list',
    id: 'tweetList',
    store: 'Tweets',
    title: 'Tweet List',
    
    itemTpl: [
    '<img src="{profile_image_url}" class="avatar" />',
    '<div class="tweet">',
    '<span class="posted">{created_at:timeAgoInWords}</span>',
    '<h2>{from_user}</h2>',
    '<div class="tweettext">{text}</div>',
    '</div>'
    ],
    
    applyHtml: function(html) {
        html = html.replace(/(http:\/\/[^\s]*)/g, "<a class=\"link\" target=\"_blank\" href=\"$1\">$1</a>");
        html = html.replace(/(^|\s)@(\w+)/g, "$1<span class=\"username\">@$2</span>");
        html = html.replace(/(^|\s)#(\w+)/g, "$1<span class=\"hashtag\">#$2</span>");
        
        return html;
    }
});

I've also tried putting just the applyHtml section above as a function in the Application section, a function in the launch section and as a function in the controller, all with no success.

Any further help is greatly appreciated.

Kind Regards,
Craig Walsh.

[aconran]

Sencha Touch doesn't allow you to pass in functions to override existing members at the instance level. You must override these at the class level.

If you move the applyHtml from the .push() call to the actual subclass itself, this will work.

[allisterf]

Could do with some help with this too.

Not sure I'm going around this the right way:

I used Architect to create a new component based on Ext.dataview.List - so now I have defined a TweetList component, which extends the Ext.dataview.List, with the code:

Ext.define('TSApp.view.TweetList', {
    extend: 'Ext.dataview.List',

    config: {
        itemTpl: [
            '<div>List Item {string}</div>'
        ]
    }

});

I assume from your instructions that I need to add the applyHtml function into that component? How do you do that, as it's read only? Or am I doing this completely wrong?

In the event that the answer is something along the lines of 'create an override', could you explain that with an example, as it's not that clear to me...

Thanks for all your help,
Allister

[aconran]

Activate your top level component that you want to add the applyHtml function to.

Drag the Basic Function from the toolbox (Under Behaviors) to the top level component.
OR
Double click the basic function with the top level component activated
OR
Search for "Functions" in the property grid and click the +

After adding the function configure the name to applyHtml and the proper params.

[allisterf]

Hi Aaron - thanks for the ponters. Still not getting it to work though.

What I'm looking for is for the links in the twitter feed list to be actual links.

Thelist is a top level component and my code is:

Ext.define('MyApp.view.TweetPanel', {
    extend: 'Ext.dataview.List',
    alias: 'widget.tweets',

    config: {
        height: 700,
        showAnimation: 'slideIn',
        styleHtmlContent: true,
        width: 300,
        hideOnMaskTap: true,
        modal: true,
        scrollable: 'vertical',
        store: 'TweetStore',
        cls: [
            'blackpanelbg'
        ],
        itemTpl: [
            '<div class ="tweetpic">',
            '<img src="{profile_image_url}" />',
            '</div>',
            '',
            '<div class="tweet">',
            '<span class="posted">{created_at:timeAgoInWords}</span>',
            '<div class="user">',
            '{from_user}',
            '</div>',
            '<p>{text}</p>',
            '</div>'
        ],
        plugins: [
            {
                type: 'listpaging'
            },
            {
                type: 'pullrefresh'
            }
        ]
    },

    applyHtml: function(html) {
        html = html.replace(/(http:\/\/[^\s]*)/g, "<a class=\"link\" target=\"_blank\" href=\"$1\">$1</a>");
        html = html.replace(/(^|\s)@(\w+)/g, "$1<span class=\"username\">@$2</span>");
        html = html.replace(/(^|\s)#(\w+)/g, "$1<span class=\"hashtag\">#$2</span>");

        return html;

    }

});

The panel is a slide-in, but otherwise nothing unusual. I added the basic function to the list and set the function name and params, then added my replace functions.

Any idea where it might be going wrong?

Allister