Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJSIV-7311 in 4.1.4.
  1. 20 Sep 2012 6:01 AM #1
    Fire-Dragon-DoL
    Fire-Dragon-DoL is offline
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    140
    Vote Rating
    0
    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
    Reply With Quote Reply With Quote
  2. 20 Sep 2012 9:07 PM #2
    evant
    evant is offline
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    15,067
    Vote Rating
    96
    evant is a splendid one to behold evant is a splendid one to behold evant is a splendid one to behold evant is a splendid one to behold evant is a splendid one to behold evant is a splendid one to behold evant is a splendid one to behold
      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!
    Reply With Quote Reply With Quote
  3. 21 Sep 2012 3:57 AM #3
    Fire-Dragon-DoL
    Fire-Dragon-DoL is offline
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    140
    Vote Rating
    0
    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")?
    Reply With Quote Reply With Quote