[ExtJS4.2.2] MVC - Infinite grid, mes checkboxes ne sont plus sélectionnables ?

Version imprimable

Bonjour à tous,

j'ai une Grid Infiny avec une pagination de 50. J'ai 2 champs dans mon model (Form et Frequency)

Mon problème est le suivante:
- lors du premier remplissage de ma grille, mes checkboxes fonctionnent parfaitement, mais si je ferme ma
vue puis la ré-ouvre alors mes checkboxes ne sont plus "checkable", je suppose que je dois mal définir quelque chose
ou alors mal vider mon store....
Mes checkboxes lors de la ré-ouverture ne semblent pas être grisé, ils sont juste inertes. Et mes données sont bien affichées.

Ma infinite grid fonctionne très bien lors de la première ouverture de ma vue.

Je fais mon remplissage dans le BeforeRender de ma vue (depuis le controller)

Auriez vous une idée ?
Je n'ai aucune erreur dans ma console.
Pensez vous que ma manière de vider la grille est bonne au démarrage, car j'ai vu qu'il y avait plusieurs méthodes.

D'avance merci pour vos aides et conseils....

ci-dessous vous trouverez: model, store, view, controller

MODEL

Code:

1
2
3
4
5
6
7
Ext.define('PP.model.chart.GridLeftGraphic', {
    extend: 'Ext.data.Model',
    fields: [
        { type: 'string',   name: 'name' },
        { type: 'int',      name: 'f'    }
    ]
});

STORE

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
Ext.define('PP.store.chart.GridLeftGraphics', {
    extend      : 'Ext.data.Store',
    model       : 'PatentPulse.model.chart.GridLeftGraphic',
    storeId     : 'storeGridLeftGraphic',
    clearOnLoad : true,
    autoLoad    : false,
 
 
    remoteSort  : true,
    // allow the grid to interact with the paging scroller by buffering
    buffered    : true,
 
    leadingBufferZone   : 10, // The number of records to keep rendered below the visible area.
    trailingBufferZone  : 10, // The number of records to keep rendered above the visible area.
    numFromEdge         : 5,  // How close the edge of the table should come to the visible area before the table is refreshed further down.
 
    pageSize            : 50,
    purgePageCount      : 0,    
 
    proxy: {
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        type        : 'jsonp',
        limitParam  : 'rows',
        pageParam   : 'start',
 
        reader: {
            //type            : 'jsonp',
            totalProperty   : 'total', // si omit alors totalProperty prend aussi la valeur "total"
            messageProperty : 'message',
            successProperty : 'success',
            root            : 'rows'
        },
        listeners : {
                exception : function(proxy, response, operation) {
                    //exception handling
                    alert('Exception in store/chart/GridLeftGraphics');
                }
        },        
        // sends single sort as multi parameter
        simpleSortMode      : true
    },
    sorters: [{
        property : 'pd',
        direction: 'DESC'
    }]
});

VIEW

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
                {
                    title               : 'Select forms',
                    xtype               : 'grid',
                    itemId              : 'mygridleftgraphic',
                    id                  : 'mygridleftgraphic',
                    store               : 'PP.store.chart.GridLeftGraphics',
                    frame               : false,
                    margin              : '0 0 0 0',
                    region              : 'center',
                    collapsible         : false,
                    collapsed           : false,
                    hideCollapseTool    : false,
                    columnLines         : true,
                    multiSelect         : true,
                    selType             : 'rowmodel',
 
                    verticalScrollerType        : 'paginggridscroller',
                    invalidateScrollerOnRefresh : false,
 
 
                    viewConfig: {
                        stripeRows      : true,
                        emptyText       : 'No Record Found',
                        deferEmptyText  : false,
                        forceFit        : true
                    },
                    columns: [
                        { text: 'Name', flex: 1, sortable: true, dataIndex: 'name' }, 
                        { text: 'F.', width: 40, sortable: true, dataIndex: 'f'}
                    ],
                    selModel: Ext.create('Ext.selection.CheckboxModel',
                        {
                            checkOnly: true //false = select from anywhere on row
                        }
                    )                      
                }

CONTROLLER

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
    onBeforeRender: function() {
 
// Mes variables sont définies ici mais j'ai virer le code pour afficher moins de ligne
 
 
        // Je vide le store de la Grille FORMS
        var myGridLeftGraphic = this.getRefGridLeftGraphic();
        var storeGLG = myGridLeftGraphic.getStore();
        storeGLG.removeAll();
 
        storeGLG.on('beforeload', 
            function(store, options) {
                store.getProxy().url = 'data/chart/getfreq.php';
                store.getProxy().extraParams = {
                    // Param pour MySQL
                    cid     : myCid,
                    lid     : myLid,
                    jsonid  : myId,
 
                    // Param pour info
                    multivalue      : 1,
                    isdate          : 0,
                    is4digit        : 0,
 
                    // Param pour SOLR
                    q       : CurrentQuery,
                    fl      : 'ap',
                    facet   : (CurrentFacet!=='') ? 'true' : 'false',
                    fq      : CurrentFacet
                };
            }, 
            this
        );
 
        storeGLG.load({
            scope   : this,
            params  : {},                
            callback: function(records, operation, success) {
                if (success) {}
            }
        });
 
    },

