Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7311 in 4.1.4.
  1. #1
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default Ext.ux.ProgressBarPager causing issues when opening/closing a window some times

    Ext.ux.ProgressBarPager causing issues when opening/closing a window some times


    REQUIRED INFORMATION Ext version tested:
    • Ext 4.1 rev 0
    Browser versions tested against:
    • Firefox 15.0.1 (firebug 1.10.3 installed)
    DOCTYPE tested against:
    • html5
    Description:
    • Basically, if you open a window, then close it, then reopen it, it will disappear from the screen and never come back in any way (notice: you must do the close/open operations quite fast, like if it's a software you use all days). Tested with some functions through firebug and the window can't be recovered.
    Steps to reproduce the problem:
    • Click on a button to open a window with a grid inside using the pager and a remote store
    • As soon as it opens, close it.
    • Click again on the button to open the window
    The result that was expected:
    • Window opening again
    The result that occurs instead:
    • Window appear for 0.5 seconds and then disappear
    Test Case:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>ProgressBarPager BUG</title>
      <link href="../extjs/resources/css/ext-all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
      <link href="../extjs/examples/ux/grid/css/GridFilters.css?body=1" media="screen" rel="stylesheet" type="text/css" />
      <link href="../extjs/examples/ux/grid/css/RangeMenu.css?body=1" media="screen" rel="stylesheet" type="text/css" />
      <script src="../extjs/ext-all-dev.js?body=1" type="text/javascript"></script>
      <script src="../extjs/locale/ext-lang-it.js?body=1" type="text/javascript"></script>
      <script type="text/javascript">
      Ext.onReady(function() {
        Ext.Loader.setConfig({
          enabled: true,
    
          paths: {
            'Fdd': './',
            'FedertrekDesktop': './',
            'Ext': '../extjs/src',
            'Ext.ux': '../extjs/examples/ux'
          }
        });
        Ext.require([
            'Ext.ux.grid.FiltersFeature',
            'Ext.grid.PagingScroller',
            'Ext.ux.RowExpander',
            'Ext.ux.ProgressBarPager'
        ]);
        Ext.define('Ext.grid.XPanel', {
          extend: 'Ext.grid.Panel',
          alias : 'widget.xgridpanel',
    
          // Custom configs
          gridColumns: [],
    
          // Configs
          loadMask: true,
    
          // Place here all configs that requires to be run before constructor is run
          constructor: function(config) {
            var me = this;
    
            // Initialize plugins and features array
            if (!config.plugins)
              config.plugins = [];
            if (!config.features)
              config.features = [];
    
            me.callParent(arguments);
          },
    
          initComponent: function() {
            var me = this;
    
            // Column settings
            var columnsOptions = {
              defaults: {
                flex: 1,
                sortable: false
              }
            };
            Ext.apply(columnsOptions, me.columns);
    
            // Grid settings
            Ext.apply(me, {
              forceFit: true,
              frame: false,
              padding: 1,
              columnLines: true,
              multiSelect: true,
              columns: columnsOptions,
              stripeRows: true,
    
              bbar: Ext.create('Ext.PagingToolbar', {
                // FIXME: Bug found, wtf is happening? this creates the problem on show/hide fast. Disabled at the moment
                plugins: Ext.create('Ext.ux.ProgressBarPager', {}),
                pageSize: me.store.pageSize,
                store: me.store,
                displayInfo: true
              })
            });
    
            // Build autoload event if option is set
            me.on('afterrender', function(obj, eOpts) {
              personalRecordsStore.load();
            });
    
            me.callParent(arguments);
          }
        });
        Ext.define('Ext.data.PersonalRecordModel', {
          extend: 'Ext.data.Model',
    
          proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
              type: 'json',
              root: 'root',
              readRecordsOnFailure: false
            },
            writer: {
              type: 'json'
            }
          },
    
          fields: [
            {
              name: 'id',
              type: 'int'
            },
            {
              name: 'name',
              type: 'string'
            },
            {
              name: 'surname',
              type: 'string'
            },
            {
              name: 'birth_date',
              type: 'date',
              dateFormat: 'Y-m-d'
            },
            {
              name: 'birth_place',
              type: 'string'
            },
            {
              name: 'residence',
              type: 'string'
            },
            {
              name: 'email',
              type: 'string'
            },
            {
              name: 'mobile_phone',
              type: 'string'
            },
            {
              name: 'phone',
              type: 'string'
            },
            {
              name: 'display_field',
              type: 'string',
              mapping: 'dis'
            },
            {
              name: 'value_field',
              type: 'int',
              mapping: 'val'
            }
          ],
    
          idProperty: 'id'
    
        });
        Ext.define('Ext.data.PersonalRecordsStore', {
          extend: 'Ext.data.Store',
          model: 'Ext.data.PersonalRecordModel'
        });
        personalRecordsStore = Ext.create('Ext.data.PersonalRecordsStore');
        Ext.define('Ext.window.TestWindow', {
          extend: 'Ext.window.Window',
          
          layout: 'fit',
          x: 30,
          y: 30,
          width: 200,
          height: 200,
          
          initComponent: function() {
            var me = this;
            var gridColumns   = [
            {
              header: '#',
              dataIndex: 'id',
              editor: null,
              hidden: true
            },
            {
              header: 'Nome',
              dataIndex: 'name'
            },
            {
              header: 'Cognome',
              dataIndex: 'surname'
            },
            {
              header: 'Data di nascita',
              dataIndex: 'birth_date',
              renderer : Ext.util.Format.dateRenderer('d/m/Y'),
              editor: {
                allowBlank: true,
                xtype: 'datefield',
                format: 'd/m/Y'
              },
              filter: {
                dateFormat: 'Y-m-d'
              }
            },
            {
              header: 'Luogo di nascita',
              dataIndex: 'birth_place'
            },
            {
              header: 'Residenza',
              dataIndex: 'residence'
            },
            {
              header: 'E-Mail',
              dataIndex: 'email',
              editor: {
                vtype: 'email'
              }
            },
            {
              header: 'Cellulare',
              dataIndex: 'mobile_phone'
            },
            {
              header: 'Telefono',
              dataIndex: 'phone'
            }];
    
            itemsGrid = Ext.create('Ext.grid.XPanel', {
              columns: {
                items: gridColumns
              },
    
              store: personalRecordsStore
            });
    
            Ext.apply(me, {
              items: [itemsGrid]
            });
          
            me.callParent(arguments);
          }
        });
        mainButton = Ext.create('Ext.button.Button', {
          text: 'Click me',
          renderTo: "testdiv",
          window: null,
          handler: function() {
            if (!this.window) {
              this.window = Ext.create('Ext.window.TestWindow', {
                animateTarget: this
              });
              this.window.on('close', function() {
                this.window = null;
              }, this);
            }
            this.window.show();
          }
          });
      });
      </script>
    </head>
    <body></body>
    </html>
    Notice that you'll need also data to be fetched from the store, I use this file called:

    data.json

    Code:
    {
    
        "success": true,
        "message_code": 0,
        "message": "",
        "total": 30,
        "root": [
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 10,
                "mobile_phone": "",
                "name": "a1",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a1 ",
                "val": 10
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 11,
                "mobile_phone": "",
                "name": "a2",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a2 ",
                "val": 11
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 12,
                "mobile_phone": "",
                "name": "a3",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a3 ",
                "val": 12
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 13,
                "mobile_phone": "",
                "name": "a4",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a4 ",
                "val": 13
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 14,
                "mobile_phone": "",
                "name": "a5",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a5 ",
                "val": 14
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 15,
                "mobile_phone": "",
                "name": "a6",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a6 ",
                "val": 15
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 16,
                "mobile_phone": "",
                "name": "a7",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a7 ",
                "val": 16
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 17,
                "mobile_phone": "",
                "name": "a8",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a8 ",
                "val": 17
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 18,
                "mobile_phone": "",
                "name": "a9",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a9 ",
                "val": 18
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 19,
                "mobile_phone": "",
                "name": "a10",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a10 ",
                "val": 19
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 20,
                "mobile_phone": "",
                "name": "a11",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a11 ",
                "val": 20
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 21,
                "mobile_phone": "",
                "name": "a12",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a12 ",
                "val": 21
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 22,
                "mobile_phone": "",
                "name": "a13",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a13 ",
                "val": 22
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 23,
                "mobile_phone": "",
                "name": "a14",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a14 ",
                "val": 23
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 24,
                "mobile_phone": "",
                "name": "a15",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a15 ",
                "val": 24
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 25,
                "mobile_phone": "",
                "name": "a16",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a16 ",
                "val": 25
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 26,
                "mobile_phone": "",
                "name": "a17",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a17 ",
                "val": 26
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 27,
                "mobile_phone": "",
                "name": "a18",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a18 ",
                "val": 27
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 28,
                "mobile_phone": "",
                "name": "a19",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a19 ",
                "val": 28
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 29,
                "mobile_phone": "",
                "name": "a20",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a20 ",
                "val": 29
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 30,
                "mobile_phone": "",
                "name": "a21",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a21 ",
                "val": 30
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 31,
                "mobile_phone": "",
                "name": "a22",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a22 ",
                "val": 31
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 32,
                "mobile_phone": "",
                "name": "a23",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a23 ",
                "val": 32
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 33,
                "mobile_phone": "",
                "name": "a24",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a24 ",
                "val": 33
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 38,
                "mobile_phone": "",
                "name": "a25",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "a25 ",
                "val": 38
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 46,
                "mobile_phone": "",
                "name": "mucca",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "mucca ",
                "val": 46
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 47,
                "mobile_phone": "",
                "name": "Prova1",
                "phone": "",
                "residence": "",
                "surname": "Lol",
                "dis": "Prova1 Lol",
                "val": 47
            },
            {
                "birth_date": null,
                "birth_place": "",
                "email": "",
                "id": 52,
                "mobile_phone": "",
                "name": "dsa",
                "phone": "",
                "residence": "",
                "surname": "",
                "dis": "dsa ",
                "val": 52
            }
        ]
    
    }
    HELPFUL INFORMATION Screenshot or Video: See this URL for live test case: https://dl.dropbox.com/u/762638/File...bug/index.html

    Operating System:
    • Windows 7 Ultimate
    Edit 1: Added live test case

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Looks like it's caused by the animation, try changing the destroy code:

    Code:
        onDestroy: function(){
            var me = this,
                bar = me.bar;
            
            me.clearTimer();
            if (me.rendered) {
                if (me.textEl.isComposite) {
                    me.textEl.clear();
                }
                Ext.destroyMembers(me, 'textEl', 'progressBar');
                if (bar && me.animate) {
                    bar.stopAnimation();
                }
            }
            me.callParent();
        }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    Looks like it's caused by the animation, try changing the destroy code:

    Code:
        onDestroy: function(){
            var me = this,
                bar = me.bar;
            
            me.clearTimer();
            if (me.rendered) {
                if (me.textEl.isComposite) {
                    me.textEl.clear();
                }
                Ext.destroyMembers(me, 'textEl', 'progressBar');
                if (bar && me.animate) {
                    bar.stopAnimation();
                }
            }
            me.callParent();
        }
    This is fixing the issue! Thanks a lot for it.

    A stupid question which I don't know if it's a bug: why if I click on the most left part of the bar pager, I get the bar completely empty and "Record NaN - NaN of 2" (should be "Record 1 - 2 of 2")?

Thread Participants: 1

Tags for this Thread