Bug in a checkboxmodel if used in a tabpanel

[mik3e]

I think I found a bug in the current beta release of 4.1 (not sure, but maybe someone can confirm this):


REQUIRED INFORMATION Ext version tested:

• Ext 4.1.0 rev Beta 2

Browser versions tested against:

• FF 10.0
• Chrome 16.0

DOCTYPE tested against:

• HTML5

Description:

• If you use a grid with a CheckboxModel and this grid is placed in a tabpanel, than the checkboxmodel is missing if you close the tab and open it again.

Steps to reproduce the problem:

• Place a grid with a checkboxmodel in a tab
• Write a controller which loads the grid in the tab on an action (e.g. button click)
  {*] Open a tab - the checkboxmodel is shown
• Close the tab with the integrated icon
• Open it a second time -> The Checkboxmodel (-column) in the grid is missing

The result that was expected:

• A grid with the CheckboxModel

The result that occurs instead:

• Grid without CheckboxModel

Test Case: [*] This is the Controller I´m using to open the tab:

     /**
     * Reacts on a menu item click and loads the view xtype which is defined
     * at the menu item to the desired location.
     * 
     * @param {Ext.view.View} tablepanel The panel where the click event was fired.
     * @param {Ext.data.Model} record The record which belongs to the clicked item.
     * @param {HTMLElement} item The item´s element.
     * @param {Number} index The item's index.
     * @param {Ext.EventObject} e The raw event object
     * @param {Object} eOpts The options object passed to Ext.util.Observable.addListener.
     */
    doMenuItemClick: function(tablepanel, record, item, index, e, options) {

        var tabPanelMain = Ext.ComponentQuery.query('#tabpanel_main')[0];

        // Open tab only if the menu node is a leaf node
        if (record.isLeaf()) {

            // Load the new component in the main Tab Panel
            if (record.raw.loadTarget=='tabPanelMain') {

                tabPanelMain.add({
                    xtype: record.raw.loadxtype,
                    tabConfig: {
                        title:  record.raw.loadTitle,
                        tooltip: record.raw.loadToolTip,
                        closable: true
                    }
                }).show();
            }
        }
    },

HELPFUL INFORMATION Possible fix:

• I think there is a problem with remove and create of the tab and it´s content

Operating System:

• W7 64Bit

[mik3e]

What I just found out:
The same happens, if you open the grid in a second tab - no need to close the old one.

It looks like the CheckboxModel is only created one time and not for every new grid.

[evant]

Not totally sure but it sounds like you're placing the selection model in the class definition, as opposed to creating it for each instance. Can't really say since you didn't post that.

[slemmon]

When you define the grid are you using the selection model selType property to declare the checkboxmodel? If you use new/create/widget it gets destroyed and not recreated in the next instance, but if you use selType it'll be created fresh with each grid instance.

selModel: {
    selType: 'checkboxmodel'
    // plus any additional configs for the checkboxmodel
}

[mik3e]

Guys, sorry for forgetting the important part - my view
Here it goes:

Ext.define('LT.view.country.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.country_list',
    title: __('Countries'),
    store: 'Country',

    columns: [
    {
        ... Columns and other blalbla
    }] 
    selModel: Ext.create('Ext.selection.CheckboxModel', {})
});

Cheers,
Mike

[mik3e]

Man, you´re completely right!

This works:

selModel: {     selType: 'checkboxmodel' }

and this not:

selModel: Ext.create('Ext.selection.CheckboxModel', {});

Can anyone explain me the difference? Is the first solution a static call to the object?
Besides I would suggest to add the second solution to the documentation, cause I uses the "create" method directly from the docu.

Thanks a lot guys!

[mik3e]

For everyone who needs it:
Here is the way to use it also as multiselect:

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

[evant]

Ext.define() is a class definition. That means anything declared there is shared across all instances of the object.

[mik3e]

Yeah, I know ...
But I thought that isntantiated elements inside the class (like

Ext.create('Ext.selection.CheckboxModel', {}) are also newly instantiated on creation of the main object.

But this beahaviour looks more like I would expect from a singleton pattern.

[slemmon]

I believe you're good if you do the new/create/widget method inside of initComponent inside of define, too, but I just went the selType way myself.

BTW, MULTI should be the default and isn't. A bug has been opened in 4.1 Beta, so possibly will be fixed in the 4.1 final release.