Sélection des lignes dans un GridPanel

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 :calim2:

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

Mon composant grid :

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

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() }
        ]
    });
});