1. #1
    Sencha User
    Join Date
    Apr 2008
    Location
    Hong Kong
    Posts
    171
    Vote Rating
    0
    jarlau is on a distinguished road

      0  

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

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


    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.

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -13
    darthwes can only hope to improve

      1  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Location
    Colorado
    Posts
    51
    Vote Rating
    0
    Keylan will become famous soon enough

      0  

    Default


    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);

  4. #4
    Sencha User
    Join Date
    Apr 2008
    Location
    Hong Kong
    Posts
    171
    Vote Rating
    0
    jarlau is on a distinguished road

      0  

    Default


    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!!

Similar Threads

  1. Remove a record from a store
    By Trey in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 24 Dec 2009, 6:49 AM
  2. Replies: 2
    Last Post: 15 May 2009, 2:19 AM
  3. Replies: 2
    Last Post: 5 Feb 2009, 2:48 PM

Thread Participants: 2