store.remove(rec) doesn't refresh, but store.removeAll() does?

[ekhanh101]

Hi,
I have a grid, and on double click I want to remove the record,

    listeners: {
      rowdblclick: function(g, index, ev) {
        var rec = g.store.getAt(index);
        g.store.remove(rec);
        // g.store.removeAll(); -- this does do remove all.

      }

when I double click, the remove event is fired from the store, but the grid never refreshes.

if i do,

g.store.removeAll();

the grid does remove all records and refreshes


debugging the grid, in FireBug,
when i do Ext.getCmp('myGrid').getStore()

i notice the store object doesn't have idProperty, even though, the reader has it idProperty set.
why would idProperty be missing?

    var readerSchoolPrograms = new Ext.data.JsonReader({
      totalProperty: 'total',
      successProperty: 'success',
      idProperty: 'ProgramID',
      root: 'data',
      messageProperty: 'message'  // <-- New "messageProperty" meta-data
    },
   [
    { name: 'ProgramID' },
    { name: 'ProgramName' }
]);


    var storeSchoolPrograms = new Ext.data.Store({
      id: 'storeSchoolPrograms',
      proxy: new Ext.data.HttpProxy({ url: 'ws_lms.aspx?op=GetSchoolPrograms' }),
      },
      autoLoad: true,
      reader: readerSchoolPrograms
    });

What am I missing?

[JanVenekamp]

http://dev.sencha.com/deploy/dev/doc...member=refresh ?

[ekhanh101]

more info,
when I do Ext.getCmp('myGrid').getStore().removeAt(0)
the Store's remove event is fired ( I put in alert('removed'); on the Store's remove listener, but the record doesn't seem to be removing.
Any thoughts?

    var readerSchoolPrograms = new Ext.data.JsonReader({      
      totalProperty: 'total',
      successProperty: 'success',
      root: 'data',
      idProperty: 'ProgramID',
      messageProperty: 'message'  // <-- New "messageProperty" meta-data
     },
      [
        { name: 'ProgramID' },
        { name: 'ProgramName' },
        { name: 'ProgramCode' }
      ]
   );

   var storeSchoolPrograms = new Ext.data.Store({
   id: 'storeSchoolPrograms',
    proxy: new Ext.data.HttpProxy({ url: 'ws_lms.aspx?op=GetCampusPrograms' }),
     baseParams: {
       CampusID: campusID,
       SchoolID: schoolID,
       mode: 'avail'
     },
     pruneModifiedRecords: true,
     autoLoad: true,
     listeners: {
       beforeLoad: function() {
         Ext.MessageBox.wait('Loading Data. Please wait...');
       },
       load: function() {
         Ext.MessageBox.hide();
       }
     },
     remove: function() {
       alert('item removed');
     },
     reader: readerSchoolPrograms
   });

  var gridSchoolPrograms = new Ext.grid.GridPanel({ // new Ext.ux.maximgb.tg.GridPanel({
    id: 'gridSchoolPrograms',
    loadMask: true,
    layout: 'fit',
    width: 200,
    autoHeight: true,
    forceFit: true,
    store: storeSchoolPrograms,
    sm: new Ext.grid.RowSelectionModel(),
    columns: CampusProgramsColumns,
    enableColumnResize: false,
    stripeRows: true,
    title: "Available School Programs",
    viewConfig: {
      forceFit: true,
      scrollOffset: 0,
      emptyText: 'No rows to display'
    },
    listeners: {
      rowdblclick: function(g, index, ev) {
        var rec = g.store.getAt(index);        
        g.store.removeAt(index);
        //g.store.removeAll();

        //Ext.getCmp('gridSchoolPrograms').getStore().remove(rec);
        Ext.getCmp('gridCampusPrograms').getStore().add(rec);

      }
    }
  });

[Screamy]

This works for me:

listeners: {
    rowdblclick: function(grid, rowIndex, evt) {
      var record = grid.store.getAt(rowIndex);
      grid.store.remove(record);
    }
}

What version of Ext are you using?

[JanVenekamp]

My prev post didn't made it so again:
See Ext.grid.GridView.refresh();

