1. #1
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    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,927
    Answers
    656
    Vote Rating
    443
    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
    141
    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
    141
    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
    141
    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

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