1. #1
    Ext User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    fawad surosh is on a distinguished road

      0  

    Question MFS: Add DELETE BUTTON in Editable Grid

    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.

    Thanks,
    Fawad Surosh

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    157
    Vote Rating
    0
    valititi is on a distinguished road

      0  

    Default


    Code:
    yourColModelModel=function(f,s){
      yourColumns=[
          { dataIndex:'idField',  header:'TheIdHeader'  },
          { dataIndex:'aName', header:'TheNameHeader', /*width_auto*/  id:'aName'  /*auto-width-in grid*/  },
          {
             items:[
               {
                  handler:function(paysGrid,rowIndex{
                     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 !
                  },
                  icon:'images/dele.png',
                  tooltip:'Delete this Record'
                }
             ],
           xtype:'actioncolumn'
        }
      ];
      return new Ext.grid.ColumnModel({
            columns:yourColumns.slice(s||0,f),
            defaults:{sortable:true}
        });
    };
    may this help ?

  3. #3
    Ext User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    fawad surosh is on a distinguished road

      0  

    Default


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

    Ext.onReady(function(){
    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',
    iconCls:'add',
    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
    });
    grid.stopEditing();
    store.insert(0, p);
    grid.startEditing(0, 0);}
    }, '-',{
    text:'Remove',
    tooltip:'Remove attribute',
    iconCls:'silk-table_delete',
    handler:function()
    {
    {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
    grid.on('render',function(){
    // 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();
    if(sm.hasSelection()){
    store.remove(sm.getSelected());
    }
    },
    scope : this
    });
    },grid);
    }})
    }}
    }
    ]
    });
    // manually trigger the data store load
    store.load({
    // store loading is asynchronous, use a load listener or callback to handle results
    callback: function(){
    Ext.Msg.show({
    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
    Posts
    157
    Vote Rating
    0
    valititi is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

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