PDA

View Full Version : Problem with checkbox in gridpanel



Elfayer
22 Aug 2012, 2:09 AM
Hi,

I have a window with a tabpanel item. This tabpanel have 3 items which are 3 gridpanels :

38145

Each gridpanel, as you can see, have a checkbox:

selModel: Ext.create('Ext.selection.CheckboxModel'),

Now the problem is : What you see above is correct, but if I close that window and reopen it a second time I could see the grids but not the checkboxes ! (the checkboxes disappear) And then if I do it a third time, the window doesn't open any more. It is getting worse and worse. I have to recharge the app to have a correct display.

Do you have any idea of why it is doing that?
If you want more images or code, tell me.

Thanks in advance !

redraid
22 Aug 2012, 4:34 AM
Try this:
add to window config closeAction: 'hide', to show window use code like:


// global or controller var
var win = false;

if (!win) { win = // create window instance here}

win.show();

Elfayer
22 Aug 2012, 4:36 AM
I already tried with a hide/show instead of a create/close, but it shows, hides and never shows again..

Izhaki
22 Aug 2012, 4:54 AM
This happens because the selection model you provide as config returns a reference rather than an new instance.

An excellent and comprehensive explanation to why this happens is provided here (http://skirtlesden.com/articles/config-objects-on-the-prototype), so I won't repeat it in this post. You may also want to have a look at this discussion (http://stackoverflow.com/questions/6871594/best-practices-concerning-initcomponent-in-ext-define).

But in short, the rule is this:

If the component is to be used more than once,you should set non-primitive configs (ie, an object or array, as opposed to a string or an integer) in initComponent().

Elfayer
22 Aug 2012, 7:07 AM
I don't really understand what you mean, but:

selModel: { mode: 'MULTI' },

corrects the problem, but I lost the checkboxes (I can always select multiple lines)

Is there a way to keep the checkboxes? I smell that you have the answer, but sorry I didn't really understand.

Izhaki
22 Aug 2012, 8:16 AM
Instead of using a config:



selModel: Ext.create('Ext.selection.CheckboxModel')


In initComponent put:



this.selModel = Ext.create('Ext.selection.CheckboxModel');

Elfayer
22 Aug 2012, 11:52 PM
I tried to implement an

initComponent: function () { }

to add :

this.selModel = Ext.create('Ext.selection.CheckboxModel');

But I didn't find where to put the initComponent to get the : "this.selModel = Ext.create('Ext.selection.CheckboxModel');"


Ext.define('ADM.view.newsTargetSelector', {
extend: 'Ext.window.Window',
alias: 'widget.newsTargetSelector',

title: 'News Select Targets',
layout: 'fit',
draggable: false,
resizable: false,
width: 700,
height: 500,
items: {
xtype: 'tabpanel',
itemId: 'targetSelectorTabpanel',
bodyStyle: 'border:none;',
items: [{
title: 'Users',
items: {
xtype: 'gridpanel',
itemId: 'gridUsers',
> selModel: Ext.create('Ext.selection.CheckboxModel'),
store: 'Users',
columns: [{
header: '<center>Firstname</center>',
dataIndex: 'usr_firstname',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Lastname</center>',
dataIndex: 'usr_lastname',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Email</center>',
dataIndex: 'usr_email',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Company</center>',
dataIndex: 'usr_company',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}]
}
}, {
title: 'Applications',
items: {
xtype: 'gridpanel',
itemId: 'gridApplications',
> selModel: Ext.create('Ext.selection.CheckboxModel'),
store: 'Applications',
columns: [{
header: '<center>Parent Id</center>',
dataIndex: 'apl_id_parent',
align: 'center',
flex: 0.5,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Folder</center>',
dataIndex: 'apl_is_folder',
align: 'center',
flex: 0.5,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Label</center>',
dataIndex: 'apl_label',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Description</center>',
dataIndex: 'apl_description',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Icon</center>',
dataIndex: 'apl_icon',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}]
}
}, {
title: 'Companies',
items: {
xtype: 'gridpanel',
itemId: 'gridCompanies',
> selModel: Ext.create('Ext.selection.CheckboxModel'),
store: 'Companies',
columns: [{
header: '<center>Name</center>',
dataIndex: 'cmp_label',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}]
}
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ text: 'Select', itemId: 'SelectNewsTargetSelector' },
'-',
{ text: 'Cancel', itemId: 'CancelNewsTargetSelector' }
]
}
]
}
})

vietits
23 Aug 2012, 12:15 AM
Instead of using initComponent(), let try to change selModel: Ext.create('Ext.selection.CheckboxModel') to selType: 'checkboxmodel'

Elfayer
23 Aug 2012, 12:41 AM
I combined your idea with a selModel, and that's working !



selType: 'checkboxmodel',
selModel: { mode: 'MULTI' },