Ext.ux.TouchGridPanel v2.0b1

[mitchellsimoens]

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.

[tomalex0]

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?

[irocker]

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?

[mitchellsimoens]

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.

[irocker]

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.

[irocker]

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?

[tomalex0]

Hi mitchel,

This what i have tried to do

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]
        }]
        });
    
    }
});

<!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.

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");                                 } 			} 		});

[Nicodemuz]

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!

[acslater]

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?

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;'
            }]
        });

[Nicodemuz]

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?

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.