1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    31
    Vote Rating
    0
    ekhanh101 is on a distinguished road

      0  

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

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


    Hi,
    I have a grid, and on double click I want to remove the record,
    Code:
        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?

    Code:
        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?

  2. #2

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    31
    Vote Rating
    0
    ekhanh101 is on a distinguished road

      0  

    Default


    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?
    Code:
        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);
    
          }
        }
      });

  4. #4
    Sencha User Screamy's Avatar
    Join Date
    Jun 2008
    Posts
    244
    Vote Rating
    0
    Screamy is an unknown quantity at this point

      1  

    Default


    This works for me:

    Code:
    listeners: {
        rowdblclick: function(grid, rowIndex, evt) {
          var record = grid.store.getAt(rowIndex);
          grid.store.remove(record);
        }
    }
    What version of Ext are you using?

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    72
    Vote Rating
    0
    JanVenekamp is on a distinguished road

      0  

    Default


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

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    31
    Vote Rating
    0
    ekhanh101 is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User Screamy's Avatar
    Join Date
    Jun 2008
    Posts
    244
    Vote Rating
    0
    Screamy is an unknown quantity at this point

      0  

    Default


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

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

  8. #8
    Ext User
    Join Date
    Dec 2008
    Posts
    31
    Vote Rating
    0
    ekhanh101 is on a distinguished road

      0  

    Default


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


    default.html:
    Code:
    <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:

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

    Code:
    {"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.

  9. #9
    Ext User
    Join Date
    Dec 2008
    Posts
    31
    Vote Rating
    0
    ekhanh101 is on a distinguished road

      0  

    Default


    looks like if i do this:
    Code:
        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.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    How about:
    Code:
    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.

Similar Threads

  1. the method Store.removeAll(); doesn't work
    By flamant in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 30 Oct 2010, 4:43 AM
  2. Replies: 4
    Last Post: 4 Jan 2010, 6:40 AM

Thread Participants: 3