Results 1 to 2 of 2

Thread: Ext-all.js not responding when showing/hiding grid columns

  1. #1

    Default Ext-all.js not responding when showing/hiding grid columns

    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:
    Code:
    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:
    Code:
      ...
       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.

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    Lawrence, KS
    Posts
    462
    Answers
    65

    Default

    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •