Checkcolumn throws error on IE when used within a window

[MAksoy]

REQUIRED INFORMATION Ext version tested:

• Ext 4.0.7

Browser versions tested against:

• IE8
• FF3

Description:

• Clicking on a CheckBox that is displayed in a grid within a window causes an error.
• The error only appears when the page is viewed with IE. No errors with FF.

Steps to reproduce the problem:

• Create a Grid with a checkcolumn
• Create a window that has the grid as items
• Display the window
• Check/Uncheck the Checkbox

The result that was expected:

• Status of the CheckBox should chnage to Checked/Unchecked withou error

The result that occurs instead:

• Status of the CheckBox changes with the error "'style' is null or no object

Test Case:

This is just a simplified Example.

    
Ext.define('modCars', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Brand', type: 'string' },
        { name: 'Model', type: 'string' },
        { name: 'available', type: 'bool'}]
});

var cars = Ext.create('Ext.data.Store', {
    model: 'modCars',
    data: [
        { Id: '1', Brand: 'BMW', Model: '1' },
        { Id: '2', Brand: 'BMW', Model: '3' },
        { Id: '3', Brand: 'BMW', Model: '5' },
        { Id: '4', Brand: 'BMW', Model: '7' }
    ]
});

var gridCars =
        Ext.create('Ext.grid.Panel', {
            store: cars
        , selModel: {
            selType: 'cellmodel'
        }
        , anchor: '100%, 100%'
        , plugins: [cellEditing]
        , columns: [
                        {
                            xtype: 'checkcolumn'
                             , header: ' '
                             , dataIndex: 'available'
                             , width: 50
                        }
                        ,
                        {
                            text: 'Id'
                            , dataIndex: 'Id'
                        }
                        ,
                        {
                            text: 'Brand'
                            , dataIndex: 'Brand'
                        }
                        ,
                        {
                            text: 'Model'
                            , dataIndex: 'Model'
                        }
                    ]
                    , dockedItems: [
                            {
                                dock: 'bottom',
                                xtype: 'toolbar',
                                items: [
                                            {
                                                text: Localize('All')
                                                , handler: function () {
                                                    autos.each(function (record) {
                                                        record.set('available', true);
                                                    });
                                                }
                                            }
                                            ,
                                            {
                                                text: Localize('None')
                                                , handler: function () {
                                                    autos.each(function (record) {
                                                        record.set('available', false);
                                                    });
                                                }
                                            }
                                    ]
                            }
                    ]
});

var windowCars = Ext.createWidget('window', {
                                    title: Localize('Cars')
                                    , closable: true
                                    , closeAction: 'hide'
                                    , resizable: false
                                    , width: 350
                                    , height: 350
                                    , layout: 'anchor'
                                    , bodyBorder: false
                                    , bodyStyle: 'padding: 5px;'
                                    , items: [gridCars]
});

Ext.define('clsFrmCars', {
    extend: 'Ext.form.Panel',
    layout: 'anchor',
    initComponent: function () {
        this.items =
            [
                {
                    xtype: 'container',
                    items:
                        [
                            {
                                xtype: 'button',
                                text: 'Show Window',
                                handler: function() {
                                    windowCars.show();
                                }
                            }
                        ]
                }
            ]
            clsFrmCars.superclass.initComponent.call(this);
    }
});

HELPFUL INFORMATION

Screenshot or Video:

Possible fix:

• not provided

Additional CSS used:

Operating System:

• Win7 Enterprise

[mitchellsimoens]

Have you checked against 4.1.0 RC2 (our latest release)? I cannot reproduce.

[anitacynax]

I am using Ext 4.0.7 as well and am having the same error. I have 3 checkcolumns, which are in a grid, which in turn is in a fieldset, which in turn is in a formpanel, which in turn is in a window. I have noticed though that if the formpanel is NOT exclosed in a window, no error is thrown when a checkbox in a checkcolumn is clicked. However, I need to enclose the formpanel in a window. @mitchellsimoens: you recommend using 4.1.0 RC2. I read the list of Bugs Fixed under that release and this one is not mentioned.

[anitacynax]

I just checked it against ext-4.1-rc3. Now I see the following text/message at the bottom left hand corner of the screen : "Logged Errors: 1 Warnings: 0 Info: 0 Log: 0" (see attached screenshot). What does this mean? Should this text appear there? Even if the grid with checkcolumns is left out of the fieldset or the formPanel is displayed on its own (without the window), the message is visible.

[evant]

rc3 was quite a long time ago. I tried the test case with 4.1.3 in IE and there is no error. You can grab it from the support portal. Marking as closed.

[anitacynax]

Thanks evant. I logged into he support portal but am unable to download Ext JS 4.1.3 - it says "IE cannot download ext-4.1.3.zip from support.sencha.com. The file could not be written to the cache".

EDIT: Though I was unable to download Ext JS 4.1.3 in IE (it gave the above error message), I was able to do so using Firefox. Now there are no more errors when checkbox in checkcolumn is checked/unchecked.