Ext.ux.touch.grid

[dlogic]

Anybody know if I can add a Action Column to each row? I want to add a edit and delete button for each row. I've seen this in Ext 4 but not for Sencha Touch 2.

Any ideas?

[badgerb1]

Here's an extension that we use to add buttons to the grid (we actually make it an override to provide the functionality to all grids).

It has 2 predefined buttons of "editButton" and "deleteButton" that will fire special events or it will fire a generic "itembuttontap" event.

When adding to your columns list just put a column in with an attribute of

column attributes that are supported for the button.
buttonName, buttonCls, ui, iconMask, iconCls

Ext.define("Ext.ux.touch.grid.ButtonsGrid", {
    extend:'Ext.ux.touch.grid.List',
    xtype:"buttonlist",


    initialize : function () {
        var me = this;


        me.callParent();


        me.on('itemtap', me._buttonTap, this, null, 'before');
        me.on('itemtouchstart', me._buttonStart, this, null, 'before');
        me.on('itemtouchend', me._buttonEnd, this, null, 'before');
    },


    _buttonTap:function( grid, index, target, record, e, eOpts ){
        var btn = e.getTarget('.x-button');
        if (btn){
            var btnName = btn.getAttribute('buttonName');
            if (btnName == "deletebtn"){
                this.fireEvent('itemdelete', grid, index, target, record, e, eOpts, btn.getAttribute('buttonName'));
            }else if (btnName == "editbtn"){
                this.fireEvent('itemedit', grid, index, target, record, e, eOpts, btn.getAttribute('buttonName'));
            }else {
                this.fireEvent('itembuttontap', grid, index, target, record, e, eOpts, btn.getAttribute('buttonName'));
            }
            return false;//stop the itemtap.
        }
    },


    _buttonStart:function( grid, index, target, record, e, eOpts ){
        var btn = e.getTarget('.x-button');
        if (btn){
            btn.classList.add('x-button-pressing')
        }
    },


    _buttonEnd:function( grid, index, target, record, e, eOpts ){
        var btn = e.getTarget('.x-button');
        if (btn){
            btn.classList.remove('x-button-pressing')
        }
    },
    renderers:{},


    _createButtonRenderer:function(buttonName, buttonCls, ui, iconMask, iconCls){
        if (!this.renderers[buttonName + buttonCls]){
            var button = new Ext.Button({
                    name:buttonName,
                    cls:[buttonName, buttonCls],
                    ui:ui,
                    iconMask: iconMask,
                    iconCls: iconCls
                }
            );
            button.element.dom.setAttribute('buttonName', buttonName);
            var retDom = button.element.dom.outerHTML;
            button.destroy();
            this.renderers[buttonName + buttonCls] = function(value, values){
                return retDom;
            };
        }
        return this.renderers[buttonName + buttonCls];
    },






    _buildTpl : function (columns, header) {
        var me = this,
            tpl = [],
            c = 0,
            cNum = columns.length,
            basePrefix = Ext.baseCSSPrefix,
            renderers = {},
            defaults = me.getDefaults() || {},
            rowCls = me.getRowCls(),
            column, hidden, css, styles, attributes, width, renderer, rendererName, innerText;


        for (; c < cNum; c++) {
            column = columns[c];
            hidden = column.hidden;


            if (hidden) {
                continue;
            }


            css = [basePrefix + 'grid-cell'];
            styles = [];
            attributes = ['dataindex="' + column.dataIndex + '"'];
            width = column.width || defaults.column_width;
            renderer = column[header ? 'headerRenderer' : 'renderer'] || this._defaultRenderer;
            rendererName = column.dataIndex + '_renderer';


            if (renderer == 'button'){
                var buttonName = column.buttonName;
                renderer = this._createButtonRenderer(buttonName, column.buttonCls, column.ui, column.iconMask, column.iconCls);
                rendererName = buttonName + '_renderer';
            }
            if (renderer == 'editbutton'){
                renderer = this._createButtonRenderer('editbtn', column.buttonCls || 'editbutton', column.ui, true, column.iconCls || 'doc_compose2');
                rendererName = 'editbutton_renderer';
            }
            if (renderer == 'deletebutton'){
                renderer = this._createButtonRenderer('deletebtn', column.buttonCls ||'deletebutton', column.ui, true, column.iconCls || 'delete');
                rendererName = 'deletebutton_renderer';
            }


            if (header) {
                css.push(basePrefix + 'grid-cell-hd');
                innerText = renderer.call(this, column.header);
            } else {
                innerText = '{[this.' + rendererName + '(values.' + column.dataIndex + ', values)]}';


                if (column.style) {
                    styles.push(column.style);
                }


                renderers[rendererName] = renderer;
            }


            if (column.cls) {
                css.push(column.cls);
            }


            if (width) {
                styles.push('width: ' + width + (Ext.isString(width) ? '' : 'px') + ';');
            }


            if (styles.length > 0) {
                attributes.push('style="' + styles.join(' ') + '"');
            }


            tpl.push('<div class="' + css.join(' ') + '" ' + attributes.join(' ') + '>' + innerText + '</div>');
        }


        tpl = tpl.join('');


        if (!header && (Ext.isFunction(rowCls) || Ext.isString(rowCls))) {
            renderers._getRowCls = Ext.bind(me.getRowCls, me);
            tpl = '<div class="' + basePrefix + 'grid-row {[this._getRowCls(values) || \'\']}">' + tpl + '</div>';
        }


        return {
            tpl       : tpl,
            renderers : renderers
        };
    }




});

