Horizontal list Sencha Tounch 2.1.1

Views:

Tile-View

Ext.define('MyApp.view.TileView', {
    extend: 'Ext.dataview.DataView',
    alias: 'widget.mydataview',

    config: {
        baseCls: 'tile-data-view',
        height: '100%',
        id: 'tile-view',
        width: '100%',
        itemCls: 'tile',
        store: 'ThemeStore',
        scrollable: {
            directionLock: true,
            direction: 'horizontal',
            momentumEasing: {
                momentum: {
                    acceleration: 30,
                    friction: 0.5
                },
                bounce: {
                    acceleration: 0.0001,
                    springTension: 0.9999,
                    
                },
                minVelocity: 3
            },
            outOfBoundRestrictFactor: 0
        },
        inline: {
            wrap: false
        },
        itemTpl: [
            '

',
            '    


{name}
',
            '    


{numOfCourses} courses
',
            '
'
        ]
    },

    initialize: function() {
        this.callParent();
        var me = this.container;
        //me.setWidth(2080);
        var el1 = Ext.get('MainContainer');
        var parent = this.getParent();
        //CSBfleXcroll.defer(1, window, [this.body.dom]);
        //var scroller = me.getScrollable();
        //console.info('My parent is : '+parent);
        //console.info('Main container : '+el1.getHeight());
        //console.info('scroller : '+ scroller);
    }

});

My-Panel

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

    requires: [
        'MyApp.view.TileView'
    ],

    config: {
        layout: {
            type: 'vbox'
        },
        scrollable: false,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                itemId: 'top-bread-crumb',
                items: [
                    {
                        xtype: 'button',
                        itemId: 'increase',
                        text: 'Increase'
                    },
                    {
                        xtype: 'button',
                        itemId: 'decrease',
                        text: 'Decrease'
                    }
                ]
            },
            {
                xtype: 'mydataview',
                itemId: 'tileview1',
                flex: 1
            }
        ],
        listeners: [
            {
                fn: 'onIncreaseTap',
                event: 'tap',
                delegate: '#increase'
            },
            {
                fn: 'onDecreaseTap',
                event: 'tap',
                delegate: '#decrease'
            },
            {
                fn: 'onPanelPainted',
                event: 'painted'
            }
        ]
    },

    onIncreaseTap: function(button, e, eOpts) {
        var tileView = this.down('#tile-view').container;
        var h = tileView.getHeight();
        var w = tileView.getWidth();
        console.log('this get width : '+ this.getWidth());
        console.log('height : '+ h + ' width : '+w);
        tileView.setWidth(w+300);
    },

    onDecreaseTap: function(button, e, eOpts) {
        var tileView = this.down('#tile-view').container;
        var h = tileView.getHeight();
        var w = tileView.getWidth();
        console.log('this get width : '+ this.getWidth());
        console.log('height : '+ h + ' width : '+w);
        tileView.setWidth(w-300);
    },

    onPanelPainted: function(element, eOpts) {
        console.log('on panel painted function');
        this.containerHeight= this.element.getHeight();
        this.containerWidth = this.element.getWidth();
        console.log('h = '+ this.containerHeight +' w = '+ this.containerWidth);
        var breadcrumb = this.down('#top-bread-crumb');
        var h = breadcrumb.element.getHeight();
        var w = breadcrumb.element.getWidth();
        console.log('height = '+h +' widht = '+ w);
        //this.setTileViewSize(h,w);
    },

    initialize: function() {
        this.callParent();
        var container = this.element;
        this.containerHeight=0;
        this.containerWidth=0;
        console.log('container : '+container);
        console.log('container width : '+ container.getWidth() + ' height : '+ container.getHeight());
        var tileView = this.down('#tile-view').container;
        tileView.setWidth(2080);
    }

});

Store:

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

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

    config: {
        autoLoad: true,
        model: 'MyApp.model.ThemeModel',
        storeId: 'ThemeStore',
        proxy: {
            type: 'ajax',
            url: 'data/test.json',
            reader: {
                type: 'json'
            }
        }
    }
});

Model

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

    config: {
        fields: [
            {
                name: 'code'
            },
            {
                name: 'name'
            },
            {
                name: 'numOfCourses'
            }
        ]
    }
});

Data

[
    {
        "code": "TH10",
        "name": "Computer",
        "numOfCourses": 5
    },
    {
        "code": "TH11",
        "name": "Midwifery",
        "numOfCourses": 3
    },
    {
        "code": "TH12",
        "name": "Professional",
        "numOfCourses": 7
    },
    {
        "code": "TH13",
        "name": "Sport and Exercise Science",
        "numOfCourses": 4
    },
    {
        "code": "TH14",
        "name": "International Business",
        "numOfCourses": 5
    },
    {
        "code": "TH15",
        "name": "Design Engineering",
        "numOfCourses": 6
    },
    {
        "code": "TH16",
        "name": "Work Based Learning Studies",
        "numOfCourses": 4
    },
    {
        "code": "TH17",
        "name": "Business Management",
        "numOfCourses": 18
    },
    {
        "code": "TH18",
        "name": "Biology",
        "numOfCourses": 4
    },
    {
        "code": "TH2",
        "name": "Languages",
        "numOfCourses": 5
    },
    {
        "code": "TH3",
        "name": "Miscellaneous",
        "numOfCourses": 36
    },
    {
        "code": "TH5",
        "name": "Financial",
        "numOfCourses": 1
    },
    {
        "code": "TH6",
        "name": "Psychology",
        "numOfCourses": 7
    },
    {
        "code": "TH7",
        "name": "Healthcare Science",
        "numOfCourses": 5
    },
    {
        "code": "TH8",
        "name": "Criminology",
        "numOfCourses": 6
    },
    {
        "code": "TH9",
        "name": "Other Course",
        "numOfCourses": 6
    }
]