View Full Version : MFS: Add DELETE BUTTON in Editable Grid

fawad surosh
29 Jan 2011, 8:53 PM
Hello Everybody,
First of all, I am really thankful to Ext library whose has introduced very useful enhancements. since I am new to ext library, I have a problem whose answer would be very easy. my question is with Editable Grid: how to add a DELETE BUTTON to delete selected record from grid. waiting for a rapid reply.

Fawad Surosh

30 Jan 2011, 2:55 AM
{ dataIndex:'idField', header:'TheIdHeader' },
{ dataIndex:'aName', header:'TheNameHeader', /*width_auto*/ id:'aName' /*auto-width-in grid*/ },
yourFunctionForDelete((yourStore.getAt(rowIndex)).get('idField') );
// so, you made a function which will be an simple Ajax call
// for deleting the row from the server
// don't forget : on the success of callback to RELOAD YOUR grid !
tooltip:'Delete this Record'
return new Ext.grid.ColumnModel({

may this help ?

fawad surosh
30 Jan 2011, 3:31 AM
thanks for reply but I could not really get it since I am new to ext. this is my final code I have. can you please implement it into your system and reply.

File Name: grid_editable.js

function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
// shorthand alias
var fm = Ext.form;
// variable: short hand for delete button
//var itemDeleter = new Extensive.grid.ItemDeleter();

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in the data store (created below)
var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
columns: [{
id: 'Name',
header: 'Name',
dataIndex: 'Name',
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
}, {
header: 'Province',
dataIndex: 'Province',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'Province',
lazyRender: true,
listClass: 'x-combo-list-small'
}, {
header: 'Salary',
dataIndex: 'Salary',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
header: 'Join Date',
dataIndex: 'JoinDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not JoinDate on the weekends'
xtype: 'checkcolumn',
header: 'Married?',
dataIndex: 'Married',
width: 55
// create the Data Store
var store = new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
// load remote data using HTTP
//url: 'grid_editable.xml',
url: 'dbOpr.php',
// specify a XmlReader (coincides with the XML format of the returned data)

reader: new Ext.data.XmlReader({
// records will have a 'plant' tag
record: 'plant',
// use an Array of field definition objects to implicitly create a Record constructor
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'Name', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'Province'},
{name: 'Salary', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'Married', type: 'bool'}
sortInfo: {field:'Name', direction:'ASC'}
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
autoExpandColumn: 'Name', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
tooltip:'Add attribute',
handler : function(){
// access the Record constructor through the grid's store
var Plant = grid.getStore().recordType;
var p = new Plant({
Name: 'New Plant 1',
Province: 'SelectOne',
Salary: 0,
availDate: (new Date()).clearTime(),
Married: false
store.insert(0, p);
grid.startEditing(0, 0);}
}, '-',{
tooltip:'Remove attribute',
{Ext.MessageBox.confirm('Delete','Are you sure you want to delete this record', function(btn) {
if (btn == 'yes')
// After the grid is rendered, Map Del key to handler
// You can also use 'keys' grid conf option to add key map
new Ext.KeyMap(this.el, {
key: Ext.EventObject.DELETE,
handler: function(){
var store = this.getStore();
var sm = this.getSelectionModel();
scope : this
// manually trigger the data store load
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
title: 'Store Load Callback',
msg: 'store was loaded, data JoinDate for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK

30 Jan 2011, 3:36 AM
the idea is add a last column, on right side for example, and there call a function which take as parameter the row index...
this function is an ajax call to a remote file (which will have course as parameter the row index) and which will made the delete...
then, on the success event on this ajax call, you will reload the store.
honestly this is more easier than made the grid that you already made :-)