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

      0  

    Default


    Small update. I modified the View.js & Feature.js a tiny bit (hack) as well as my extended TouchGrid class to get someting to render. I have attached two screenshots of what it's rendering on the first grid & when I slide the carousel what renders on the second grid. Notice the weird lines in my nested list.

    Modified part of View.js. In Feature.js I just commented out line 25 where it deletes cfg.feature.
    Code:
    constructor: function(config) {
            var me = this;
            if (!config.colModel) {
                config.colModel = me.getColModel();
            }
            Ext.apply(config, {
                itemTpl : me._buildTpl(config.colModel, false)
            });
    
            if (!config.features) {
                config.features = [];
            }
            if (typeof me.initFeatures === 'function') {
                if (!config.features.constructorFn) {
                    config.features.constructorFn = me.getConstructorFn();
                }
                me.initFeatures(config.features.constructorFn);
            }
    
            me.callParent(arguments);
        },
    
        initialize: function() {
            var me = this;
    
            me.header = me.insert(0, {
                xtype  : 'container',
                cls    : 'x-grid-hd-row',
                docked : 'top',
                height : 40,
                html   : me._buildTpl(this.getColModel(), true)
            });
    
            if (typeof me.initFeatures === 'function') {
                if (!me.features.initializeFn) {
                    me.features.initializeFn = me.getInitializeFn();
                }
                me.initFeatures(me.features.initializeFn);
            }
    
            me.callParent(arguments);
        },

    My new class, had to add these methods in order for it to work as is in an MVC pattern. Not sure why the grid cells show undefined either. The store is loaded properly from when I checked the store load listener.


    Code:
    Ext.define('Ace.view.LinkSummaryGrid', {
        extend: 'Ext.ux.touch.grid.View',
        xtype : 'linkgrid',
        //requires: ['Ext.ux.touch.grid.View'],
        config: {
            store   : 'LinkSummary',
            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;"
            }]
        },
        constructor : function() {
            this.callParent(arguments);
            this.getStore().load({params : {ufq : this.ufq}});
        }
    });
    Please note when looking at these screenshots, the CSS file from github is being loaded and checking the elements in firebug show they are referencing that file correctly.

    Pic 1
    touch-grid-2.jpg

    Ignore the column headers & undefined stuff. That is fixed. Notice the extra lines in the left hand column bar. That happens when I flip to the 2nd grid in the carousel. The 1st grid wraps/sticks out. Again, the css file from github is being loaded, so not sure what's causing that yet.

  2. #12
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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


    Just pushed an update to GitHub. Changed the a few things like the Sorter and HeaderMenu feature. I want to do some more work on the filter part of the HeaderMenu.

    One thing that you all will be very happy with is I spent about 15 minutes working on getting horizontal scrolling to work. The only thing with this is the width of the Grid is dependent on every grid use a number for the width. It cannot be a percentage or else it will not try to calculate it's own width. I added horizontal.html and horizontal.js to demonstrate how I got this 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.

  3. #13
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    Mitchell, thanks much for this component. I initially developed with it using the PR2 and was testing only on browser, and it was working fine.

    Then I simultaneously switched to PR3 and Phonegap. Now when I run on iphone simulator, the column headers do not show up. Are you aware of any problems that due to changes from PR2 to PR3 and do you plan to release any updates to the Grid soon?

  4. #14
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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 mike lebowski View Post
    Mitchell, thanks much for this component. I initially developed with it using the PR2 and was testing only on browser, and it was working fine.

    Then I simultaneously switched to PR3 and Phonegap. Now when I run on iphone simulator, the column headers do not show up. Are you aware of any problems that due to changes from PR2 to PR3 and do you plan to release any updates to the Grid soon?
    Just pushed an update to get it to work with PR3.
    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. #15
    Sencha User
    Join Date
    Dec 2011
    Posts
    103
    Vote Rating
    0
    mike lebowski is on a distinguished road

      0  

    Default


    Thanks Mitchell, that update fixes the problems i had seen in the IOS simulator.

    Just curious, have you tried to do any phonegap apps with your code? As noted in another thread, when I follow your code pattern and use the Ext.Loader.setConfig with paths and Ext.require block, it works fine in IOS but Android fails with messages about not being able to find the Ext.ux.touch.grid files.

    Just curious if you have succeeded in incorporating this component into a phonegap app.

  6. #16
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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 mike lebowski View Post
    Thanks Mitchell, that update fixes the problems i had seen in the IOS simulator.

    Just curious, have you tried to do any phonegap apps with your code? As noted in another thread, when I follow your code pattern and use the Ext.Loader.setConfig with paths and Ext.require block, it works fine in IOS but Android fails with messages about not being able to find the Ext.ux.touch.grid files.

    Just curious if you have succeeded in incorporating this component into a phonegap app.
    No I have not. Personally, I don't like wrapping a web app in phonegap. If you need device apis then sure, go for it but if not then don't... I have not needed them.
    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.

  7. #17
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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


    FYI... I just added a Paging feature that will add a toolbar with a previous, forward and go to buttons. The go to button will show a floating panel with a list of the pages.

    I also made the header into a toolbar so you can take advantage of the ui setting. Also some other optimizations.

    All this tested on PR3.
    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.

  8. #18
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    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


    While the sencha.com site was down, I added a cell editing feature with an example.
    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. #19
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    I'have tryed Ext.ux.touch.grid and it works very well.
    My store get data with a json-p calling to a asp.net aspx page.

    For to have good performaces I have used in my aspx page the asp.net chacing system. In this mode from server side I can refresh my data from database only one time each hour. But in this case the local store doesn't fire load event and the "previous" button doesn't change its status. It's my opinion that for the client is not important if the data from server arrive from chacing data or not. this is transparent for it. Is it true? I have verified the data using or not using the cache and there are not differences...
    Have you an idea about why this?
    Thanks in advance.


    EDIT: I've tryed to add a breakpoint in my aspx page and I have seen that if the server work is before stopped and after restarted the component works well again. The store load event seem doesn't fire if the server response is too fast...

    EDIT:
    I have added to my asp.net page a wait statement for 25 milliseconds when I load data from its cache ad now it's all perfect, but I don't understand why this method is good...

  10. #20
    Sencha User
    Join Date
    Oct 2011
    Location
    Kyiv, Ukraine
    Posts
    12
    Vote Rating
    0
    Donbydon is on a distinguished road

      0  

    Default


    Thanks for the useful Extension. I run example grid.View. It's ok, but if I add item with long name(~70 symols) right column is out of screen. Is it normal behavior? Maybe problem is in ST Dataview's Width calculation... Columns width are: 40%, 15%, 15%, 15%, 15%. See picture below.
    1.jpg