Results 1 to 4 of 4

Thread: MFS: Add DELETE BUTTON in Editable Grid

  1. #1
    Ext User
    Join Date
    Jan 2011
    Vote Rating

    Question MFS: Add DELETE BUTTON in Editable Grid

    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

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Vote Rating


          { 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 ?

  3. #3
    Ext User
    Join Date
    Jan 2011
    Vote Rating


    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{
    // 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{
    // 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

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Vote Rating


    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 :-)

Similar Threads

  1. How to delete a row in an editable grid?
    By rossl58 in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 13 Mar 2011, 8:31 PM
  2. Add a delete button in each row of an data grid
    By marcus.schiesser in forum Ext 3.x: User Extensions and Plugins
    Replies: 2
    Last Post: 14 Jun 2009, 8:04 AM
  3. How to add a button in an editable grid
    By zinzin in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 13 May 2009, 3:30 AM
  4. [CLOSED] editable grid insert / delete row
    By marcopolo in forum Ext GWT: Bugs (1.x)
    Replies: 3
    Last Post: 25 Nov 2008, 11:21 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts