Results 1 to 6 of 6

Thread: Grid Panel + Store + delete + ExtJS 3.3.1

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    126

    Default Grid Panel + Store + delete + ExtJS 3.3.1

    Ext version tested:
    • Ext 3.3 rev 1

    Adapter used:
    • ext

    css used:
    • only default ext-all.css

    Browser versions tested against:
    • IE8
    • FF3 (firebug 1.3.0.10 installed)
    • Safari 4

    Operating System:
    • Windows Vista

    Description:
    • When deleting a row from the GridPanel, the deletion request is sent to the server and record is deleted from the DB too. The record first gets removed from grid, but then reappears after a sec.
      When I refresh the page, the record doesn't reappear in the grid, hence showing that the record was deleted from the server

    Test Case:
    Code:
      var appointmentGrid = new Ext.grid.GridPanel({
    						autoScroll : 'auto',
    						columns : gridColumns,
    						id : ExtId + 'appointmentGrid',
    						sm : selectionModel,
    						title : 'Appointments for the day',
    						renderTo : Ext.get('appointmentGridContainer'),
    						autoWidth : true,
    						height : 350,
    						trackMouseOver : true,
    						forceValidation : true,
    						store : appointmentGridStore,
    						margins : '0 5 5 5',
    						autoExpandColumn : 'patientName',
    						
    						viewConfig : {
    							forceFit : true,
    							markDirty : false
    						},
    										
    						listeners : {
    							'cellcontextmenu' : {
    								fn : createContextMenu
    							}
    						}
    					});
    
    var gridColumns = [{
    						dataIndex : 'patientName',
    						header : 'Name',
    						sortable : true,
    						hideable : false,
    									
    						autoExpandColumn : true
    					}, {
    						dataIndex : 'appointDate',
    						format : 'd-M-Y',
    						header : 'Date',
    						editable : true,
    						renderer : function(value, metaData, record, rowIndex,
    								colIndex, store) {
    							if (value)
    								return new Date(value).format('d-M-Y');
    						}
    
    					}, {
    						dataIndex : 'appointTime',
    						fixed : true,
    						header : 'Time',
    						editable : true,
    						
    					}]
    var selectionModel = new Ext.grid.RowSelectionModel({
    						singleSelect : true,
    						moveEditorOnEnter : false
    					});
    
    var createContextMenu = function(grid, rowIndex, cellIndex, event) {
    				event.stopEvent();
    				if (!this.gridContextMenu) {
    					this.gridContextMenu = new Ext.menu.Menu({
    								items : [{
    											text : 'Edit details',
    											
    										}, {
    											text : 'Cancel appointment',
    											handler : function() {
    												cancelAppointment(grid,
    														rowIndex, cellIndex,
    														event);
    											}
    										}]
    							});
    				}
    				var selModel = grid.getSelectionModel();
    				selModel.selectRow(rowIndex);
    				this.gridContextMenu.showAt(event.getXY());
    
    			}
    
    var cancelAppointment = function(grid, rowIndex, cellIndex, event) {
    				rec = grid.getSelectionModel().getSelected();
    				grid.getStore().remove(rec);
    				grid.getStore().save();
    				grid.getView().refresh();
    			}
    
    var appointmentProxy = new Ext.data.HttpProxy({
    						api : {
    							create : {
    								url : appointUrl,
    								method : 'POST'
    							},
    							update : {
    								url : appointUrl,
    								method : 'PUT'
    							},
    
    							destroy : {
    								url : appointUrl + '/delete',
    								method : 'PUT'
    							},
    							read : {
    								url : appointUrl,
    								method : 'GET'
    							}
    						}
    					});
    
    var appointFields = [{
    						name : 'patientName',
    						mapping : 'patientName',
    						type : 'string'
    					}, {
    						name : 'appointDate',
    						mapping : 'appointDate',
    						type : 'date',
    						dateFormat : 'U'
    					}, {
    						name : 'appointTime',
    						mapping : 'appointTime',
    						type : 'string'
    					}, {
    						name : 'patientPhone',
    						mapping : 'patientPhone',
    						type : 'long'
    					}]
    
    var appointmentGridStore = new Ext.data.JsonStore({
    						proxy : appointmentProxy,
    						batch : false,
    						totalProperty : 'total',
    						root : 'data',
    						pruneModifiedRecords : true,
    						successProperty : 'success',
    						idProperty : 'appointId',
    						fields : appointFields,
    						restful : false,
    						autoLoad : {
    							params : {
    								start : 0,
    								limit : 7
    							}
    						},
    						autoSave : false,
    						writer : new Ext.data.JsonWriter({
    									writeAllFields : true,
    									listful : true,
    									encodeDelete : true,
    									encode : false
    								})
    					});
    Steps to reproduce the problem:
    • remove a record from store associated with a grid

    The result that was expected:
    • Record should get removed from the grid

    The result that occurs instead:
    • Record gets removed from the grid, but then reappears again after a second or so.

    Debugging already done:
    • done. But could not find solution

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    126

    Default

    Ext Dev Team needed here please...

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    126

    Default

    BUMP

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    2

    Default

    I got the same problem here.

    Is any fix found by now?

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    126

    Default

    No not yet.. I've worked around the problem by reloading the store from the database..

  6. #6
    Sencha User
    Join Date
    Dec 2010
    Posts
    2

    Default

    It seems like using a successProperty for the store's reader & returning "true" from the destroy-Webmethod fixes the Problem.

    In my case (I'm working with .net here), setting
    Code:
    successProperty: 'd'
    helped.

    Try
    Code:
    Ext.util.Observable.capture(Ext.getCmp('id_my_grid'), console.info);
    where "id_my_grid" is the ID of your store using Firebug. Execute it after your store is loaded.

    For me this logged an exception (something about an error with the successProperty) when removing an item from the store. After the exception, an add action was executed. This add action was the reason for the reappearing of the entry.

Similar Threads

  1. Multiple delete records on one ajax request at RESTful grid & store
    By tayfun.ozis.erikan in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 25 Jul 2011, 8:37 PM
  2. Delete option not working fine in editor grid panel
    By sachin sachdeva in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 28 Dec 2010, 2:42 AM
  3. [MOVED] Please Implement Delete Key to delete items in addition to Delete Menu Item
    By markjlyon in forum Ext Designer: Help & Discussion
    Replies: 1
    Last Post: 11 May 2010, 7:48 AM
  4. add delete image to a column in grid panel
    By sajith in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 May 2008, 2:13 AM

Tags for this Thread

Posting Permissions

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