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
    73
    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar