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?
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?
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 }; } });
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
Hi Dlogic,
Sorry, apparently my train of thought got derailed there.
So a skeleton of a grid would look like this.
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.Code:{ xtype:'buttonlist', height:500, width:500, columns:[ { buttonName:'myTestButton', buttonCls:'mybuttonclass', ui:'action', iconMask:true, iconCls:'user' }, { dataIndex:'dataField', header:'Some Header' } }
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
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
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 @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
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
The grid has to calculate the width so flex on the column simply won't work.
Mitchell Simoens @LikelyMitch
Modus Create, Senior Frontend Engineer
________________
Need any sort of Ext JS help? Modus Create is here to help!
Check out my GitHub:
https://github.com/mitchellsimoens
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 }, } });
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.
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: [ { title: 'Produtos', iconCls: 'action', items: [ { xtype: 'container', items: [ { xtype: 'titleBarDefaut', title: 'Pedido' }, // titlebar { xtype: 'gridView' } ] } ] } ] } });
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