[ekhanh101]

I'm using 3.3.1,
it looks like the store it self is not removing the record, when i trace in firebug.

The remove event fires,
but the getStore().data.length is never changed.
when i do getStore().removeAll(), i see the changes, and the getStore().data.length = 0

i think it has something to do with the idProperty
the data retrieves and display fine, just can't seem to remove.

[Screamy]

As an alternative, try using a JsonStore and see if you get the same results.

var storeSchoolPrograms = new Ext.data.JsonStore({
  autoLoad: true,
  fields: ['ProgramID', 'ProgramName'],
  idProperty: 'PropgramID',
  root: 'data',
  totalProperty: 'total',
  url: 'ws_lms.aspx?op=GetSchoolPrograms'
});

[ekhanh101]

converting to JsonStore didn't work.
I've reduced the code below.


default.html:

<html>
<head>

   <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext/resources/css/ext-all.css" />

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="http://dev.sencha.com/deploy/ext/adapter/ext/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="http://dev.sencha.com/deploy/ext/ext-all.js"></script>

  <script src="CampusPrograms.js" type="text/javascript"></script>


  <script type="text/javascript"  language="javascript">
    var campusID = "1";
    var schoolID = "1";

    Ext.onReady(function() {
      createCampusPrograms();
    });
  </script>
  <script src="Scripts/CampusPrograms.js" type="text/javascript"></script>
</head>
    <body>
        <div id="grid-SchoolPrograms" width="300px"></div>
        <br/>

        <div id="grid-CampusPrograms" width="300px"></div>
    </body>
</html>

CampusPrograms.js:

function createCampusPrograms() {


  var readerCampusPrograms = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'ProgramID',
    root: 'data',
    messageProperty: 'message'  // <-- New "messageProperty" meta-data
    },
    [
    { name: 'ProgramID' },
    { name: 'ProgramName' },
    { name: 'ProgramCode' },
    { name: 'LMSProgramCode' },
    { name: 'AreaName' },
    { name: 'CareerType' }
    ]
   );

    var readerSchoolPrograms = new Ext.data.JsonReader({      
      totalProperty: 'total',
      successProperty: 'success',
      root: 'data',
      idProperty: 'ProgramID',
      messageProperty: 'message'  // <-- New "messageProperty" meta-data
     },
      [
        { name: 'ProgramID' },
        { name: 'ProgramName' },
        { name: 'ProgramCode' }
      ]
   );

   var storeSchoolPrograms = new Ext.data.Store({
   id: 'storeSchoolPrograms',
    proxy: new Ext.data.HttpProxy({ url: 'programs.asp' }),
     baseParams: {
       CampusID: campusID,
       SchoolID: schoolID,
       mode: 'avail'
     },
     pruneModifiedRecords: true,
     autoLoad: true,
     listeners: {
       beforeLoad: function() {
         Ext.MessageBox.wait('Loading Data. Please wait...');
       },
       load: function() {
         Ext.MessageBox.hide();
       }
     },
     remove: function() {
       alert('item removed');
     },
     reader: readerSchoolPrograms
   });

    var storeCampusPrograms = new Ext.data.Store({
      id: 'storeCampusPrograms',
      proxy: new Ext.data.HttpProxy({ url: 'programs2.asp' }),
      baseParams: {
        CampusID: campusID
      },
      autoLoad: true,
      listeners: {
        beforeLoad: function() {
          Ext.MessageBox.wait('Loading Data. Please wait...');
        },
        load: function() {
          Ext.MessageBox.hide();
        },
        update: function() {
        }
      },
      remove: function() {
        alert('removed');
      },
      exception: function() {
      },

      reader: readerCampusPrograms
    });


    var CampusProgramsColumns = [
    { header: "ID", width: 50, sortable: true, dataIndex: 'ProgramID' },
    { header: "Program Name", width: 150, sortable: true, dataIndex: 'ProgramName' },
    { header: "Code", width: 50, sortable: true, dataIndex: 'ProgramCode' },
    { header: "", width: 5, align: 'right', dataIndex: '' }
];



  var gridCampusPrograms = new Ext.grid.GridPanel({ 
    id: 'gridCampusPrograms',
    loadMask: true,
    layout: 'fit',
    autoHeight: true,
    width:200,
    forceFit: true,
    store: storeCampusPrograms,
    columns: CampusProgramsColumns,
    enableColumnResize: false,
    stripeRows: true,
    title: "Campus Programs",
    viewConfig: {
      forceFit: false,
      scrollOffset: 0,
      emptyText: 'No rows to display'
    }
  });

  var gridSchoolPrograms = new Ext.grid.GridPanel({ 
    id: 'gridSchoolPrograms',
    loadMask: true,
    layout: 'fit',
    width: 200,
    autoHeight: true,
    forceFit: true,
    store: storeSchoolPrograms,
    sm: new Ext.grid.RowSelectionModel(),
    columns: CampusProgramsColumns,
    enableColumnResize: false,
    stripeRows: true,
    title: "Available School Programs",
    viewConfig: {
      forceFit: true,
      scrollOffset: 0,
      emptyText: 'No rows to display'
    },
    listeners: {
      rowdblclick: function(g, index, ev) {
        var rec = g.store.getAt(index);        
        g.store.removeAt(index);
        //g.store.removeAll(); -- this works

        //Ext.getCmp('gridSchoolPrograms').getStore().remove(rec);
        Ext.getCmp('gridCampusPrograms').getStore().add(rec);

      }
    }
  });

  gridSchoolPrograms.getStore().load();
  document.getElementById('grid-SchoolPrograms').innerHTML = "";
  gridSchoolPrograms.render('grid-SchoolPrograms');

  gridCampusPrograms.getStore().load();
  document.getElementById('grid-CampusPrograms').innerHTML = "";
  gridCampusPrograms.render('grid-CampusPrograms');



}

