PDA

View Full Version : Problem with Ext.selection.CheckboxModel



Delphine
26 Sep 2013, 2:00 AM
Hello,
I have a problem with Ext.selection.CheckboxModel.

I add this in my grid, which is contained in a window. When I open the window the first time, it works very well.

But, when I close the window, and I reopen the window, the checkbox are visible but when I click, they don't checked. And what is even more surprising is that when I reopen the window with the same elements, the box is checked.

Here the parameters of my grid


selType: 'rowmodel',
selModel: Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
Ext.getCmp('validall-button-grillemodif').setDisabled(selections.length === 0);
Ext.getCmp('supprall-button-grillemodif').setDisabled(selections.length === 0);
}
},
injectCheckbox:7 // position de la colonne des checkbox
}),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columnLines: true,


Thanks in advance for your help !

Farish
26 Sep 2013, 2:50 AM
you havent posted the complete code for the grid and window but from what I see, I can guess that this could be because of using id. what do you do when the window is closed? is it destroyed? also, when you reopen the window, do you create it new? if the same id is assigned twice and the components are not destroyed, then this could cause problems. try removing the ids and check if it works then.

Delphine
26 Sep 2013, 4:12 AM
Here my complete code for the grid :


Ext.define('KGest.view.grille.Modif', {
extend: 'Ext.grid.Panel',
xtype: 'grillemodif',
title: 'Elements déjà saisis',
store: 'sGrilleModif',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'toptoolbarService',
items: [
{
xtype: 'button',
id: 'save-button-grillemodif',
text: 'Sauver les modifications',
//iconCls: 'x-icon-save',
//iconAlign: 'right',
action: 'update',
dock: 'top',
scope: this,
width: 160
},
{
xtype: 'button',
id: 'supprall-button-grillemodif',
text: 'Suppr sélection',
iconCls: 'x-icon-save',
iconAlign: 'right',
action: 'supprall',
disabled: true,
dock: 'top',
scope: this,
width: 160
},
{
xtype: 'button',
id: 'validall-button-grillemodif',
text: 'Valide sélection',
iconCls: 'x-icon-save',
iconAlign: 'right',
action: 'validall',
disabled: true,
dock: 'top',
scope: this,
width: 160
}
]
}
],
selType: 'rowmodel',
selModel: Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
Ext.getCmp('validall-button-grillemodif').setDisabled(selections.length === 0);
Ext.getCmp('supprall-button-grillemodif').setDisabled(selections.length === 0);
}
},
injectCheckbox:7 // position de la colonne des checkbox
}),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columnLines: true,
viewConfig: {
deferEmptyText: false,
emptyText: 'Aucune donnée déjà saisie'
},
initComponent: function() {
var me = this;
// On continue la définition des membres de la classe ici car
// on a besoin d'être au run-time (on a besoin d'utiliser "this"
// par exemple)


Ext.apply(me, {
/**
* Définition des colonnes de notre tableau. On fait correspondre le
* "dataIndex" avec des noms de champ de notre modèle "Post".
* @property columns
* @type {Array}
*/
columns: [
{
text: 'UID',
dataIndex: 'uid',
hidden: true,
allowBlank: false
},
{
text: 'Journée',
dataIndex: 'journee',
allowBlank: false,
xtype: 'datecolumn',
format: 'd/m/Y',
width: 100,
editor: {
xtype: 'datefield',
submitFormat: 'Y-m-d'
}
},
{
text: 'Type de jour',
dataIndex: 'uid_types_saisies',
flex: 1,
editor: {
xtype: 'combobox',
store: Ext.create('KGest.store.sTypesJours'),
valueField: 'uid',
displayField: 'libelle',
typeAhead: true,
queryMode: 'remote',
emptyText: 'Sélectionnez un type de jour'
},
renderer: function(val) {
if (val > 0) {
var srvStore = Ext.getStore('sTypesJours');
detail = srvStore.query('uid', val, false, false, true);
sortie = detail.getAt(0).data.code;
}
return sortie;
}
},
{
text: '1/2<br/>jour',
dataIndex: 'demi_jour',
xtype: 'checkcolumn',
width: 50
},
{
text: 'Commentaire',
width: 100,
dataIndex: 'observation',
editor: {
xtype: 'textfield'
}
},
{
text: 'Etat',
width: 50,
xtype: 'actioncolumn',
dataIndex: 'uid_statut',
/*editor: {
xtype: 'combobox',
store: Ext.create('KGest.store.sStatut'),
valueField: 'uid',
displayField: 'libelle',
typeAhead: true,
queryMode: 'local',
emptyText: 'Sélectionnez un statut'
},*/
handler: function(grid, rowIndex, colIndex) {
var record = grid.store.getAt(rowIndex);
var statut = record.get('uid_statut');
statut = (parseInt(statut) % 4) + 1;
record.set('uid_statut', statut);
},
renderer: function(val) {
if (val == 1) {
this.items[0].icon = Ext.Loader.getPath('Img') + "/fam/error.gif";
this.items[0].tooltip = 'En attente de validation';
} else if (val == 2) {
this.items[0].icon = Ext.Loader.getPath('Img') + "/fam/accept.gif";
this.items[0].tooltip = 'Validé';
} else if (val == 3) {
this.items[0].icon = Ext.Loader.getPath('Img') + "/fam/cross.gif";
this.items[0].tooltip = 'Refusé';
} else if (val == 4) {
this.items[0].icon = Ext.Loader.getPath('Img') + "/fam/hourglass.png";
this.items[0].tooltip = 'En attente de bascule dans Kiela';
}
}
},
{
text: 'Suppr',
xtype: 'actioncolumn',
width: 50,
id: 'grillemodif_suppr',
items: [
{
icon: Ext.Loader.getPath('Img') + '/fam/delete.gif',
tooltip: 'Supprimer'
}
]
}
]
});
me.callParent(arguments);
}
});



