1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,798
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default Ext.ux.touch.grid

    Ext.ux.touch.grid


    As usual, I have the first extension built and released

    Ext.ux.TouchGridPanel was a huge success, thank you for everyone's input as it matured (still has room). Sencha Touch 2 should not be without a grid component either and as of the first developer preview there is no native grid component.

    Ext.ux.touch.grid is the namespace and like the new namespacing Sencha Touch 2 and Ext JS 4 started, I followed with this.

    The main class is Ext.ux.touch.grid.View which is just a customized DataView. It supports having a header and of course all the rows. You can have cell renderers (uses XTemplate's renderers instead of any processData method).

    Ext.ux.touch.grid.View is pretty stripped down. In fact it doesn't even support sorting. I haven't left you out in the cold, I just wanted to have a lightweight grid component.

    Like Ext JS 4's grid architecture, Ext.ux.touch.grid has the concept of features. Features are basically plugins. Unlike Ext JS 4, I allow you to specify what stage in the grid you want to instantiate a feature. There are two stages, in the constructor and in the initialize methods. Add features to constructorFn array and it will create the feature right before the callParent call. Save for initializeFn array.

    Like I said, this is a start. Many things will change to further this grid and also keep inline with the latest Sencha Touch 2 version.

    GitHub: https://github.com/mitchellsimoens/Ext.ux.touch.grid

    Just an update, got horizontal scrolling to work!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Great as always Mitchell
    I will use it for sure in my upcoming projects.

    I'm looking forward for the first stable version.

    Thanks for sharing.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Thanks for sharing
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,798
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by andreacammarata View Post
    Great as always Mitchell
    I will use it for sure in my upcoming projects.

    I'm looking forward for the first stable version.

    Thanks for sharing.
    Would really love that editable list plugin to work as a feature of this grid
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,798
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by tomalex0 View Post
    Thanks for sharing
    Thanks... good news, shouldn't be any problems with the renderers like the last one! Using the built-in XTemplate way of changing values Don't think I will be able to get horizontal scrolling working but am still looking into that. Also need to be able to show/hide columns and that will come as a feature!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Would really love that editable list plugin to work as a feature of this grid
    Uhmm...that's not a bad idea.
    I think I could work on it
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  7. #7
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      1  

    Default


    Great news! Touch desperately needs a grid, and its great you developed one. Here are some problems I have had in case it helps you. I understand its not ready for primetime, but was testing how it would work with MVC

    I have a skeleton test app where I was putting in different features testing 2.0 and most things were working. I tried adding a TouchGrid to a carousel, and as soon as I did, the entire app stopped loading. No warnings, no errors, just didn't draw anything in the app. This includes the viewport, etc. There was nothing but a couple empty divs where the main app would be drawn. As soon as I removed the TouchGrid reference, it was back to normal. The tabpanel showed up fine as well as the carousel.

    Below is my grid, carousel, tabpanel, app.js, and controller. I hope this is useful to you. I am really confused at it not throwing any errors, yet nothing loading either.

    As a side note, I checked firebug, and the view, store, and models are all being loaded dynamically (as well as all your ux code) and there are no 404 errors not being able to find a script



    Code:
    Ext.define('Ace.view.Backlinks', {
        extend: 'Ext.TabPanel',
        requires: ['Ace.view.LinkSummaryCarousel'],
        config: {
            tabBar: {
                dock: 'top',
                layout: {
                    pack: 'center'
                }
            },
            ui: 'light',
            cardSwitchAnimation: {
                type: 'slide'
            },
            items: [{
                    xtype : 'linkcarousel'
                }]
        }
    });

    Code:
    Ext.define('Ace.view.LinkSummaryCarousel', {
        extend: 'Ext.Panel',
        xtype : 'linkcarousel',
        requires: ['Ace.view.LinkSummaryGrid'],
        config: {
            title: 'Top Pages',
            cls: 'cards',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [{
                xtype: 'carousel',
                items: [{
                    xtype : 'linkgrid',
                    ufq : 'someval'
                },{
                    xtype : 'linkgrid',
                    ufq : 'anotherval'
                }]
            }]
        }
    });

    Code:
    Ext.define('Ace.view.LinkSummaryGrid', {
        extend: 'Ext.Panel',
        xtype : 'linkgrid',
        requires: ['Ext.ux.touch.grid.View'],
        config: {
            store   : 'LinkSummary',
            features   : {
                    constructorFn : [],
                    initializeFn  : [
                        'Ext.ux.touch.grid.feature.Sorter',
                        'Ext.ux.touch.grid.feature.Filter',
                        {
                            ftype    : 'Ext.ux.touch.grid.feature.HeaderMenu',
                            submitFn : function() {
                                var me    = this,
                                    menu  = me.menu,
                                    grid  = me.grid,
                                    store = grid.getStore(),
                                    field = menu.down('selectfield[label=Sort]');
    
                                store.sort(menu.dataIndex, field.getValue())
                            },
                            menu     : {
                                items : [
                                    {
                                        xtype   : 'selectfield',
                                        label   : 'Sort',
                                        options : [
                                            { text : 'Ascending',  value : 'ASC' },
                                            { text : 'Descending', value : 'DESC' }
                                        ]
                                    }
                                ]
                            }
                        }
                    ]
                },
            colModel    : [{
                    header   : "UU",
                    mapping  : "uu",
                    flex     : 1
            },{
                    header   : "Links",
                    mapping  : "ueid",
                    style    : "text-align: center;"
            },{
                    header   : "Rank",
                    mapping  : "umrp",
                    //cls      : "centered-cell",
                    style    : "text-align: center;",
                    renderer : function(val) {
                            var color = (val > 0) ? "00FF00" : "FF0000";
                            return "<span style='color: #" + color + ";'>" + val + "</span>";
                    }
            },{
                    header   : "Position",
                    mapping  : "pos",
                    hidden   : true,
                    style    : "text-align: right;"
            }]
        }
    });

    Code:
    Ext.define('Ace.controller.Backlinks', {
        extend: 'Ext.app.Controller',
        config: {
        },
    
        views : [
            'Backlinks',
            'LinkSummaryCarousel',
            'LinkSummaryGrid'
        ],
        models: [
            //'LinkSummary'
        ],
        stores: [
            'LinkSummary'
        ],
    
        refs: [
            {
                ref     : 'backlinkgrid',
                selector: 'linkgrid',
                autoCreate: true,
                xtype   : 'linkgrid'
            }
        ],
    
        init: function() {   
            console.log('backlinks controller init');
            
            this.getLinksummaryStore().on({
                scope: this,
                load : this.onLinkStoreLoad,
                beforeload: this.onPreLinkLoad
            });
        },
        onPreLinkLoad : function(store, node, records, success, eOpts) {
            console.log('link store loading');
        },
        onLinkStoreLoad: function(store, node, records, success, eOpts) {
            console.log('link store loaded');
        }
    });
    Code:
    Ext.Loader.setConfig({ 
        enabled: true,
        disableCaching: false
    });
    
    Ext.require([
        'Ext.ux.touch.grid.View',
        'Ext.ux.touch.grid.feature.Feature',
        'Ext.ux.touch.grid.feature.Filter',
        'Ext.ux.touch.grid.feature.HeaderMenu',
        'Ext.ux.touch.grid.feature.Sorter'
    ]);
    
    Ext.application({
        name: 'Ace',
        appFolder: '/js/app',
        useLoadMask : true,
    
        controllers: ['Main', 'Backlinks'],
    
        stores: ['LinkSummary'],  //This was added after the fact. Made the
                                  //app start loading again. However I hit
                                   //a new bug at the end of this post.
        
        launch: function() {
            Ext.create('Ace.view.Main');
        }
    });

    <edit> Adding another note, I commented out the "requires" line & the items array in the carousel, and every reference to the grid in the controller, and it was still loading blank. Then I commented out the LinkSummary store, and all of a sudden the skeleton app started loading again. Will do more investigating, but I am stumped as to why no error is thrown and the store causes a blank page. (If it is really the cause?)

    This is my store for good measure

    Code:
    Ext.define('Ace.store.LinkSummary', {
        extend      : 'Ext.data.Store',
        alias       : 'widget.linksummarystore',
        model       : 'Ace.model.LinkSummary',
        sorters: [{
            property: 'pos',
            direction: 'ASC'
        }],
        autoLoad: false,
        proxy : {
            type: 'ajax',
            url: '/moz/toppage/',
            reader: {
                root: 'data',
                type: 'json'
                //totalProperty: "total",
            }
        }
    });
    <edit> Another update. I referenced the store for this grid in my app.js, and the page is loading again. Weird since it's the only store referenced there, but whatever. It's working.

    So far the only issue I have come across is when trying to add a grid into a carousel. On this line in Carousel.js "Cannot call method 'addCls' of null'.

    Code:
    item.element.addCls(this.getItemCls());
    Great work on this ux!

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,798
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    So are things working? I have a TabPanel that has fullscreen to true and one item which is a Carousel. The Carousel has two items under it which is two different instances of the grid and everything is working like it should. Here is all my code:

    Code:
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            'Ext.ux.touch.grid': './Ext.ux.touch.grid'
        }
    });
    
    Ext.require([
        'Ext.ux.touch.grid.View'
    ]);
    
    Ext.define('TestModel', {
        extend : 'Ext.data.Model',
        fields : [
            'company',
            'price',
            'change',
            'pct',
            'updated'
        ]
    });
    
    Ext.setup({
        onReady : function() {
            var store = Ext.create('Ext.data.Store', {
                model    : 'TestModel',
                autoLoad : true,
                proxy    : {
                    type   : 'ajax',
                    url    : 'data.php',
                    reader : {
                        type : 'json',
                        root : 'data'
                    }
                }
            });
            var store2 = Ext.create('Ext.data.Store', {
                model    : 'TestModel',
                autoLoad : true,
                proxy    : {
                    type   : 'ajax',
                    url    : 'data.php',
                    reader : {
                        type : 'json',
                        root : 'data'
                    }
                }
            });
    
            var car = Ext.create('Ext.carousel.Carousel', {
                title : 'Carousel',
                items : [
                    {
                        xtype    : 'touchgridpanel',
                        store    : store,
                        colModel : [
                            {
                                header    : 'Company',
                                dataIndex : 'company',
                                style     : 'padding-left: 1em;',
                                width     : '40%',
                                sortable  : false,
                                filter    : { type : 'string' }
                            },
                            {
                                header    : 'Price',
                                dataIndex : 'price',
                                style     : 'text-align: center;',
                                width     : '15%',
                                filter    : { type : 'numeric' }
                            },
                            {
                                header    : 'Change',
                                dataIndex : 'change',
                                cls       : 'centered-cell',
                                width     : '15%',
                                renderer  : function(value, values) {
                                    var color = (value > 0) ? '009933' : 'FF0000';
                                    return '<span style="color: #' + color + ';">' + value + '</span>';
                                }
                            },
                            {
                                header    : '% Change',
                                dataIndex : 'pct',
                                cls       : 'centered-cell',
                                width     : '15%',
                                renderer  : function(value, values) {
                                    var color = (value > 0) ? '009933' : 'FF0000';
                                    return '<span style="color: #' + color + ';">' + value + '</span>';
                                }
                            },
                            {
                                header    : 'Last Updated',
                                dataIndex : 'updated',
                                hidden    : true,
                                style     : 'text-align: right; padding-right: 1em;',
                                width     : '15%'
                            }
                        ]
                    },
                    {
                        xtype    : 'touchgridpanel',
                        store    : store2,
                        colModel : [
                            {
                                header    : 'Company',
                                dataIndex : 'company',
                                style     : 'padding-left: 1em;',
                                width     : '40%',
                                sortable  : false,
                                filter    : { type : 'string' }
                            },
                            {
                                header    : 'Price',
                                dataIndex : 'price',
                                style     : 'text-align: center;',
                                width     : '15%',
                                filter    : { type : 'numeric' }
                            },
                            {
                                header    : 'Change',
                                dataIndex : 'change',
                                cls       : 'centered-cell',
                                width     : '15%',
                                renderer  : function(value, values) {
                                    var color = (value > 0) ? '009933' : 'FF0000';
                                    return '<span style="color: #' + color + ';">' + value + '</span>';
                                }
                            },
                            {
                                header    : '% Change',
                                dataIndex : 'pct',
                                cls       : 'centered-cell',
                                width     : '15%',
                                renderer  : function(value, values) {
                                    var color = (value > 0) ? '009933' : 'FF0000';
                                    return '<span style="color: #' + color + ';">' + value + '</span>';
                                }
                            },
                            {
                                header    : 'Last Updated',
                                dataIndex : 'updated',
                                hidden    : true,
                                style     : 'text-align: right; padding-right: 1em;',
                                width     : '15%'
                            }
                        ]
                    }
                ]
            });
    
            var tab = Ext.create('Ext.TabPanel', {
                fullscreen : true,
                items      : [car]
            });
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      1  

    Default


    It's not working for me. It crashes with the error I posted in Carousel.js on the first grid it tries to create:

    'Uncaught TypeError: Cannot call method 'addCls' of null'

    Carousel.js-- Line 181
    Code:
    item.element.addCls(this.getItemCls());
    So far the main difference I see is you are instantiating the instances of the stores & grids yourself, while I am using the new Touch MVC pattern similar to extjs4 with lazy loading. I am not sure what it is expecting `item.element` to be in the code above. I will continue to investigate but any insights are helpful.

    It could really be coming from anywhere though, since this is a new ux release working off of ST PR1. But b/c of the popularity of your plugin, I figured it would be best to figure out which side the problem is on in case a bug report should be filed.

    It also could be with the way I set it up. I stopped referencing the class I created extending your view, and just defined everything within the carousel as you did. I didn't get the item.element error, but a different one in the View.js constructor about it not being able to find constructorFn. That one should be easy for me to fix.

    However, I will see if I can find an answer to the original problem since it's better to define an extended class of your TouchGrid with all my config stuff in there, but I am going to continue down the path you did of defining it within the carousel and see if I can get it completely working, then work backwards.

  10. #10
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    Stripped the extended TouchGrid class down to this. No more errors, but it's rendering an empty carousel. Getting closer. Like I just noticed I was extending Ext.Panel. Hah, oops.

    I am still curious as to why I had to reference the store in my app.js for this grid, but didn't for my NestedList / TreeStore. That might be a bug in the UX or PR1?

    Code:
    Ext.define('Ace.view.LinkSummaryGrid', {
        extend: 'Ext.Panel',
        xtype : 'linkgrid',
        requires: ['Ext.ux.touch.grid.View'],
        config: {
            store   : 'LinkSummary',
            colModel    : [{
                    header   : "UU",
                    mapping  : "uu",
                    flex     : 1
            },{
                    header   : "Links",
                    mapping  : "ueid",
                    style    : "text-align: center;"
            },{
                    header   : "Rank",
                    mapping  : "umrp",
                    //cls      : "centered-cell",
                    style    : "text-align: center;",
                    renderer : function(val) {
                            var color = (val > 0) ? "00FF00" : "FF0000";
                            return "<span style='color: #" + color + ";'>" + val + "</span>";
                    }
            },{
                    header   : "Position",
                    mapping  : "pos",
                    hidden   : true,
                    style    : "text-align: right;"
            }]
        }
    });

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi