Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4059 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    137
    Vote Rating
    3
    rickybobby is on a distinguished road

      0  

    Exclamation Problem with ExtJS 4.0.6 CheckboxModel and Compat Layer

    Problem with ExtJS 4.0.6 CheckboxModel and Compat Layer


    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

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    137
    Vote Rating
    3
    rickybobby is on a distinguished road

      0  

    Default


    bump

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    137
    Vote Rating
    3
    rickybobby is on a distinguished road

      0  

    Default


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

    Thank you,
    Cetova

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,170
    Vote Rating
    674
    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


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