Problem with ExtJS 4.0.6 CheckboxModel and Compat Layer

**rickybobby** · 17 Sep 2011 7:16 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.0.6

Browser versions tested against:

FF6.0.2 (firebug 1.8.3 installed)

DOCTYPE tested against:

Transitional

Description:

When using the compatibility module and an Ext.grid.Panel with the selType or selModel being a CheckboxModel an error occurs in Observer.

Steps to reproduce the problem:

See code

The result that was expected:

A rendered grid with checkboxes in the first column

The result that occurs instead:

An error in the firebug console, item is undefined
error source line: Break On This Error item.on(ename, fn, scope, options);

Test Case:

Code:

Ext.onReady(function(){
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'}
         ]
    });
    // Array data for the grids
    Ext.grid.dummyData = [
        ['3m Co',71.72,0.02],
        ['Alcoa Inc',29.01,0.42],
        ['Altria Group Inc',83.81,0.28],
        ['American Express Company',52.55,0.01]
    ];
    var getLocalStore = function() {
        return Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
        
        });
    };

    var sm = Ext.create('Ext.selection.CheckboxModel');
    Ext.create('Ext.grid.Panel', {
        store: getLocalStore(),
        selModel: sm,
        columns: [
            {text: "Company", width: 200, dataIndex: 'company'},
            {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {text: "Change", dataIndex: 'change'}
        ],
        width: 600,
        height: 300,
        title: 'Framed with Checkbox Selection and Horizontal Scrolling',
        renderTo: Ext.getBody()
    });
});

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grid Plugins Example</title>

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script type="text/javascript" src="../../ext3-core-compat.js"></script>
    <script type="text/javascript" src="../../ext3-compat.js"></script>
    <script type="text/javascript" src="grid-plugins.js"></script>
</head>
<body>example</body>
</html>

Operating System:

Windows 2008 Server R2 x64

**rickybobby** · 19 Sep 2011 4:51 AM

**rickybobby** · 13 Oct 2011 11:19 AM

Is this going to be in 4.0.7? We really need this in that release.

Thank you,
Cetova

**evant** · 13 Oct 2011 12:56 PM

The issue exists in the compat library, not the base. For those looking for a solution, the selection model binding needs to happen in afterRender. The AbstractView code should read:

Code:

if (Ext.view.AbstractView) {
        Ext.apply(Ext.view.AbstractView.prototype, {
            initComponent : function(){
                var isDef = Ext.isDefined;
                if (!isDef(this.tpl) || !isDef(this.store) || !isDef(this.itemSelector)) {
                    throw "DataView requires tpl, store and itemSelector configurations to be defined.";
                }
                Ext.view.AbstractView.superclass.initComponent.call(this);
                if(Ext.isString(this.tpl) || Ext.isArray(this.tpl)){
                    this.tpl = new Ext.XTemplate(this.tpl);
                }
                
                if (isDef(this.overClass)){
                    deprecate({pkg:'DataView', member:'overClass', alt:'overItemCls', type:'config'});
                    this.overItemCls = this.overClass;
                    delete this.overClass;
                }
                if (isDef(this.overCls)){
                    deprecate({pkg:'DataView', member:'overCls', alt:'overItemCls', type:'config'});
                    this.overItemCls = this.overCls;
                    delete this.overCls;
                }
                if (isDef(this.selectedClass)){
                    deprecate({pkg:'DataView', member:'selectedClass', alt:'selectedItemCls', type:'config'});
                    this.selectedItemCls = this.selectedClass;
                    delete this.selectedClass;
                }
                if (isDef(this.selectedCls)){
                    deprecate({pkg:'DataView', member:'selectedCls', alt:'selectedItemCls', type:'config'});
                    this.selectedItemCls = this.selectedCls;
                    delete this.selectedCls;
                }
                
                this.addEvents(
                    'beforerefresh',
                    'refresh'
                );
                this.addCmpEvents();
                this.store = Ext.data.StoreManager.lookup(this.store);
                this.all = new Ext.CompositeElementLite();
            },
            
            afterRender: function(){
                Ext.view.AbstractView.superclass.afterRender.call(this);
                this.getSelectionModel().bindComponent(this);
            }
        });
    }

Problem with ExtJS 4.0.6 CheckboxModel and Compat Layer

Thread Tools

Search Thread

Display

Problem with ExtJS 4.0.6 CheckboxModel and Compat Layer

Problem with ExtJS 4.0.6 CheckboxModel and Compat Layer

Tags for this Thread