[FIXED-186] Not Including CheckboxSelectionModel In Column Model

[ciw1973]

When adding a CheckboxSelectionModel to a grid it looks fine in the designer, but when the exported project is run in the browser the checkbox column is missing because it's not being included in the column model.

I appreciate that this can't be done using entirely declarative syntax as you need two references (selModel and a column) to the same selection model, so the exported .ui.js code would need to declare the column model before the main object and then reference it in the declaration.

Currently I'm having to add the code below to the corresponding .js file after initialization, which is hardly a major pain, more a minor irritation.

this.MyGrid.colModel.config.unshift(this.MyGrid.selModel);

[jarrednicholls]

That's actually not true, the selModel is included in the exported code. It is identical to the code you see generated in the Code->Class tab:

/*
 * File: MyGrid.ui.js
 * Date: Thu Jul 15 2010 23:22:55 GMT-0400 (EDT)
 * 
 * This file was generated by Ext Designer version xds-1.0.2.5.
 * http://www.extjs.com/products/designer/
 *
 * This file will be auto-generated each and everytime you export.
 *
 * Do NOT hand edit this file.
 */

MyGridUi = Ext.extend(Ext.grid.GridPanel, {
    title: 'My Grid',
    width: 400,
    height: 250,
    initComponent: function() {
        this.selModel = new Ext.grid.CheckboxSelectionModel({

        });
        this.columns = [
            this.selModel,
            {
                xtype: 'gridcolumn',
                dataIndex: 'string',
                header: 'Column',
                sortable: true,
                width: 100
            },
            {
                xtype: 'numbercolumn',
                dataIndex: 'number',
                header: 'Column',
                sortable: true,
                width: 100,
                align: 'right'
            },
            {
                xtype: 'datecolumn',
                dataIndex: 'date',
                header: 'Column',
                sortable: true,
                width: 100
            },
            {
                xtype: 'booleancolumn',
                dataIndex: 'bool',
                header: 'Column',
                sortable: true,
                width: 100
            }
        ];
        MyGridUi.superclass.initComponent.call(this);
    }
});

This has been the case since version 1.0.2.1, released a week ago.

[ciw1973]

I'm running v1.0.2.5 and whilst the checkbox column does show correctly in the code preview, it's missing in the generated .ui.js file. I guess this explains why it appears up on the design surface but not the designer preview or the browser.

As I'm working on an old project which was created with v1.0.1, I've just created a new minimal project but it still doesn't work.

I've attached this quick test project which is missing things like a store etc., but you'll see that the problem is still there for me.

[jarrednicholls]

True enough, thanks ciw1973. As a workaround, you can do a "Promote to Class" on your GridPanel. When the GridPanel is a root component, the selModel will properly be added into the column model, as you see in my code segment above. It becomes quite tricky when the GridPanel is a JSON configured child item of some other component. I will figure out a solution to this however.

Thanks again!

[wemerson.januario]

When we add a checkbox SelModel, in designer appear to be ok. But when we test in the real application it does not appers.
Ok. if I add this

this.grid.colModel.config[0]= this.grid.selModel;

it works .
But the config on position[1] destroy. Why?

I am fixing this using this.
this.grid.colModel.config.unshift(this.grid.selModel);
is it the better Way?

[jarrednicholls]

Yes use unshift(), it will append the selModel to the beginning of the colModel config instead of overwriting the first index.

If it isn't showing up in the real application, did you do what I suggested? That is, did you promote the GridPanel to a class of its own? If you do that, it will generate the proper code and work for you.

[wemerson.januario]

Yes use unshift(), it will append the selModel to the beginning of the colModel config instead of overwriting the first index.

If it isn't showing up in the real application, did you do what I suggested? That is, did you promote the GridPanel to a class of its own? If you do that, it will generate the proper code and work for you.

Thanks Jarred.

[dotnetwise]

I have written a nicer work-around in the main (grid) class

Sen.search.Grid = Ext.extend(Sen.search.GridUi, {
	initComponent: function () {
		Sen.search.GridUi.superclass.initComponent = Sen.search.GridUi.superclass.initComponent.createInterceptor(function () {
			this.columns.splice(0, 0, this.selModel);
		}, this);
		Sen.search.Grid.superclass.initComponent.call(this);
	}
});