1. #121
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Um... ok. Then you need to rethink things or play with CSS a little. You cannot use auto as your layout, thats the cause of your scrolling problem.
    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. #122
    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


    Hi mitchell,

    What you think about providing Horizontal Scroll while we have more than say 4 columns.

    Using your source code i have created much similar grid, i was using thead and tbody, i was not able to provide a scroller for tbody. I would like to share with you, so you can have a quick look in to it and point out if it ok.

    is it ok if i share here?
    Last edited by tomalex0; 6 Feb 2011 at 11:10 PM. Reason: added suggestions

  3. #123
    Sencha User
    Join Date
    Dec 2010
    Posts
    69
    Vote Rating
    0
    irocker is on a distinguished road

      0  

    Default


    Hi Mitchell,

    One thing I noticed with the paging is that when you click a column to sort, it only sorts within the current page, it doesn't re-sort the whole store and then show only the selected page. That makes sorting not very useful with multi paging.

    Is there a way to pass sort parameters to the proxy (say as URL parameters) so that the correct records could be selected on the back end?

  4. #124
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Horizontal scrolling, if you can do it with a Panel and DataView, I wouldn't see why it wouldn't work. Haven't tested or anything.

    About sorting, try enabling remote sort on the Store. When you click on the header to sort, it executes the Store's sort function so if you have remote sort working, it should send a request.
    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. #125
    Sencha User
    Join Date
    Dec 2010
    Posts
    69
    Vote Rating
    0
    irocker is on a distinguished road

      0  

    Default


    Hi Mitchell!

    OK, the only issue I'm having at this point is that the header and body column widths don't seem to line up with each other when the columns resize. The header row always expands to fit the text in the header, while the body text may not be as wide so its column remains narrower, and vice versa. The only way to make them line up is if I pull up the grid in Chrome and expand the width out until all the columns can be accommodated. That will never happen on a phone.

    And speaking of which... can you kindly give an example of how to get the grid to work with horizontal scrolling? I'm still struggling to understand Sencha layouts. I set a specific width and height on the parent container (in this case, one tab of a tabpanel) and nothing happens - all I see is the row headers.

  6. #126
    Sencha User
    Join Date
    Dec 2010
    Posts
    69
    Vote Rating
    0
    irocker is on a distinguished road

      0  

    Default


    Also... currently if there's a zero value in a numeric cell, the cell shows up as blank. Is there any way to display it as 0 instead of blank?

  7. #127
    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 Tried Recreating grid with thead, tbody

    Tried Recreating grid with thead, tbody


    Hi mitchel,

    This what i have tried to do

    Code:
    Ext.ns("Ext.ux");
    Ext.ux.Touchviewgrid =  Ext.extend(Ext.Panel,{
        layout:'fit',
        scroll:'both',
        hideHeaders : false,
        initComponent : function(){
        var colModel  = this.colModel;
        var tpl = '<div class="x-grid-container">';
        
        if(!this.hideHeaders){
            tpl +='<div class="x-grid-head"><table  width="100%" >';
            tpl += '<thead><tr class="x-grid-header" >';
            for (var i = 0; i < colModel.length; i++) {
            var col = colModel[i];
            var width = (Ext.isDefined(col.width)) ? ("width ="+(col.width-4)+"%") : '';
            tpl += '<th class="x-grid-cell" '+width+'>' + col.header + '</th>';
            }
            tpl += '</tr></thead>';
           // tpl  +='</table></div>'
        }
        
        
        //tpl +='<div class="x-grid-bd"><table  width="100%" >';
        tpl += '<tbody ><tpl for="."><tr class="x-grid-row">';
        for (var i = 0; i < colModel.length; i++) {
            var col = colModel[i];
            var width = (Ext.isDefined(col.width)) ? ("width ="+col.width+"%") : '';
            tpl += '<td class="x-grid-cell" '+width+' style="'+col.style+'"   >{' + col.mapping + '}</td>';
        }
        tpl += '</tr></tpl></tbody>';
        
        tpl += '</table></div>'
        console.log(tpl);
            this.gridview = {
                    xtype:'dataview',
                    scroll:this.scroll,
                    itemSelector : 'tr.x-grid-row',
                    tpl:new Ext.XTemplate(tpl),
                    store:this.store
            };
        
            this.items = [this.gridview]
            Ext.ux.Touchviewgrid.superclass.initComponent.apply(this, arguments);
        }
    
    });
    
    Ext.reg('touchviewgrid',Ext.ux.Touchviewgrid);
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
           
        Ext.regModel("TestModel", {
                fields     : [
                    "company",
                    "price",
                    "change",
                    "pct",
                    "updated"
                ]
            });
            var store = new Ext.data.Store({
                model : "TestModel",
                data  : [
                    { company : "3m Co",                               price : 71.72, change : 0.02,  pct : 0.03,  updated : "9/1/2010" },
                    { company : "Alcoa Inc",                           price : 29.01, change : 0.42,  pct : 1.47,  updated : "9/1/2010" },
                    { company : "Altria Group Inc",                    price : 83.81, change : 0.28,  pct : 0.34,  updated : "9/1/2010" },
                    { company : "American Express Company",            price : 52.55, change : 0.01,  pct : 0.02,  updated : "9/1/2010" },
                    { company : "American International Group, Inc.",  price : 64.13, change : 0.31,  pct : 0.49,  updated : "9/1/2010" },
                    { company : "AT&#38;T Inc.",                       price : 31.61, change : -0.48, pct : -1.54, updated : "9/1/2010" },
                    { company : "Boeing Co.",                          price : 75.43, change : 0.53,  pct : 0.71,  updated : "9/1/2010" },
                    { company : "Caterpillar Inc.",                    price : 67.27, change : 0.92,  pct : 1.39,  updated : "9/1/2010" },
                    { company : "Citigroup, Inc.",                     price : 49.37, change : 0.02,  pct : 0.04,  updated : "9/1/2010" },
                    { company : "E.I. du Pont de Nemours and Company", price : 40.48, change : 0.51,  pct : 1.28,  updated : "9/1/2010" },
                    { company : "Exxon Mobil Corp",                    price : 68.1,  change : -0.43, pct : -0.64, updated : "9/1/2010" },
                    { company : "General Electric Company",            price : 34.14, change : -0.08, pct : -0.23, updated : "9/1/2010" },
                    { company : "General Motors Corporation",          price : 30.27, change : 1.09,  pct : 3.74,  updated : "9/1/2010" },
                    { company : "Hewlett-Packard Co.",                 price : 36.53, change : -0.03, pct : -0.08, updated : "9/1/2010" }
                ]
            });
            var grid = new Ext.ux.Touchviewgrid({
                //fullscreen  : true,
                store       : store,
                cls:'x-grid-cls',
                multiSelect : false,
                scroll:'horizontal',
                layoutOnOrientationChange:true,
                monitorOrientation :true,
                layout:{
                    type:'vbox',
                    align:'stretch',
                    pack:'center'
                },
                colModel    : [{
                    header   : "Company",
                    mapping  : "company",
                    flex     : 1,
                    //width :30,
                    style:'text-overflow: ellipsis-word;'
                },{
                    header   : "Price",
                    mapping  : "price",
                    //width :30,
                    style    : "text-align: center;"
                },{
                    header   : "Change",
                    mapping  : "change",
                    //width :10,
                    cls      : "centered-cell"
                },{
                    header   : "%",
                    mapping  : "pct",
                    //width :30,
                    cls      : "centered-cell"
                },{
                    header   : "Last",
                    mapping  : "updated",
                    //width :30,
                    style    : "text-align: right;"
                },{
                    header   : "Last",
                    mapping  : "updated",
                    //width :30,
                    style    : "text-align: right;"
                },{
                    header   : "Last",
                    mapping  : "updated",
                    //width :30,
                    style    : "text-align: right;"
                },{
                    header   : "Last",
                    //width :30,
                    mapping  : "updated",
                    style    : "text-align: right;"
                }]
            });
            
            new Ext.Panel({
            fullscreen:true,
            scroll:'vertical',
            items:[{
                xtype:'form',
                items:[{
                xtype: 'fieldset',
                title: 'Favorite color',
                defaults: { xtype: 'radiofield' },
                items: [
                    { name : 'color', label: 'Red', value : 'red' },
                    { name : 'color', label: 'Blue' , value : 'blue'},
                    { name : 'color', label: 'Green' , checked : true, value : 'green'},
                    { name : 'color', label: 'Purple' , value : 'purple'}
                ]
                }]
            },{
                xtype: 'fieldset',
                cls:'gridcls',
                title: 'Grid',
                items:[grid]
            }]
            });
        
        }
    });

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Sencha Touch GridPanel</title>
            
            <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
            
            
            <script type="text/javascript" src="../../sencha-touch.js"></script>
            
            
            <script type="text/javascript" src="tbodygrid.js"></script>
            <style type="text/css">
                
                .x-grid-header{
                background-image: -webkit-gradient(linear,0% 0,0% 100%,color-stop(0%,#7C9BC0),color-stop(2%,#466890),color-stop(100%,#293E56));
                color:white;
                text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;
                font-size: 1em;
                padding: 0 .4em;
                
                }
                .x-grid-header th{
                font-weight: bold;
                height: 2.3em;
                padding: 0 .4em;
                text-align:center;
                border-left: 1px solid black;
                border-right: 1px solid black;
                
                }
               
                .x-grid-row td{
                vertical-align:top;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                padding: 0 .4em;
                }
                .x-grid-row:nth-child(odd){
                background-color: #F0F0F0;
                }
                .x-grid-row:nth-child(even){
                background-color: white;
                }
                .x-grid-cell{
                vertical-align: middle;
                line-height: 2em;
                font-size: 1em;
                border-left: 1px solid black;
                border-right: 1px solid black;
                }
                .x-item-selected {
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #7FB6E7), color-stop(2%, #2986D6), color-stop(100%, #1D5E96));
                background-image: linear-gradient(top, #7FB6E7 0%, #2986D6 2%, #1D5E96 100%);
                color: white;
                border-color: #103656;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
                }
                .gridcls .x-panel-body{
                padding: 10px;
                border :none;
                -webkit-box-shadow:none;
                }
                .x-grid-cls .x-panel-body{
                padding: 0px;
                border: 1px solid #DDD;
                }
                .x-form-fieldset .x-grid-header th:first-child{
                -webkit-border-top-left-radius:0.4em 0.4em;
                border-top-left-radius: 0.4em 0.4em;
                border-left:none;
                }
                .x-form-fieldset .x-grid-header th:last-child{
                -webkit-border-top-right-radius: 0.4em 0.4em;
                border-top-right-radius: 0.4em 0.4em;
                border-right:none;
                }
                tbody { scroll: auto; }
            </style>
        </head>
        <body>
        </body>
    </html>

    I tried running scroller in console and was able to provide a scrolling effect but not working properly.

    Code:
    new Ext.util.Scroller(Ext.getDom(Ext.DomQuery.select("tbody"))[0], {  			direction:'vertical', 			listeners : { 				scope       : this, 				scrollstart : function(){                                     console.log("start");                                 }, 				scrollend   : function(){                                     console.log("end");                                 } 			} 		});

  8. #128
    Sencha User
    Join Date
    Jan 2011
    Posts
    59
    Vote Rating
    0
    Nicodemuz is on a distinguished road

      0  

    Default


    Hi,

    It seems like the renderer() function does not work with the new release. Is there some other way to achieve the same result?

    Cheers!

  9. #129
    Sencha User
    Join Date
    Jun 2008
    Posts
    5
    Vote Rating
    0
    acslater is on a distinguished road

      0  

    Default


    This issue was solved. Similar to a poster earlier in this thread, I had to remove the layout:'fit' to get it to display the entire grid.

    The TouchGridPanel is exactly what I need. Thanks for creating this extension. I am having problems getting the store loaded into my grid, however. I can see the column headings but no data rows. I am attempting to include a TouchGridPanel in a TabPanel. Here is what I have for my TouchGridPanel . Am I missing something?

    Code:
    Ext.regModel("TouchGridPanel",{
                fields: [
                    "restaurant",
                    "power"
                ]
            });
        
            var touchGridPanelStore = new Ext.data.Store({
                model : 'TouchGridPanel',
                autoLoad: true,
                data  : [
                    { restaurant : 'Wal-Mart Stores Inc.',power : '23'}
                ]
            });
            
            var gridPanel = new Ext.ux.TouchGridPanel({
                id: 'gridPanel',
                layout: 'fit',
                store       : touchGridPanelStore,
                colModel    : [{
                    header   : 'Restaurant',
                    mapping  : 'restaurant'
                },{
                    header   : 'Power',
                    mapping  : 'power',
                    style    : 'text-align: center;'
                }]
            });
    Last edited by acslater; 10 Feb 2011 at 11:58 AM. Reason: Solved

  10. #130
    Sencha User
    Join Date
    Jan 2011
    Posts
    59
    Vote Rating
    0
    Nicodemuz is on a distinguished road

      0  

    Default


    Quote Originally Posted by acslater View Post
    This issue was solved. Similar to a poster earlier in this thread, I had to remove the layout:'fit' to get it to display the entire grid.

    The TouchGridPanel is exactly what I need. Thanks for creating this extension. I am having problems getting the store loaded into my grid, however. I can see the column headings but no data rows. I am attempting to include a TouchGridPanel in a TabPanel. Here is what I have for my TouchGridPanel . Am I missing something?

    Code:
    Ext.regModel("TouchGridPanel",{
                fields: [
                    "restaurant",
                    "power"
                ]
            });
        
            var touchGridPanelStore = new Ext.data.Store({
                model : 'TouchGridPanel',
                autoLoad: true,
                data  : [
                    { restaurant : 'Wal-Mart Stores Inc.',power : '23'}
                ]
            });
            
            var gridPanel = new Ext.ux.TouchGridPanel({
                id: 'gridPanel',
                layout: 'fit',
                store       : touchGridPanelStore,
                colModel    : [{
                    header   : 'Restaurant',
                    mapping  : 'restaurant'
                },{
                    header   : 'Power',
                    mapping  : 'power',
                    style    : 'text-align: center;'
                }]
            });
    Try to define "flex: 1" on your TouchGridPanel. This solved the issue for me.