[FIXED][3.0] Javascript checkmated me :-(

**frew** · 6 Apr 2009 1:57 PM

Hello friends,

I am having a crazy issue here. I define a pagingtoolbar on instantiation of a grid and if I give it my grid's store I can no longer close the tab that contains the grid (it seems like it tries to close the store twice or something.) So I thought I'd be clever and instead of giving it the store I give it this.getStore(). Then I can close the tab, but I can no longer use the paging toolbar. Annoying city!

Here is my grid, simplified, but still with the issue:

PHP Code:


Ext.ns('ACDRI.ui');



ACDRI.ui.Grid = Ext.extend(Ext.grid.GridPanel, {

      generateUrl: function() {

         return this.urlBuilder(this.controller, this.action);

      },

      urlBuilder: ACDRI.fn.generateUrl,

      onRender: function(ct, position) {

         ACDRI.ui.Grid.superclass.onRender.call(this, ct, position);

         this.getStore().load();

      },

      initComponent: function() {

         this.baseParams = this.baseParams || {};

         var storeCfg = {

               proxy: new Ext.data.HttpProxy({ url: this.generateUrl() }),

               reader: new Ext.data.JsonReader({

                     root: 'data',

                     totalProperty: 'total'

                  }, this.record),

               remoteSort: true,

               baseParams: this.baseParams

            };



         if (this.sortInfo) {

            Ext.apply(storeCfg, {sortInfo: this.sortInfo});

         }

         var store = new Ext.data.Store(storeCfg);

         var sm = new Ext.grid.CheckboxSelectionModel();



         this.columns = this.columns || [];

         this.columns.unshift(sm);

         this.tbar = this.tbar || [];



         if (this.isPaginated) {

            this.bbar = new Ext.PagingToolbar({

                  pageSize: 25,

                  //the bug is here apparently

                  store: store,

                  displayInfo: true,

                  displayMsg: 'Displaying records {0} - {1} of {2}',

                  emptyMsg: "No " + this.itemName + " to display"

               })

         }



         var config = {

            store: store,

            loadMask: true,

            sm: sm,

            baseParams: this.baseParams

         };

         Ext.apply(this, Ext.apply(this.initialConfig, config ));

         ACDRI.ui.Grid.superclass.initComponent.apply(this, arguments);

      }

   });

Any ideas?

Thanks!

**jsakalos** · 6 Apr 2009 2:03 PM

You need to add paging toolbar after parent call. See http://examples.extjs.eu/?ex=gridinbl for working example.

**frew** · 6 Apr 2009 2:25 PM

Originally Posted by jsakalos

You need to add paging toolbar after parent call. See http://examples.extjs.eu/?ex=gridinbl for working example.

Ok, good news and bad news. The good news is that you're right (as always

saki. The bad news is that in Ext 3 the issue remains the same. I'll wait till it's officially release before I post anything about it being a bug.

Thanks saki!

**jsakalos** · 6 Apr 2009 2:31 PM

Toolbar is container in Ext 3.0 so maybe you need to wait until render.

**jsakalos** · 6 Apr 2009 2:34 PM

Disregard my previous post as I've right now tested the above example against 2 minutes old Ext 3.0 SVN and it works w/o any problems.

**frew** · 6 Apr 2009 2:37 PM

I just got the latest one from svn and I still have the issue... blehhh.

**jsakalos** · 6 Apr 2009 2:38 PM

There must be a difference. Only to find it....

**frew** · 6 Apr 2009 7:48 PM

Alrighty, I have the bare metal of my code (I think). Here it is, in one, 54 line file:

Code:

<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Test</title>
   <script type="text/javascript" src="js/lib/ext3/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="js/lib/ext3/ext-all-debug.js"></script>
   <link rel="stylesheet" type="text/css" href="js/lib/ext3/resources/css/ext-all.css" />
   <script type="text/javascript">
      Ext.ns('ACDRI.ui');
      ACDRI.ui.Grid = Ext.extend(Ext.grid.GridPanel, {
            initComponent: function() {
               var store = new Ext.data.Store({
                     proxy: new Ext.data.HttpProxy({ url: 'frew' }),
                     reader: new Ext.data.JsonReader({
                           root: 'data',
                           totalProperty: 'total'
                        }, this.record)
                  });

               var config = { store: store };
               Ext.apply(this, Ext.apply(this.initialConfig, config ));
               this.bbar = new Ext.PagingToolbar({
                     pageSize: 25,
                     store: store
                  });
               ACDRI.ui.Grid.superclass.initComponent.apply(this, arguments);
            }});
      ACDRI.ui.Customers = Ext.extend(ACDRI.ui.Grid, {
            initComponent: function() {
               this.record = Ext.data.Record.create([
                  {name: 'name', type: 'string'}
                  ]);
               var config = {
                  title: 'Customers',
                  columns: [{
                        header: 'Name',
                        dataIndex: 'name',
                        tooltip: 'The name of the customer',
                        sortable: true,
                        width: 250
                     }]};
               Ext.apply(this, Ext.apply(this.initialConfig, config));
               ACDRI.ui.Customers.superclass.initComponent.apply(this, arguments);
            }
         });
      Ext.reg('customers', ACDRI.ui.Customers);
      Ext.onReady(function() {
            var foo = new Ext.Window({ xtype: 'panel',
               items: {
                  xtype: 'customers',
                  height: 200, width: 200
               }});
            foo.show();
         });
</script>
   </head>
   <body>
   <div id='main'></div>
   </body>
   </html>

Anyone see what I'm doing here that breaks it in ext 3 and not ext 2?

Note: it renders fine, and even works fine *until* you close it. Note the error message given for ext 3.

Any thoughts?

**jsakalos** · 7 Apr 2009 1:35 AM

It is most likely bug. I think PagingToolbar::bindStore should read:

Code:

    bindStore : function(store, initial){
        if(!initial && this.store){
            this.store.un("beforeload", this.beforeLoad, this);
            this.store.un("load", this.onLoad, this);
            this.store.un("loadexception", this.onLoadError, this);
            
            if(store !== this.store && this.store.autoDestroy){
                this.store.destroy();
            }
        }
        if(store){
            store = Ext.StoreMgr.lookup(store);
            store.on("beforeload", this.beforeLoad, this);
            store.on("load", this.onLoad, this);
            store.on("loadexception", this.onLoadError, this);  
                      
            this.paramNames.start = store.paramNames.start;
            this.paramNames.limit = store.paramNames.limit;
            
            if (store.getCount() > 0){
                this.onLoad(store, null, {});
            }            
        }
        this.store = store;

Moving this thread to bugs.

**evant** · 7 Apr 2009 1:45 AM

Well spotted! Fixed in SVN.

[FIXED][3.0] Javascript checkmated me :-(

Thread Tools

Search Thread

Display

[FIXED][3.0] Javascript checkmated me :-(

[FIXED][3.0] Javascript checkmated me :-(