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
    16,824
    Vote Rating
    609
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi