CODEWITHSUNDEEP
javascriptextjs
michael
michael

Reputation: 91

Delete row from EditorGridPanel in Ext JS 2.0.2

I am new to Ext JS and I need to update an old app. The EditorGridPanel has an 'ADD' button and it works fine. However, I need to add a 'DELETE' button that deletes the row from the grid. Here is the code to the grid. Thanks for your help.

 /*==== INVOICE DATA START =======================================================*/
    var iLineItemCM = new Ext.grid.ColumnModel([
         {id:'i_line_item_name', header: "Line Item Name", dataIndex:     'i_line_item_name', width: 280,
           editor: new Ext.form.TextField({allowBlank: false})}
        ,{header: "Amount", dataIndex: 'i_line_item_amt', width: 80, align: 'right', renderer: 'usMoney',
         editor: new Ext.form.NumberField({
               allowBlank: false,
               allowNegative: false,
               maxValue: 100000
           })}
        ]);

    var iLineItemRec =
        new Ext.data.Record.create([
            {name: 'i_line_item_name'    ,mapping: 'i_line_item_name'  ,type: 'string'}
           ,{name: 'i_line_item_amt'     ,mapping: 'i_line_item_amt'   ,type: 'string'}
         ]);

    var iLineItemStore = new Ext.data.Store({
        url: '',
        reader: new Ext.data.JsonReader({
               root: 'rows'
         },
           iLineItemRec
        )
    });

    var iLineItemGrid = new Ext.grid.EditorGridPanel({
        store: iLineItemStore,
        cm: iLineItemCM,
        width: 'auto',
        height: 'auto',
        //title:'Edit Plants?',
        frame:false,
        //plugins:checkColumn,
        clicksToEdit:1,
        viewConfig: {
            //forceFit: true,
            autoFit:true
      },
      id: 'iLineItemStore',
        tbar: [{
            text: 'Add Line Item',
            handler : function(){
               var r = new iLineItemRec({
                   i_line_item_name: '',
                    i_line_item_amt: ''
               });
                iLineItemGrid.stopEditing();
               iLineItemStore.insert(0, r);
               iLineItemGrid.startEditing(0, 0);
          }
      }]
    });

 ///////////////////

Upvotes: 1

Views: 743

Answers (1)

Alex
Alex

Reputation: 5724

From the docs for Cell Selection Model: http://docs.sencha.com/ext-js/2-3/#!/api/Ext.grid.CellSelectionModel

The cell model is specified as default.

getSelectedCell( ) : Array
Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).

So... something like 

 { text: 'Remove', 
  tooltip:'Remove the selected item',
  handler: function(){ 
  iLineItemGrid.stopEditing();
  var r = iLineItemGrid.getSelectionModel().getSelectedCell();
  iLineItemStore.removeAt(r[1]); } }

Upvotes: 1

Related Questions