And here, the complete code for the window :


Ext.define('KGest.view.grille.Ajout', {
//extend: 'Ext.form.Panel',
extend: 'Ext.window.Window',
autoshow: true,
layout: 'fit',
xtype: 'grilleajout',
title: 'Ajouter des éléments',
store: 'sGrilleAjout',
height: 600,
width: 600,
initComponent: function() {
var me = this;
// On continue la définition des membres de la classe ici car
// on a besoin d'être au run-time (on a besoin d'utiliser "this"
// par exemple)
me.items = [
{
xtype: 'form',
//bodyPadding: 10,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 120,
anchor: '100%'
},
layout: {
type: 'border'
},
items: [
{
xtype: 'panel',
region: 'north',
items: [
{
xtype: 'hiddenfield',
fieldLabel: 'UID salariés',
name: 'uid_salaries',
id: 'uid_salaries',
allowBlank: false
},
{
xtype: 'displayfield',
fieldLabel: 'Salarié',
name: 'salarie',
fieldStyle: 'font-size:20px'
}
]
},
{
xtype: 'panel',
region: 'center',
title: 'Nouvelle saisie',
bodyPadding: 10,
items: [
{
xtype: 'datefield',
fieldLabel: 'Date de début',
name: 'date_debut',
id: 'date_debut_grilleAjout',
format: 'd/m/Y',
submitFormat: 'Y-m-d',
listeners: {
change: {
fn: function() {
if (Ext.getCmp('date_debut_grilleAjout').isValid() && Ext.getCmp('date_fin_grilleAjout').isValid()) {
if (Ext.getCmp('date_debut_grilleAjout').getValue() <= Ext.getCmp('date_fin_grilleAjout').getValue()) {
var tabFilter = new Array();
tabFilter[0] = {"property": "date_debut", "value": Ext.getCmp('date_debut_grilleAjout').getSubmitValue()};
tabFilter[1] = {"property": "date_fin", "value": Ext.getCmp('date_fin_grilleAjout').getSubmitValue()};
tabFilter[2] = {"property": "uid_users", "value": Ext.getCmp('uid_salaries').getSubmitValue()};
Ext.getStore('sGrilleModif').getProxy().extraParams.filter = JSON.stringify(tabFilter);
Ext.getStore('sGrilleModif').load();
}
}
}
}
}
},
{
xtype: 'datefield',
fieldLabel: 'Date de fin',
name: 'date_fin',
id: 'date_fin_grilleAjout',
format: 'd/m/Y',
submitFormat: 'Y-m-d',
listeners: {
change: {
fn: function() {
if (Ext.getCmp('date_debut_grilleAjout').isValid() && Ext.getCmp('date_fin_grilleAjout').isValid()) {
if (Ext.getCmp('date_debut_grilleAjout').getValue() <= Ext.getCmp('date_fin_grilleAjout').getValue()) {
var tabFilter = new Array();
tabFilter[0] = {"property": "date_debut", "value": Ext.getCmp('date_debut_grilleAjout').getSubmitValue()};
tabFilter[1] = {"property": "date_fin", "value": Ext.getCmp('date_fin_grilleAjout').getSubmitValue()};
tabFilter[2] = {"property": "uid_users", "value": Ext.getCmp('uid_salaries').getSubmitValue()};
Ext.getStore('sGrilleModif').getProxy().extraParams.filter = JSON.stringify(tabFilter);
Ext.getStore('sGrilleModif').load();
}
}
}
}
}
},
{xtype: 'combo',
store: 'sTypesJours',
valueField: 'uid',
displayField: 'libelle',
typeAhead: true,
queryMode: 'local',
emptyText: 'Sélectionnez un type de jour ...',
fieldLabel: 'Types jour',
name: 'uid_type_jour',
id: 'ajout-typejour',
width: 400
},
{
xtype: 'checkboxfield',
fieldLabel: 'Demi journée',
name: 'demi_jour',
inputValue: true
},
{
xtype: 'checkboxfield',
fieldLabel: 'Basculé dans Kiela',
name: 'valide_kiela',
inputValue: true
},
{
xtype: 'button',
text: 'Ajouter',
//formBind: true, //only enabled once the form is valid
//disabled: true,
id: 'add-grilleajout',
action: 'add'
}
]
},
{
region: 'south',
layout: 'fit',
flex: 1,
xtype: 'grillemodif'
}
]
}
];
me.buttons = [
{
text: 'Quitter',
id: 'reset-grilleajout',
action: 'reset',
scope: this
}
];
me.callParent(arguments);
}


});

When I close the window, we try this but it doesn't matter (no message error but the checkbox can't be checked after the first time) :


closeModif: function(view) {
this.getStore('sGrilleModif').removeAll();
var test = Ext.ComponentQuery.query('grillemodif');
console.log(test);
Ext.destroy(test[0]);
var test = Ext.ComponentQuery.query('grilleajout');
console.log(test);
Ext.destroy(test[0]);


}

I don't understand what is wrong ......

Thanks in advance for your help