programs.asp:

{"success":"true","total":"6","data":[{"SchoolName":"NHI","ProgramID":"3","SchoolID":"5","ProgramName":"Massage  3","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT3","CampusID":"115","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":3},{"SchoolName":"NHI","ProgramID":"4","SchoolID":"5","ProgramName":"Massage 4","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT4","CampusID":"116","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":4},{"SchoolName":"NHI","ProgramID":"5","SchoolID":"5","ProgramName":"Massage 5","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT5","CampusID":"117","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":5},{"SchoolName":"NHI","ProgramID":"2","SchoolID":"5","ProgramName":"Massage Therapy 2","DegreeTypeID":null,"isActive":null,"ProgramCode":"MT2","CampusID":"114","LMSProgramCode":"MT","AreaID":"1","CareerTypeID":null,"AreaName":"Art & Design","CareerType":"Animation","_id":2},{"SchoolName":"NHI","ProgramID":"7","SchoolID":"5","ProgramName":"Program 3","DegreeTypeID":null,"isActive":null,"ProgramCode":"P3","CampusID":"","LMSProgramCode":"P3","AreaID":"3","CareerTypeID":null,"AreaName":"Criminal Justice","CareerType":"Fine and Studio Art","_id":7},{"SchoolName":"NHI","ProgramID":"6","SchoolID":"5","ProgramName":"Program2","DegreeTypeID":null,"isActive":null,"ProgramCode":"P2","CampusID":"","LMSProgramCode":"P2","AreaID":"2","CareerTypeID":null,"AreaName":"Business","CareerType":"Fashion","_id":6}]}

I must be missing something simple.
All I want to do is move records from one grid to another.

[ekhanh101]

looks like if i do this:

    listeners: {
      rowdblclick: function(g, index, ev) {
        var rec = g.store.getAt(index);        
        g.store.data.removeAt(index);
        g.getView().refresh();

      }

it works, i didn't think i had to do getStore().data ?? and then refresh...
this doesn't sound correct.

[Condor]

How about:

listeners: {
  rowdblclick: {
    fn: function(grid, rowIndex, e) {
      var rec = grid.getStore().getAt(rowIndex);
      grid.getStore().remove(rec);
    },
    delay: 1
  }
}

(Haven't tested, but it could be that you can't remove a record from it's dblclick event)

Also, remove(rec) only works if the record ids are unique.