Discussion :

[mixday]

Bonjour à tous,

Je me casse la tête sur un bug que je n'arrive pas à résoudre depuis un moment. J'ai plusieurs GridPanel dans une même page et lorsque je sélectionne une ligne d'un GridPanel ça me sélectionne une ligne d'un autre GridPanel

Sachant que c'est toujours le dernier GridPanel qui prend la sélection.

Mon composant grid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
Ext.ns('App');
 
AppGrid = Ext.extend(Ext.grid.EditorGridPanel, {
    frame: false,
    stripeRows: false,
    columnLines: false,
    enableHdMenu: false,
    //plugins: 'rowexpander',
    loadMask: { msg: "Chargement des données en cours..." },
    border: false,
 
    win: null,
    gridConfig: null,
 
    sm: new Ext.grid.CheckboxSelectionModel({ singleSelect: false,
        listeners: {
            // On selection change, set enabled state of the removeButton
            // which was placed into the GridPanel using the ref config
            selectionchange: function (sm) {
                if (sm.getCount() == 0) {
                    sm.grid.editButton.setDisabled(true);
                    sm.grid.delButton.setDisabled(true);
                } else if (sm.getCount() == 1) {
                    sm.grid.editButton.setDisabled(false);
                    sm.grid.delButton.setDisabled(false);
                } else {
                    sm.grid.editButton.setDisabled(true);
                    sm.grid.delButton.setDisabled(false);
                }
            }
        }
    }),
 
    initComponent: function () {
 
        this.viewConfig = {
            forceFit: true
        };
 
        // build toolbars and buttons.
        this.tbar = this.buildTopToolbar();
        this.bbar = new Ext.PagingToolbar({
            pageSize: this.gridConfig.DEFAULT_PAGING_LIMIT,
            store: this.store,
            displayInfo: true,
            displayMsg: '{1} sur {2}',
            emptyMsg: "Cette liste est vide"
        });
 
        this.win = new AppWindow({ store: this.store, gridConfig: this.gridConfig });
 
        if (!this.columns[0])
            this.columns[0] = this.sm;
 
        // super
        AppGrid.superclass.initComponent.call(this);
 
        this.addListener("RowDblClick", this.onEdit, this);
    },
 
    /**
    * buildTopToolbar
    */
    buildTopToolbar: function () {
        return [{
            text: 'Ajouter',
            iconCls: 'button-add',
            handler: this.onCreate,
            ref: '../addButton',
            disabled: (this.gridConfig.URI_CREATE == undefined || this.gridConfig.URI_CREATE == ''),
            scope: this
        }, '-', {
            text: 'Modifier',
            iconCls: 'button-edit',
            ref: '../editButton',
            disabled: true,
            handler: this.onEdit,
            scope: this
        }, '->', {
            text: 'Supprimer',
            iconCls: 'button-del',
            ref: '../delButton',
            disabled: true,
            handler: this.onDelete,
            scope: this
        }];
    },
 
    /**
    * onCreate
    */
    onCreate: function (btn, ev) {
        this.win.setMode('add');
        this.win.setDisabled(false);
        this.win.formPanel.getForm().reset();
        this.win.show();
    },
 
    /**
    * onEdit
    */
    onEdit: function (btn, ev) {
 
        if (!this.sm.getSelected())
            return;
 
        this.win.setRecord(this.sm.getSelected());
        this.win.setMode('edit');
        this.win.setDisabled(false);
        this.win.show();
    },
 
    /**
    * onDelete
    */
    onDelete: function (btn, ev) {
 
        Ext.Msg.confirm('Suppression', 'Voulez-vous vraiment supprimer cet élement ?', function (btn, text) {
            if (btn == 'yes') {
                if (!this.sm.getSelected()) {
                    return;
                }
 
                var selections = this.sm.getSelections();
 
                for (var i = 0; i < selections.length; i++) {
                    var id = selections[i].data[this.gridConfig.uniqueIdentifier];
                    var lang = selections[i].data["LangName"];
 
                    Ext.Ajax.request({
                        method: "GET",
                        url: this.gridConfig.URI_DELETE + "/" + id + (lang != undefined ? "/" + lang : ""),
                        scope: this,
                        success: function (resp, opts) {
                            var response = Ext.decode(resp.responseText);
 
                            if (response.success == "false") {
                                Application.alert(response.message);
                                return;
                            }
                            opts.scope.store.reload();
                        },
                        failure: function () {
                            Application.alert("Echec de la suppression");
                        }
                    });
                }
            }
        }, this);
    }
});

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
function createAuthGrid() {
   // La même que createRolesGrid() 
}
 
