PDA

View Full Version : Ext-all.js not responding when showing/hiding grid columns



FrostyCold
2 Jun 2014, 8:32 PM
I ran into an issue in which the ext-all.js file hangs when attempting to show/hide grid columns.
I'm using Extjs 4.1.2 on Mozilla Firefox 25.0. OS is ubuntu 12.10, just to clarify.
When the user edits a row via the plugin, the hidden fields become shown only so that the user can edit them. After the editing is complete those columns become hidden again.


Controller.js:


var hiddenColumns = []; //global array for storing columns
...
init: function() {
this.control({
...
'myGrid': {
beforeedit: function() {
me.columnsVisibility('show');
},
afterrender: function(){
var me = this,
formDataPanel = me.getFormDataPanel(),
activeGrid = formDataPanel.getLayout().getActiveItem();
for (i=0; i < activeGrid.columns.length; i++) {
if (activeGrid.columns[i].hidden) {
Ext.Array.push(hiddenColumns, activeGrid.columns[i]);
}
}
},
edit: function(editor, e) {
var me = this,
usersStore = me.getStore('Users'),
alias = me.getUserAlias(),
record = usersStore.findRecord('email', alias, false, true, true),
fdupdate = record.get('fdupdate');
me.columnsVisibility('hide');
if (fdupdate == 't') {
try {
e.store.sync();
}
catch (e) { }
e.record.commit();
} else {
var store = me.getStore('Inspection');
store.rejectChanges();
Ext.Msg.alert('Alert!','This function is not currently available for you');
}
},
...
} });
},
...
columnsVisibility: function(visible){
for (var i=0; i < hiddenColumns.length; i++) {
if (visible == 'hide') {
hiddenColumns[i].hide();
} else if (visible == 'show') {
hiddenColumns[i].show();
}
}
},
... myGrid.js:



...
initComponent: function() {
var filters = {
ftype: 'filters', // encode and local configuration options defined previously for easier reuse
encode: false, // json encode the filter query
local: true },
Ext.apply(this, {
title: 'Inspection',
id: 'inspection', // This is required since title can be changed by filter functions to update status of the grid.
store: 'Inspection',
features: [filters],
selModel: Ext.create('Ext.selection.CheckboxModel', { checkOnly: true }),
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})
],
columns: [{
text: 'ID',
width: 35,
dataIndex: 'id'
},{
text: 'Record Name',
dataIndex: 'record_name',
width: 70,
hidden: true,
editor: {
queryMode: 'local',
displayField: 'record_name',
valueField: 'record_name',
editable: false
},
filter: {
type: 'string'
}
},{
text: 'Date Created',
dataIndex: 'date_created',
width: 150,
filter: {
type: 'string'
}
}]
});
this.callParent(arguments);
}
});
While my code does work as intended, it causes my browser to hang for a moderate amount of time before prompting me with a message informing about a script being busy/unresponsive (Script: http://localhost/lib/ext-4.1.2/ext-all.js:18)

I am uncertain as to whether this problem lies with my version of extjs, my code or my browser. If anyone could help it would be much appreciated.

greg.barry
12 Jun 2014, 1:22 PM
First off, you should have access to Ext JS 4.1.3 if you have Ext JS 4.1.2. If you intend on remaining with the Ext JS 4.1.x branch, I'd recommend upgrading to the latest of said branch.

That said, it would really be ideal for you to upgrade to Ext JS 4.2.2 or Ext JS 5.0.0. Many bugs have been reconciled since Ext JS 4.1.2.

Lastly, if you have no intention of updating, please post a fiddle (sencha.fiddle.com) of your code so we can ensure that your implementation is sound.

Thanks!
Greg