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

      0  

    Default Answered: Ext.ux.ProgressBarPager giving issues when opening/closing window fast

    Answered: Ext.ux.ProgressBarPager giving issues when opening/closing window fast


    I don't understand if my code is creating the issue (notice that is a big project so there is a lot of code) or it's a small issue with progressBarPager.

    Anyway, hopefully someone can point me to a solution or have faced this trouble before me. I have no problem disabling the plugin for this project because it's not a requirement, but I'm still interested in the issue.

    http://www.youtube.com/watch?v=KnXv8...ature=youtu.be

  2. Should I report this as a bug?

    EDIT: It looks like is a bug, they suggested me a fix.
    http://www.sencha.com/forum/showthre...690#post889690

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    ProgressBarPager giving issues when opening/closing window fast
    What is the issue you are facing .. the video was very fast and I was not able to tell what you wanted me to look at.

    Scott.

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

      0  

    Default


    Sorry, I'll improve the video.
    The problem is that if I open a window with the button, then close it and reopen it, I see this window for a very short moment, than it disappear (I detected that is visible but at -10000 -10000 position), then if I click on button to show it again it's not loaded/can't do anything. I manually tried inserting console commands to show the window with .show method, hide and show again, minimize, restore... Tested all methods, I can't find a way to make the window reappear.

    What surprised me is that this issue happens only if I enable ProgressBarPager. I prepared a standalone code that can be used to test, here you are (it's a lot of code still, I'm trying to cut it a bit):

    index.php

    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
          useFiltering: true,
          useRowNumberer: true,
          useGrouping: false,
          useRowExpander: false,
          printable: true,
    
          filter: {},
          firstColumnToEdit: 0,
          gridColumns: [],
          grouping: {
            groupHeaderTpl: [
              '<tpl if="this.isRenderedNameEmpty(name)">',
                '(Nessuno/a)',
              '</tpl>',
              '<tpl if="!this.isRenderedNameEmpty(name)">',
                '{name}',
              '</tpl>',
              ' ({rows.length})',
              {
                isRenderedNameEmpty: function(renderedName) {
                  return (!renderedName || renderedName == '&nbsp;' || renderedName == ' ');
                }
              }
            ]
          },
          autoLoadStores: true,
          requiredStores: [],
          alwaysLoadStoresOnCreate: true,
          rowNumbererSettings: {},
          columnFlexMultiplier: 1000,
          rowExpander: {
            rowBodyTpl : [
              '<p><b>Remember to change rowExpander rowBodyTpl</b></p><br>'
            ]
          },
          beforeContextMenuItems: [],
          afterContextMenuItems: [],
    
          // Configs
          loadMask: true,
          tbarItems: [],
    
          // 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 = [];
    
            // Row expander
            if (config.useRowExpander) {
              var rowExpanderPlugin = {
                ptype: 'xrowexpander'
              }
              Ext.applyIf(rowExpanderPlugin, config.rowExpander);
              Ext.applyIf(rowExpanderPlugin, me.rowExpander);
              config.plugins.push(rowExpanderPlugin);
            }
    
            me.callParent(arguments);
          },
    
          initComponent: function() {
            var me = this;
    
            me.addEvents(
              /**
              * @event selectionstatechange
              * Fires when selection state change in any way.
              * Namely, when selection changes or when row editor edit mode changes
              *
              * @param {Fdd.grid.XPanel} obj Grid
              * @param {Object} eOpts
              */
              'selectionstatechange'
            );
    
            // Load mask private data
            var storesLoaded = 0;
            var checkStoresLoaded = function(records, operation, success) {
              if (storesLoaded == (me.requiredStores.length + 1)) {
                me.setLoading(false);
                storesLoaded = 0;
                return true;
              }
              return false;
            };
            var increaseStoresLoaded = function(records, operation, success) {
              storesLoaded += 1;
              checkStoresLoaded(records, operation, success);
            };
    
            // Filter feature configuration
            var featureItems = [];
    
            var filterFeature = {
              ftype: 'filters',
    
              encode: true,
              local: false
            };
            Ext.apply(filterFeature, me.filter);
            if (me.useFiltering)
              featureItems.push(filterFeature);
    
            // Row editor configuration
            var pluginItems = [];
    
            // Calculate columns flex
            var columnsFlex = me.columns.items.length;
            if (me.useRowNumberer)
              ++columnsFlex;
            columnsFlex = (1 * me.columnFlexMultiplier) / columnsFlex;
    
            // Include row numberer if required
            if (me.useRowNumberer) {
              var rowNumberer = {
                xtype: 'rownumberer'
              };
              Ext.apply(rowNumberer, me.rowNumbererSettings, { sortable: false, flex: 1 });
              Ext.Array.insert(me.columns.items, 0, [rowNumberer]);
            }
    
            // Column settings
            var columnsOptions = {
              defaults: {
                flex: columnsFlex,
                filterable: true,
                sortable: true,
                editor: {
                  allowBlank: true
                }
              }
            };
            Ext.apply(columnsOptions, me.columns);
    
            // Toolbar array items
            var topToolbarItems  = [];
            //var botToolbarItems  = [];
    
            // Top toolbar buttons
            var addButton = Ext.create('Ext.Action', {
              iconCls: 'icon-add',
              text: 'Aggiungi',
              handler: function() {
              }
            });
            var deleteButton = Ext.create('Ext.Action', {
              iconCls: 'icon-delete',
              text: 'Rimuovi',
              disabled: true,
              handler: function() {
                Ext.Msg.show({
                  title: 'Attenzione',
                  msg: 'Sei sicuro di voler cancellare le righe selezionate? L\'operazione sarà irreversibile',
                  buttons: Ext.Msg.YESNO,
                  icon: Ext.Msg.WARNING,
                  animateTarget: me,
                  scope: me,
                  fn: function(buttonId, text, opt) {
                    if (buttonId != 'yes') return;
                  }
                });
              }
            });
            topToolbarItems.push(addButton);
            topToolbarItems.push(deleteButton);
            Ext.Array.forEach(me.tbarItems, function(item) {
              topToolbarItems.push(item);
            });
    
            // Context menu items
            var editButton = Ext.create('Ext.Action', {
              iconCls: 'icon-edit',
              text: 'Modifica',
              handler: function(obj, e) {
              }
            });
    
            var excelPrint = Ext.create('Ext.Action', {
              cls: 'icon-excel',
              handler: function() {
                alert("Funzionalità inattiva");
              }
            });
            var normalPrint = Ext.create('Ext.Action', {
              cls: 'icon-print',
              handler: function() {
                alert("Funzionalità inattiva");
              }
            });
            if (me.printable) {
              topToolbarItems.push({ xtype: 'tbfill' });
              topToolbarItems.push(excelPrint);
            }
    
            // Context menu grid
            var gridContextMenuItems = [];
    
            Ext.Array.forEach(me.beforeContextMenuItems, function(item) {
              gridContextMenuItems.push(item);
            });
    
            gridContextMenuItems.push(editButton),
            gridContextMenuItems.push({
              xtype: 'menuseparator'
            });
            gridContextMenuItems.push(deleteButton);
    
            Ext.Array.forEach(me.afterContextMenuItems, function(item) {
              gridContextMenuItems.push(item);
            });
    
            var gridContextMenu = Ext.create('Ext.menu.Menu', {
              items: gridContextMenuItems
            });
    
            // Grouping feature configuration
            if (me.useGrouping) {
              var groupingFeature = Ext.create('Ext.grid.feature.Grouping', me.grouping);
              featureItems.push(groupingFeature);
            }
    
            Ext.Array.push(me.features, featureItems);
            Ext.Array.push(me.plugins, pluginItems);
    
            // Grid settings
            Ext.apply(me, {
              forceFit: true,
              frame: false,
              padding: 1,
              columnLines: true,
              multiSelect: true,
              columns: columnsOptions,
              stripeRows: true,
    
              tbar: {
                items: topToolbarItems
              },
              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
              })
            });
    
            // Prepare selectionstatechange event firing
            me.mon(me.getSelectionModel(), 'selectionchange', function(obj, selected, eOpts){
              me.fireEvent('selectionstatechange', this, { selected: selected, editMode: false});
            }, me);
    
            // Change button status when selection state changes
            me.on('selectionstatechange', function(obj, options) {
              deleteButton.setDisabled(!options.selected || options.selected.length == 0 || options.editMode);
              editButton.setDisabled(!options.selected || options.selected.length != 1 || options.editMode);
            });
    
    
            // Define store loading method
            this.loadStores = function(force) {
              var i = 0;
              for (i = 0; i < me.requiredStores.length; ++i) {
                var currentStore = me.requiredStores[i];
                if (currentStore != me.store) {
                  if (Ext.getStore(currentStore).isLoaded && !force)
                    storesLoaded += 1;
                  else
                    Ext.getStore(currentStore).load(increaseStoresLoaded);
                }
              }
              if (Ext.getStore(me.store).isLoaded && !force)
                storesLoaded += 1;
              else
                Ext.getStore(me.store).load(increaseStoresLoaded);
              if (!checkStoresLoaded())
                me.setLoading(true);
            };
    
            // Build autoload event if option is set
            if (me.autoLoadStores) {
              me.on('afterrender', function(obj, eOpts) {
                me.loadStores(me.alwaysLoadStoresOnCreate);
              });
            }
    
            // Register contextmenu
            me.on('itemcontextmenu', function(obj, record, item, index, e, eOpts) {
              if (!e.ctrlKey) {
                e.stopEvent();
                gridContextMenu.rowIndex = index;
                gridContextMenu.showAt(e.getXY());
                return false;
              }
            });
    
            me.callParent(arguments);
          },
    
          /**
           * Actually supports only column filter options
           */
          setFilterValue: function(dataIndex, value, filterConfig) {
            var me = this;
            Ext.Array.forEach(this.columns, function(item, index, allItems) {
              // Skip wrong column filters
              if (!item['dataIndex'] || item.dataIndex != dataIndex) return;
    
              // Tries to get correct filter before creating it
              var gridFilter = me.filters.getFilter(dataIndex);
              if (!gridFilter) {
                gridFilter = {};
    
                // Attach the column filter configuration and filterConfig
                Ext.apply(gridFilter, filterConfig || {}, item['filter'] || {});
                Ext.applyIf(gridFilter, { dataIndex: dataIndex });
    
                // Create the filter after ensuring is active
                gridFilter.active = true;
                gridFilter = me.filters.addFilter(gridFilter);
              }
    
              // Set the filter value and activate it
              gridFilter.setValue(value);
              gridFilter.setActive(true);
            });
          }
        });
        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',
          
          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'
              }
            },
            {
              //xtype: 'numbercolumn',
              header: 'Cellulare',
              dataIndex: 'mobile_phone'
            },
            {
              header: 'Telefono',
              dataIndex: 'phone'
            }];
    
            itemsGrid = Ext.create('Ext.grid.XPanel', {
              columns: {
                items: gridColumns
              },
    
              store: personalRecordsStore,
              firstColumnToEdit: 1,
              useGrouping: true
            });
    
            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>
    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
            }
        ]
    
    }
    EDIT: Updated video with notes!

    I can't create a fiddle because I require AJAX :\

  5. #4
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    140
    Answers
    9
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    I updated the code, now is much more clean:

    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'
              }
            },
            {
              //xtype: 'numbercolumn',
              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>
    <div id="testdiv"></div>
    </body>
    </html>

  6. #5
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    140
    Answers
    9
    Vote Rating
    1
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    Should I report this as a bug?

    EDIT: It looks like is a bug, they suggested me a fix.
    http://www.sencha.com/forum/showthre...690#post889690

Thread Participants: 1

Tags for this Thread