PDA

View Full Version : Why does my ExtJS 4.2 grid with CheckboxModel stop working?



xjscrafter
2 Aug 2014, 8:17 AM
In the following grid when you first popup the window, you can select items with the checkboxes.

But if you click OK to close the popup, and then click to launch it again, the checkboxes do not seem to work.

If you close the popup and launch it again, the checkboxes you just clicked on are now selected/deselected.

If I set closeAction to 'hide' on the window this issue goes away, but then don't I lose the value of the default closeAction of destroy?


In fact, not destroying the window and re-creating it every time messes up other stuff, so setting closeAction to hide does not work in my real app.

When closeAction is set to destroy, when a grid row checkbox is clicked, at least these three events are dispatched: itemclick, cellclick, select. But when closeAction is set to hide, the select event is not dispatched.




Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
mode: "MULTI"
}),
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{name: 'one'},
{name: 'two'},
{name: 'three'}
]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp){
comp.up('window').close();
}
}]
});


Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'button',
width: 50,
text: 'Click',
handler: function(){
Ext.create('MyPopup').show();
}
}]
}]
});
});

skirtle
2 Aug 2014, 6:34 PM
The selection model is being destroyed. Don't put instances on the prototype, use a config instead.

http://skirtlesden.com/articles/config-objects-on-the-prototype

You just need selType: 'checkboxmodel'.

xjscrafter
2 Aug 2014, 11:29 PM
Thanks for your response. But I'm wondering how I would specify properties of the selection model, for example checkOnly and mode?


selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
mode: "MULTI"
})

xjscrafter
2 Aug 2014, 11:30 PM
Got the answer from stack overflow, but thanks for your contribution:


selType:'checkboxmodel', selModel: { checkOnly: false, mode: "MULTI" }