[dlogic]

Here's an extension that we use to add buttons to the grid (we actually make it an override to provide the functionality to all grids).

Thanks, that looks perfect, I've added the extension to touch > src > grid and as a requires of my view but I'm struggling to get anything to show. Is there something missing at the end of this line: When adding to your columns list just put a column in with an attribute of

I'm pretty new to Sencha therefore apologies if I've missed something obvious.

Many Thanks,
Darren

[badgerb1]

Hi Dlogic,

Sorry, apparently my train of thought got derailed there.

So a skeleton of a grid would look like this.

{
    xtype:'buttonlist',
height:500,
width:500,
    columns:[
        {
              buttonName:'myTestButton',
              buttonCls:'mybuttonclass',
              ui:'action',
              iconMask:true,
              iconCls:'user'
         }, 
         {
               dataIndex:'dataField',
               header:'Some Header'
          }
}

The attributes below are not strictly necessary but without them you will get a pretty plain button. They match up with the button config items in the Button class.
buttonCls:'mybuttonclass',
ui:'action',
iconMask:true,
iconCls:'user'

If you're not seeing any data, switch the xtype for the grid to a regular touchgridpanel and see if you see anything, if not, then you probably aren't either setting a height or putting the grid in a panel with a fit layout and a fixed size.

Other than that I'd have to troubleshoot the code.

Thanks
Bob

[sindhu.singh]

Hi please please help me to fix my problem. I Need Editable Grid in Sencha Touch 2 . Many members on the forum said that there is an example for this but no one gave the link for that Example. So Please provide me that link(Editable Grid in Sencha Touch 2) if any one know that link or other example for Editable Grid

[mitchellsimoens]

Look at the files, there is an editable.html file in the root directory that if you launch in a webserver it will show you cell editing.

[raulm3]

I'm trying to use your example with horizontal scrolling, but I want to have scroll if screen size is small and percentage or flex if is a tablet or PC.
this is my code:
layout : {
type : 'hbox'
}
.
.
.
width: Ext.os.is.Phone ? 80 : '10%'
But when I use flex or percentage the grid doesn't show data.

Ext.ux.touch.grid.png

[mitchellsimoens]

The grid has to calculate the width so flex on the column simply won't work.

[dlogic]

{
    xtype:'buttonlist',
height:500,
width:500,
    columns:[
        {
              buttonName:'myTestButton',
              buttonCls:'mybuttonclass',
              ui:'action',
              iconMask:true,
              iconCls:'user'
         }, 
         {
               dataIndex:'dataField',
               header:'Some Header'
          }
}

Hi Bob,

Sorry I'm still struggling (I think due to my lack of knowledge). My view is based on the MVC example supplied with the Grid extension and calls the data using a proxy. I'm not sure where to add the xtype for buttonlist. My code is:

Ext.define('PlayerAdmin.view.SessionDetails', {    extend: 'Ext.navigation.View',
    xtype:  'sessiondetails',
    requires: [
        'Ext.grid.List',
        'Ext.grid.ButtonsGrid',
        'Ext.grid.feature.Sorter'
    ],
    initialize: function() {


        // get the data object that hold the current active player        
        var dataObj             =  this.dataObj;        


        if (dataObj) {
            var playerName      =  dataObj.get('playerName'),
                playerId        =  dataObj.get('id'),
                sessionId       =  dataObj.get('sessionID'),                      
                visitID         =  dataObj.get('visitID'),
                tableType       =  dataObj.get('tableType');
        }; 


        // update top toolbar with correct title
        var mainToolbar = Ext.getCmp('mainToolbar');
        mainToolbar.setTitle('Session Details: '+playerName);


        // hide start session button
        Ext.getCmp('statSessionButton').hide();
        Ext.getCmp('clubName').hide(); 
        Ext.getCmp('backButton').show(); 


        // get panel ID to set mask       
        var panel           = Ext.getCmp('ext-viewport');




        var model = Ext.define('SessionDetails', {
            extend : 'Ext.data.Model',


            config : {
                fields : [
                    'type',
                    'amount',
                    'note',
                    'date',
                    'void',
                    'actions'
                ],
                proxy : {
                    type        : 'ajax',
                    url         : 'app/ajax/sessionDetailsAjax.php',
                    reader      : {
                        type           : 'coljson',
                        rootProperty   : 'data',
                        columnProperty : 'columns'
                    },
                    extraParams : {
                        sessionId:        sessionId,
                    }
                }
            }
        });        


        var store = Ext.create('Ext.data.Store', {
            autoLoad  : true,
            model     : model,
            pageSize  : 5,
            listeners : {
                load : function(store) {
                    var proxy   = store.getProxy(),
                        reader  = proxy.getReader();
                        //columns = reader.getColumns();


                    //grid.setColumns(columns);


                    var panel           = Ext.getCmp('ext-viewport');// get viewport
                    panel.unmask(); // remove loading mask  
                }
            }
        });


        var grid = Ext.create('Ext.grid.List', {
            fullscreen : true,
            width:          '100%',
            height:         '100%',
            store      : store,
            columns  : [
                {
                    header    : 'Type',
                    dataIndex : 'type',
                    style     : 'padding-left: 1em;',
                    width     : '16.6%',
                    filter    : { type : 'string' }
                },
                {
                    header    : 'Amount',
                    dataIndex : 'amount',
                    style     : 'text-align: center;',
                    width     : '16.6%',
                    filter    : { type : 'numeric' }
                },
                {
                    header    : 'Note',
                    dataIndex : 'note',
                    style     : 'text-align: center;',
                    width     : '16.6%',
                },
                {
                    header    : 'Date',
                    dataIndex : 'date',
                    style     : 'text-align: center;',
                    width     : '20%',
                },
                {
                    header    : 'Void',
                    dataIndex : 'void',
                    style     : 'text-align: center;',
                    sortable  : false,
                    width     : '10%'
                },


            ]            
        });




        this.add([grid]);   


    },
    config: {                        
        navigationBar: {
            hidden: true
        },                  
    } 
});

[varois]

Hello guys,

I am trying to use this ux grid on my app, and i am having a problem to add the grid into a form.Panel or any other container.
If i add the grid, direct to a tabContainer it works, but if i try to add some container, to have more components, with the grid, i am able to see only the header of the grid.

this is the code that show only the header of the grid.

Ext.define("AtakMobile.VendasExterna.view.PedidoView", {
    extend: 'Ext.tab.Panel',
    xtype: 'pedidoView',


    requires: [
        'AtakMobile.VendasExterna.view.GridView',
    ],


    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                title: 'Produtos',
                iconCls: 'action',


                items: [
                    { xtype: 'container',
                        items: [
                            { xtype: 'titleBarDefaut', title: 'Pedido' }, // titlebar
                            { xtype: 'gridView' }
                        ]
                    }
                ]
            }
        ]
    }
});

This the cde that works, show the grid normal:

Ext.define("AtakMobile.VendasExterna.view.PedidoView", {
    extend: 'Ext.tab.Panel',
    xtype: 'pedidoView',


    requires: [
        'AtakMobile.VendasExterna.view.GridView',
    ],


    config: {
        tabBarPosition: 'bottom',
        items: [
                         { xtype: 'gridView' }
        ]
    }
});

I just want to have some textfields above the grid, to insert data into the grid, in the same View. How can i do it?

PS: If i add height: 250px; to the <div class="x-dock-body" id="ext-element-107" style=" height: 250px;"> i can see the data. Are there any way to define the height of the grid dynamically, based on ownerCt?

Thanks a lot for any help