1. #261
    Sencha User
    Join Date
    May 2013
    Posts
    7
    Vote Rating
    0
    dlogic is on a distinguished road

      0  

    Default Action Column

    Action Column


    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?

  2. #262
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default


    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

    Code:
    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
            };
        }
    
    
    
    
    });

  3. #263
    Sencha User
    Join Date
    May 2013
    Posts
    7
    Vote Rating
    0
    dlogic is on a distinguished road

      0  

    Default


    Quote Originally Posted by badgerb1 View Post
    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

  4. #264
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Post


    Hi Dlogic,

    Sorry, apparently my train of thought got derailed there.

    So a skeleton of a grid would look like this.

    Code:
    {
        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

  5. #265
    Sencha User
    Join Date
    Jun 2013
    Posts
    11
    Vote Rating
    0
    sindhu.singh is on a distinguished road

      0  

    Default Need Editable Grid Example In Sencha Touch 2

    Need Editable Grid Example In Sencha Touch 2


    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

  6. #266
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Vote Rating
    833
    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


    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.
    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. #267
    Sencha User
    Join Date
    Aug 2011
    Posts
    10
    Vote Rating
    0
    raulm3 is on a distinguished road

      0  

    Default Horizontal Scrolling

    Horizontal Scrolling


    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

  8. #268
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Vote Rating
    833
    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


    The grid has to calculate the width so flex on the column simply won't 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.

  9. #269
    Sencha User
    Join Date
    May 2013
    Posts
    7
    Vote Rating
    0
    dlogic is on a distinguished road

      0  

    Default


    Quote Originally Posted by badgerb1 View Post
    Code:
    {
        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:

    Code:
    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
            },                  
        } 
    });

  10. #270
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default Data height problem with grid

    Data height problem with grid


    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.
    Code:
    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:
    Code:
    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
    Last edited by varois; 19 Jun 2013 at 9:02 AM. Reason: Fix some words

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