function createUsersGrid() {
   // La même que createRolesGrid() 
}
 
function createRolesGrid() {
 
  var rolesGridConfig = {
 
        URI_READ: ROOT_PATH + 'Roles/Read',
        URI_CREATE: ROOT_PATH + 'Roles/Create',
        URI_UPDATE: ROOT_PATH + 'Roles/Edit',
        URI_DELETE: ROOT_PATH + 'Roles/Delete',
 
        DEFAULT_PAGING_START: 0,
        DEFAULT_PAGING_LIMIT: 15,
 
        // To delete
        uniqueIdentifier: "RoleId",
 
        // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
        userColumns: [
        /* emplacement reservé */,
           { header: "Rôle", sortable: true, dataIndex: 'RoleName' },
           { header: "Description", sortable: false, dataIndex: 'Description' }
        ],
 
        fieldsForm: [
           {
               name: 'RoleId',
               hidden: true,
               hideParent: true,
               hideLabel: true
           },
           {
               fieldLabel: 'Rôle',
               name: 'RoleName',
               disabled: true,
           },
           {
               fieldLabel: 'Description',
               name: 'Description'
           }
        ],
 
        // JsonReader : Notice additional meta-data params for defining the core attributes of your json-response
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalCount',
            successProperty: 'success',
            idProperty: 'RoleId',
            root: 'data',
            messageProperty: 'message'  // <-- New "messageProperty" meta-data
        }, [{
            name: 'RoleId'
        }, {
            name: 'RoleName'
        }, {
            name: 'Description'
        }
        ])
    };
 
    // Typical Store collecting the Proxy, Reader and Writer together.
    var rolesStore = new Ext.data.Store({
        id: 'store',
        totalProperty: 'totalCount',
        idProperty: 'RoleId',
        url: rolesGridConfig.URI_READ,
        reader: rolesGridConfig.reader
    });
 
    // create user.Grid instance (@see UserGrid.js)
    var rolesGrid = new AppGrid(
    {
        id: 'rolesGrid',
        store: rolesStore,
        columns: rolesGridConfig.userColumns,
        gridConfig: rolesGridConfig,
        border: false,
        autoHeight: true
    });
 
    // load the store 
    rolesStore.load({ params: { start: rolesGridConfig.DEFAULT_PAGING_START, limit: rolesGridConfig.DEFAULT_PAGING_LIMIT }, callback: function (r, opt, success) {
            if (!success) {
                Application.alert("Une erreur s'est produite lors du chargement des données.");
            }
        }
    });
 
    return rolesGrid;
}
 
Ext.onReady(function () {
 
    Ext.QuickTips.init();
    Ext.Ajax.disableCaching = false;
 
    /*
    * Tabs
    */
 
    var tabs = new Ext.TabPanel({
        renderTo: 'grid-panel',
        autoWidth: true,
        style: "margin-top: 1em",
        height: 415,
        activeTab: 2,
        frame: false,
        plain: true,
        border: false,
        items: [
            { title: 'Utilisateurs', items: createUsersGrid() },
            { title: 'Rôles', items: createRolesGrid() },
            { title: 'Authorisations', items: createAuthGrid() }
        ]
    });
});

[ovh]

Désolé de répondre si tard, mais j'ai rencontré exactement le même problème récemment et j'ai trouvé la solution aujourd'hui : ton SelectionModel doit être créé dans l'initComponent, et non directement en propriété de ta classe dérivée.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
initComponent: function(){
	var config = {
		sm: new Ext.grid.CheckboxSelectionModel({ singleSelect: false, ...});
		// tu peux mettre d'autres paramètres de config ici
	};
	Ext.apply(this, Ext.apply(this.initialConfig, config));
	// d'autres initialisations ici
	AppGrid.superclass.initComponent.apply(this, arguments);
}

Pour une explication je t'invite à voir cette page :
http://blog.extjs.eu/know-how/writin...in-ext-part-2/

D'autre part, évite d'utiliser les id si tu n'en as pas besoin (càd si tu n'appelles jamais tes composants avec Ext.getCmp), sinon si tu ouvres plusieurs fenêtres identiques tu vas avoir des surprises car des id identiques vont se retrouver chargés plusieurs fois et le comportement de ton IHM risque d'être bizarre
La solution est de laisser les id dynamiques générés par défaut par extjs ou alors d'employer la propriété itemId à la place.