24/02/2015, 10h45
sekaijin

Comment la vue est-elle fermée et réouverte.

j'ai eu par le passé sur certains composant un comportement inattendu

c'était dû au fait que lors du deuxième affichage certain élément du composant étaient recrée mais que les handler référençais toujours les anciens.

que dit la console Javascript ?
sous chrome https://chrome.google.com/webstore/d...cglkceae?hl=fr
peut t'aider à y voir plus clair.

A+JYT
24/02/2015, 12h19
Bruno13
Salut Sekaijin,

Ma vue est créée depuis le click sur un bouton présent sur un panel de la manière suivante:
Code:

1 2 var myWinAdvGraphic = Ext.create('PP.view.chart.MyAdvGraphic', {}); myWinAdvGraphic.show();
Et pour la fermeture, j'avoue que j'utilise tout simplement la croix rouge (pour l'instant).

Donc à chaque fois que je click sur le bouton "Graphic" de mon panel, je fais un create de MyAdvGraphic.

Pour la console, je suis sous FF avec FireBug, je n'ai aucun message d'erreur, juste mes requêtes pour aller chercher les données qui remplissent ma grille.

Penses tu que ma "gestion" d'ouverture fermeture de ma fiche est mauvaise?
Je pensais que la fermeture faisait un "Free" de ma fiche, ce n'est pas le cas ?

d'avance merci pour ton aide,
Bruno
24/02/2015, 14h16
Bruno13

Dans mon investigation, je peux maintenant confirmé que ma fenêtre est bien en closeAction: destroy

Et je vois aussi que je ne suis pas le seul à avoir des comportements étranges après la fermeture-ré-ouverture d'une window.

J'ai peut être une piste sur les id et itemId..mais c'est très flou...

Je reste bien sûr en alerte si tu as un conseil ou deux :)
24/02/2015, 14h17
sekaijin
si je comprend ta vue PP.view.chart.MyAdvGraphic' est une xt.panel.Panel ou un dérivé

il te faut ajouter l'attribut

Code:

closeAction : 'hide'

et utiliser quelque chose comme
Code:

1 2 var view = Ext.widget('MyAdvGraphic'); view.show();
tu a un exemple détaillé dans
http://docs-origin.sencha.com/extjs/...n_architecture

Code:

editUser: function(grid, record) {

dans cet exemple le clic sur une ligne ouvre une fenêtre contenant les info d'un user

A+JYT
24/02/2015, 14h24
Bruno13

Alors je ne sais pas si c'est normal ou pas mais lors du premier click sur le bouton pour montrer ma fenêtre qui contient ma grille, j'ai dans ma console:
+GET http://127.0.0.1/application/view/ch...=1424784037296

je ferme ma fenêtre, donc un destroy...

puis un nouveau click sur mon bouton pour ouvrir de nouveau la fenêtre et là je n'ai pas de GET qui se génère, est-ce normal ?
24/02/2015, 14h40
sekaijin

oui la première fois il charge le code source de ta classe
la suivante il l'a déjà il n'a pas besoin de la charger de nouveau

A+JYT

jusqu'à présent j'utilisé le closeAction par défaut donc 'destroy' si je ne me trompe pas, et j'ai bien vérifié j'ai bien closeAction = destroy dans ma console.

Juste une question alors, lors du premier click sur mon bouton, Ext.widget('MyAdvGraphic'); n'existe pas non ?
il faut que je fasse un create c'est ça ?

un truc du genre:
Code:

1 2 3 4 5 6 var view = Ext.widget('PP.view.chart.MyAdvGraphic'); console.log(view); if (view===null) { view = Ext.create('PP.view.chart.MyAdvGraphic', {}); } view.show();

24/02/2015, 15h04
Bruno13
c'est bon ça MARCHE !!!

j'ai ajouté closeAction = 'hide'

j'ai ajouté ma views dans le controller qui contient le bouton

et j'ai mis sur le onclick:
Code:

1 2 var view = Ext.widget('winadvgraphic'); view.show();
Merci sekeijin !!! et en plus j'ai rendu les choses plus claires dans mon esprit ;)
24/02/2015, 15h50
sekaijin

Oui pas besoin de create si la vue n'existe pas il la crée tout seul.

A+JYT