mvc example outdated

[Jacob Weber]

mvc/app/view/Grid.js extends Ext.ux.touch.grid.View instead of Ext.ux.touch.grid.List, so you get a warning when you load it. It also includes Sencha Touch 2.0.1, which is incompatible with the current Grid code.

[Aswini1226]

Please Solve this issue...I have replaced the JS files too..But no Luck..:-(

[Andrew Ralston]

I too am interested in this example. I tried refactoring to work with 2.1 because I am having troubles building for production in my full app (I loose much of the formatting with strong usability consequences). I'd like to come up with a simple MVC example that works with the production build - to troubleshoot on my end. If you point me in the right direction I'd be happy to fork and open a pull request.

[Andrew Ralston]

This renders a blank screen. If you find the div that represents the grid and change display: none to display:block you see only the headers, aligned vertically instead of horizontally.

My main View:

Ext.define('default.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Grid Sample',
                iconCls: 'action',

                items : [{
                    xtype : 'gridview'
                }]
            },
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                }],

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Get Started',
                iconCls: 'action',

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

and my grid view:

Ext.define('default.view.Grid', {
    extend: 'Ext.ux.touch.grid.List',
    xtype: 'gridview',
    requires: [
        'Ext.ux.touch.grid.List',
        'Ext.ux.touch.grid.feature.Feature',
        'Ext.ux.touch.grid.feature.Sorter'
    ],
    config: {
        fullscreen : true,
        store      : 'TestStore',
        features   : [
            {
                ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                launchFn : 'initialize'
            }
        ],
        columns   : [
            {
                header    : 'Company',
                dataIndex : 'company',
                style     : 'padding-left: 1em;',
                width     : '40%',
                filter    : { type : 'string' }
            },
            {
                header    : 'Price',
                dataIndex : 'price',
                style     : 'text-align: center;',
                width     : '15%',
                filter    : { type : 'numeric' }
            },
            {
                header    : 'Change',
                dataIndex : 'change',
                cls       : 'centered-cell redgreen-cell',
                width     : '15%',
                renderer  : function (value) {
                    var cls = (value > 0) ? 'green' : 'red';

                    return '<span class="' + cls + '">' + value + '</span>';
                }
            },
            {
                header    : '% Change',
                dataIndex : 'pct',
                cls       : 'centered-cell redgreen-cell',
                width     : '15%',
                renderer  : function (value) {
                    var cls = (value > 0) ? 'green' : 'red';

                    return '<span class="' + cls + '">' + value + '</span>';
                }
            },
            {
                header    : 'Last Updated',
                dataIndex : 'updated',
                hidden    : true,
                style     : 'text-align: right; padding-right: 1em;',
                sortable  : false,
                width     : '15%'
            }
        ]
    }
});

[Andrew Ralston]

I forked the code and rewrote the MVC example (mvc-2.1 sub-directory). Fork is located here (until merged):

https://github.com/pherris/Ext.ux.touch.grid