1. #1
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default Bug in a checkboxmodel if used in a tabpanel

    Bug in a checkboxmodel if used in a tabpanel


    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:
    Code:
         /**
         * 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

  2. #2
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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.

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

  5. #5
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default


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

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

  6. #6
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default


    Man, you´re completely right!

    This works:

    Code:
    selModel: {     selType: 'checkboxmodel' }
    and this not:

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

  7. #7
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default


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

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

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Ext.define() is a class definition. That means anything declared there is shared across all instances of the object.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Sencha Premium Member mik3e's Avatar
    Join Date
    Jan 2012
    Location
    Vienna / Austria
    Posts
    81
    Vote Rating
    1
    mik3e is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread