Store - remove last record in 'add' event the view didn't remove.

**jarlau** · 2 Jun 2010 5:42 PM

Hi all,
maybe I should not posted to Bug forum.
http://www.extjs.com/forum/showthrea...bar-refreshing
No one wanted to reply a CLOSED thread.

So I decided to repost in Help forum.

I'm trying to make a plugin that make the Store to hold a fixed no. of records(e.g. 10 records), when I add one new record, the last old record will be removed. So I have done something and do the task in store 'add' event as follows.

Code:

<html>
<head>
    <title>Test Grid</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
        }
    </style>
    <script type="text/javascript">
    Ext.ns('Ext.grid.plugins');
    Ext.grid.plugins.FixedRowNo = Ext.extend(Object, {
    	init: function(grid){
    		this.grid = grid;
    		grid.store.on('add', this.trimRow, this);
    	},
    	trimRow: function(store){
    		var showStore = function(s) {
    			for (var i = 0; i < s.getCount(); i++) {
    				var r = s.getAt(i);
    				console.log((i+1), r.get('company'));
    			};
    		}
    		showStore(store);
    		var max = this.grid.maxRow;//store.lastOptions.params.limit;
    		if (max) {
    			var count = store.getCount();
    			if (count > max) {
    				for (var i = count; i > max; i--) {
    					//store.removeAt(i-1);
    					var record = store.getAt(i-1);
    					store.remove(record);
    					console.log("removed=",record);
    				}
    			}
    		}
			showStore(store);
    	}
    });
    Ext.preg('fixedrowno', Ext.grid.plugins.FixedRowNo);

        Ext.onReady(function() {
            var myData = [
                          ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
                          ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
                          ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
                          ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
                          ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
                          ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
                      ];

                      /**
                       * Custom function used for column renderer
                       * @param {Object} val
                       */
                      function change(val){
                          if(val > 0){
                              return '<span style="color:green;">' + val + '</span>';
                          }else if(val < 0){
                              return '<span style="color:red;">' + val + '</span>';
                          }
                          return val;
                      }

                      /**
                       * Custom function used for column renderer
                       * @param {Object} val
                       */
                      function pctChange(val){
                          if(val > 0){
                              return '<span style="color:green;">' + val + '%</span>';
                          }else if(val < 0){
                              return '<span style="color:red;">' + val + '%</span>';
                          }
                          return val;
                      }

                      // create the data store
                      var store = new Ext.data.ArrayStore({
                          fields: [
                             {name: 'company'},
                             {name: 'price', type: 'float'},
                             {name: 'change', type: 'float'},
                             {name: 'pctChange', type: 'float'},
                             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                          ]
                      });

                      // manually load local data
                      store.loadData(myData);

                      // create the Grid
                      var grid = new Ext.grid.GridPanel({
                          store: store,
                          plugins: ['fixedrowno'],
                          tbar: [{
                              text: 'add',
                              handler: function() {
	                              // access the Record constructor through the grid's store
	                              var p = new store.recordType({company: 'Wal-Mart Stores, Inc.', price: 45.45, change: 0.73, pctChange: 1.63, lastChange: new Date()});
	                              store.insert(0, p);
                          	  }
                          }, {
                              text: 'remove',
                              handler: function() {
	                              store.removeAt(store.getCount()-1);
                              }
                          }],
                          columns: [
								new Ext.grid.RowNumberer(),
                              {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
                              {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                              {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
                              {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                              {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
                          ],
                          stripeRows: true,
                          autoExpandColumn: 'company',
                          height: 250,
                          width: 600,
                          title: 'Array Grid',
                          maxRow: myData.length,
                          // config options for stateful behavior
                          stateful: true,
                          stateId: 'grid'        
                      });
                      
                      // render the grid to the specified div in the page
                      grid.render('grid-example');
        });
    </script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>

From the above example, when you click 'add' button which insert a new record to the top of store and then the 'add' event fires, I found that the store really removed the last record, but the last record is still on the screen. is it a bug?
Thank you.

**darthwes** · 2 Jun 2010 8:00 PM

Not really a bug, you're "too late" at the "add" event. You have two options:

1. find/create a different event - I don't notice anything that exists, I can be wrong.

2. wrap the remove so it executes after the "add" completes. i.e.

Code:

trimRow: function(store){
	var showStore = function(s) {
		for (var i = 0; i < s.getCount(); i++) {
			var r = s.getAt(i);
			console.log((i+1), r.get('company'));
		};
	}
	showStore(store);
	var max = this.grid.maxRow;//store.lastOptions.params.limit;
	if (max) {
		var count = store.getCount();
		if (count > max) {
			for (var i = count; i > max; i--) {
				//store.removeAt(i-1);
				var record = store.getAt(i-1);
				//store.remove(record);
				//console.log("removed=",record);
				var closedUp = function(i) {
					return function() {
						console.log("removed=",record.get('company'));
						store.remove(record);
						showStore(store);
					};
				}(i);
				setTimeout(closedUp, 1); //1 might be too small etc.,etc.
			}
		}
	}
	//showStore(store);
}

which seems straightforward enough. By the way, the ticket you referred in your post is in response to a seperate issue and/or your post is not directly related. Hope some of this helped! Peace

**Keylan** · 3 Jun 2010 12:05 PM

Might be missing something here, but it seems like you are just having an issue of the grid not correctly displaying the contents of the changed store. After removing the row, trying firing the datachanged event manually:

Code:

store.fireEvent('datachanged', store);

**jarlau** · 3 Jun 2010 7:35 PM

thank you for the replies.
@darthwes, your solution works, thanks...

@Keylan, add 'datachanged' after remove doesn't help. it creates one extra row on top!!

Store - remove last record in 'add' event the view didn't remove.

Thread Tools

Search Thread

Display

Store - remove last record in 'add' event the view didn't remove.

Store - remove last record in 'add' event the view didn't remove.

Similar Threads

Remove a record from a store

[FIXED][3.x/2.x] Ext.data.Store#remove always fires "remove" event

[FIXED] ListStore.remove() tries to remove a Model from Record list