PDA

View Full Version : Ext.ux.ProgressBarPager giving issues when opening/closing window fast



Fire-Dragon-DoL
18 Sep 2012, 7:28 AM
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=KnXv8aOgg7I&feature=youtu.be

scottmartin
18 Sep 2012, 8:31 AM
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.

Fire-Dragon-DoL
18 Sep 2012, 8:52 AM
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


<!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


{

"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 :\

Fire-Dragon-DoL
18 Sep 2012, 9:55 AM
I updated the code, now is much more clean:


<!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>

Fire-Dragon-DoL
20 Sep 2012, 3:57 AM
Should I report this as a bug?

EDIT: It looks like is a bug, they suggested me a fix.
http://www.sencha.com/forum/showthread.php?243263-Ext.ux.ProgressBarPager-causing-issues-when-opening-closing-a-window-some-times&p=889690#post889690