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.

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