ExtJS empêche l'événement resizecolumn lors du chargement des colonnes

Question

Je travaille sur un projet ExtJS 6.2. J'ai besoin d'effectuer certaines opérations lorsque les colonnes d'une grille ont été redimensionnées. Je pense que l'événement correct pour le faire est columnresize. Le problème est, puisque les colonnes sont chargées dynamiquement à partir d'une base de données, cet événement est déclenché chaque fois qu'une nouvelle colonne est ajoutée à la grille, et je voudrais l'empêcher. Je veux dire, j'ai besoin que cet événement soit déclenché seulement quand chaque colonne est chargée.

J'ai essayé de mettre un drapeau (nommé lFirstInit) qui serait faux une fois que les colonnes de base de données sous forme chargées, mais l'événement columnresize continue d'être tiré depuis le début.

Comment pourrais-je aborder cela, s'il vous plaît? Merci.

Vue:

Ext.define('App.view.TMainBrowseGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.TMainBrowseGrid', 

    requires: [ 
     'App.view.TMainBrowseGridViewModel', 
     'App.view.override.TMainBrowseGrid', 
     'Ext.view.Table', 
     'Ext.grid.column.RowNumberer', 
     'App.view.TMainBrowseGridViewController' 
    ], 

    controller: 'TMainBrowseGrid', 

    config: { 
     oParent: null, 
     cBrwName: '', 
     cCodForm: '' 
    }, 

    viewModel: { 
     type: 'TMainBrowseGrid' 
    }, 

    flex: 1, 

    columns: [ 
     { 
      xtype: 'rownumberer', 
      itemId: 'oColRowNum' 
     } 
    ], 

    listeners: { 
     columnresize: 'onGridpanelColumnResize', 
    } 

}); 

Contrôleur

Ext.define('App.view.TMainBrowseGridViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.TMainBrowseGrid', 

    onGridpanelColumnResize: function (component, column, width, eOpts) { 
     // THINGS TO DO... 
    } 
}); 

Answer 1

Nous avons finalement jeté l'approche 'columnresize'. Nous avons pensé qu'il est plus fiable d'effectuer ces opérations en cliquant sur un bouton 'Fermer'. Cependant, je tiens à vous remercier pour vos suggestions, en particulier la personne qui a posté la réponse ci-dessous, et plus tard l'a enlevé avant que je puisse le marquer comme la réponse choisie. C'était le code qu'il/elle a posté:

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields: ['name', 'email', 'phone'], 
    data: [{ 
     name: 'Lisa', 
     email: 'lisa@simpsons.com', 
     phone: '555-111-1224' 
    }, { 
     name: 'Bart', 
     email: 'bart@simpsons.com', 
     phone: '555-222-1234' 
    }, { 
     name: 'Homer', 
     email: 'homer@simpsons.com', 
     phone: '555-222-1244' 
    }, { 
     name: 'Marge', 
     email: 'marge@simpsons.com', 
     phone: '555-222-1254' 
    }] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody(), 
    listeners: { 
     columnresize: function(ct, column, width, eOpts){ 
      if(ct.containsFocus){// It will true when we resize column. 
       alert('resize'); 
       console.log(`${column.text} Column resized`); 
      } 
     } 
    } 
});