gistfile1.js

Ext.define('AW.view.Skybox', {
    extend : 'Ext.Container',
    xtype  : 'skybox',

    config : {
        height  : 153,
        layout  : 'hbox',
        cls     : 'skybox',
        stories : undefined,
        items   : [
            {
                xtype  : 'component',
                itemId : 'logo',
                width  : 185,
                style  : 'padding: 25px 0 0 10px;box-shadow:0px 0px 30px black;border-right: 1px solid #A8A8A8;',
                html   : '<img src="resources/images/wire-logo.png" style="width:164px; height: 91px;" />'
            },
            {
                xtype  : 'container',
                cls    : 'skybox-container',
                flex   : 1,
                itemId : 'stories',

                scrollable : {
                    direction : 'horizontal'
                },

                tpl : [
                    '<div style="display: -webkit-box; -webkit-box-orient: horizontal;">',
                        '<tpl for=".">',
                            '<tpl if="! values.advertising">',
                                '<div class="skybox-story" data-id="{[ xindex - 1]}" style="background-image: url(http://src.sencha.io/226/{image});">',
                                    '<h2>{postDesc}</h2>',
                                '</div>',
                            '</tpl>',
                            '<tpl if="values.advertising">',
                                '<div class="ad skybox-story">',
                                '</div>',
                            '</tpl>',
                        '</tpl>',
                    '</div>'
                ]
            }
        ],

        listeners : {
            painted : 'onPaintedRegisterEvents'
        }
    },

    onStoriesTouchStart : function(evtObj) {
        var target = evtObj.getTarget();

        target && Ext.fly(target).addCls('pressed');
    },

    onStoriesTouchEnd : function(evtObj) {
        var target = evtObj.getTarget();
        target && Ext.fly(target).removeCls('pressed');
    },

    applyStories : function(cfg) {
        if (! cfg) {
            return this.down('#stories');
        }
    },

    onPaintedRegisterEvents : function() {
        var me = this;

        me.getStories().renderElement.on({
            scope      : me,
            touchstart : 'onStoriesTouchStart',
            touchend   : 'onStoriesTouchEnd',
            tap        : 'onStoriesTap',
            delegate   : '.skybox-story'
        });
    },

    onStoriesTap : function(evtObj, element) {
        var me      = this,
            target  = evtObj.getTarget(),
            index   = target.getAttribute('data-id'),
            article = me.getStories().getData()[index];

        article && me.fireEvent('articletap', me, article.id, 'curated');
    }
});