check box column view in grid Panel

[asics167]

Hello! please help me.. my Architect 2.1.0 build 678.
I have gridpanel in my project..

 dockedItems: [
                                        {
                                            xtype: 'gridpanel',
                                            dock: 'left',
                                            hidden: false,
                                            id: 'grPanelAlert',
                                            itemId: 'grPanelAlert',
                                            title: '??????????',
                                            store: 'stAlert',
                                            viewConfig: {
                                                itemId: 'grViewAlert'
                                            },
                                            plugins: [
                                                Ext.create('Ext.grid.plugin.CellEditing', {
                                                    ptype: 'cellediting',
                                                    clicksToEdit: 1
                                                })
                                            ],
                                            columns: [
                                                {
                                                    xtype: 'booleancolumn',
                                                    autoRender: true,
                                                    maxWidth: 30,
                                                    width: 30,
                                                    defaultWidth: 30,
                                                    dataIndex: 'fcheck',
                                                    text: '???.',
                                                    editor: {
                                                        xtype: 'checkboxfield',
                                                        boxLabel: 'Box Label'
                                                    }
                                                },
                                                {
                                                    xtype: 'gridcolumn',
                                                    hidden: true,
                                                    dataIndex: 'fSotrId',
                                                    text: 'FSotrId'
                                                }, .. etc
 ],
                                            selModel: Ext.create('Ext.selection.CellModel',

with first boolean column.. i want use selection model - cell select.. ( only!)
grid.png
i see column with word - true or false ...
but i want see checkbox..
i think - cant see checkbox because : xtype: 'booleancolumn',
instead of xtype: 'checkbox'..
and only i edit column i can see checkbox

grid-edit.png

please help me - i want see checkbox all the time - view and edit

[asics167]

no ideas? up..

[berntkau]

Hi asics167!

This is a problem which has been discussed in several occasions in the past. When I studied the api docs of extjs 4.2 I was happy to see that the previously 'CheckColumn' extension now was incorporated in the framework, but, alas Architech 2.2 does not have any knowing of it. I hope it will be fixed very soon!

Until then You can try this:

1. Drag a Grid.column.Column to your project inspector.
2. Promote it to class and name it e.g. userClassName: CheckColumn, userAlias ChkCol
3. Create a class override:

Ext.define('MyApp.view.override.CheckColumn', {
override: 'MyApp.view.CheckColumn',
......
From the framwork copy the contents of the Ext.grid.column.CheckColumn class.
starting with line alternateClassName. and paste it here.
.....
});

As the CheckColumn is now a part of the framework I believe that the necessary CSS styles are included in the frameworks CSS-file so it should work.

Link the overridden column to grids an do appropriate property adjustments like adding the dataIndex . And I hope it will work for you.

[asics167]

hello berntkau
yesterday the whole day tried to make according to your advice. But I couldn't pass to extJs 4.2 - many Panel Grid in my project lost headings, width of columns and sometimes and visibility. Probably 4.2 it isn't finished yet.
try on 4.1 - with addition necessary
css styly in my local file (with images to image/form/checkbox.gif)

.x-grid-cell-checkcolumn  {
  padding-top: 3px !important;
  padding-bottom: 0!important;
  width: 13px;
  height: 13px;
  background: url(image/form/checkbox.gif) 0 0 no-repeat;
}

/* line 7, ../../../ext-theme-neutral/sass/src/grid/column/CheckColumn.scss */
.x-grid-checkcolumn {
  width: 13px;
  height: 13px;
  background: url(image/form/checkbox.gif) 0 0 no-repeat;
}
.x-grid-cell-special, .x-grid-cell-checkcolumn, .x-action-col-cell {
  vertical-align: top;
}
/* line 17, ../../../ext-theme-neutral/sass/src/grid/column/CheckColumn.scss */
.x-grid-checkcolumn1-checked {
  background-position: 0 -13px;
}

and :

1. Drag a Grid.column.Column to your project inspector. 
2. Promote it to class and name it e.g. userClassName: CheckColumn, userAlias ChkCol
3. Create a class override:

Ext.define('MyApp.view.override.CheckColumn', {
    override: 'MyApp.view.CheckColumn',
          ......
         From the framwork copy the contents of the Ext.grid.column.CheckColumn class.
         starting with line alternateClassName. and paste it here.
         .....
});

- its ok
but result:
IMG0055A.jpg

[asics167]

thanks.. iam waiting realy working extJS 4.2 - and real checkbox for grid view in Architect 2.2.??

[berntkau]

thanks.. iam waiting realy working extJS 4.2 - and real checkbox for grid view in Architect 2.2.??

Hi again asics167!

Really sorry to hear you didn't get the 'checkcolumn' to work. I've used different workarounds since extjs 3.x and haven't had any problems once I got code and logics in place.

Some points: The advice I gave was assuming you explicitely use extjs 4.2 as framework in your project.

If You use any other version of the framework you mentioned 4.1, then I would go to that version and seek the corresponding Ext.ux.CheckColumn class file and copy its content instead into the override you created.

In my custom css file I would then add the contents from a CheckHeader.css file which is included in a example where checkcolumn is used. Well there isn't so much stuff in there so here it is:
(this is extjs ver 4.1.3)
.x-grid-cell-checkcolumn .x-grid-cell-inner {
padding-top: 4px;
padding-bottom: 2px;
line-height: 14px;
}
.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner {
padding-top: 3px;
}
.x-grid-checkheader {
height: 14px;
background-image: url('images/unchecked.gif');
background-position: 50% -2px;
background-repeat: no-repeat;
background-color: transparent;
}


.x-grid-checkheader-checked {
background-image: url('images/checked.gif');
}


.x-grid-checkheader-editor .x-form-cb-wrap {
text-align: center;
}

(There seems to have been some bigger changes especially concerning the style classes in extjs 4.2. When I upgraded to 4.2 som of my old styles didn't take effect anymore.)
Note you have to use simple images unchecked.gif and checked.gif. The url above may not work without adjusting them to your application. You might need to search for them and copy them to a directory of choice.

If you already have tried this then just ignore my post. If not consider giving it one more try!

Happy Easter to You!

[asics167]

hello..
1. add to my css file row from CheckHeader.css (ux exampes)
2. promote to class my column fCheck - and set UserClassName - CheckColumn, userAlias->ChkCol

Ext.define('MyApp.view.CheckColumn', {
    extend: 'Ext.grid.column.Boolean',
    alias: 'widget.ChkCol',

    maxWidth: 100,
    width: 45,
    defaultWidth: 45,
    dataIndex: 'fcheck',
    text: '???.',
    falseText: '????.',
    trueText: '???.',
    undefinedText: '????.',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    }

});

3. in Launch of Application :

Ext.define('MyApp.view.override.CheckColumn', {
    override: 'MyApp.view.CheckColumn',
    extend: 'Ext.grid.column.Column',
    alias: 'widget.checkcolumn',

    /**
    * @cfg {Boolean} [stopSelection=true]
    * Prevent grid selection upon mousedown.
    */
    stopSelection: true,

    tdCls: Ext.baseCSSPrefix + 'grid-cell-checkcolumn',
.... from CheckBox.js - Ux-examle
        return '<div class="' + cls.join(' ') + '"> </div>';
    }
});

in FireBug html View i can see style for this cell - override work - class x-grid-cell-checkcolumn was added:

<td class="x-grid-cell-checkcolumn x-grid-cell x-grid-cell-ChkCol-1061   x-grid-cell-last">
<div class="x-grid-cell-inner " style="text-align: left; ;">
????.
</div>
</td>

but renderer function from override class - not work and style check - uncheck not add

  renderer : function(value){
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'];

        if (value) {
            cls.push(cssPrefix + 'grid-checkheader-checked');
        }
        console.log( cls); // not in console
        return '<div class="' + cls.join(' ') + '"> </div>';
    }

have ideas?
thanks..

[berntkau]

Hi again asics167!

I'm afraid I'm getting short of ideas. But there is actually one more thing to test.

The only differences from my solution I could see in the information you have given me is the placing of the override code and the type of column that is overridden.

I did som experimenting and found the following.
A) I saw you had - or at least you said so - created your override in the launch function. So I tested if it works that way. It did. But if you haven't tried it before, Architect has a special way to handle overrides. After you promoted your column to a class, given the class its user class name and user alias, you can in code view find a button labeled 'Create Override'. This will give you a place to add the override code. If you have several overrides they all will be neatly stored in an override directory under the view directory. I recommend to use this feature.

This one made a difference in my case! You had used a 'boolean' column as a starting component. So I tried to do the same, and I did get the checkbox to show, but clicking on it didn't work! So the only last idea I have for now is
1. delete your boolean column override and replace the boolean column with a basic column. Its named Column in the component list in Architect.
2. Promote to class as earlier and do the renaming.
3. Click the 'Create Override' button and add the contents from the checkcolumn classes depending on which version of the framework you are using. In ext 4.1 from the line 'alias: ..., in ext 4.2 from the line 'alternateClassName: ...'
4. select the linked column in your grid and add the dataIndex fieldname.

If this still doesn't work for you, I'm afraid I've run out of ideas.

So fingers crossed!
Good luck!

[asics167]

many-many thanks.. its real work for me!
you obstinate master!

[Kenw]

With Sencha Architect 3, there is an easy solution. You can create a basic column or a Boolean column, and then type in "checkcolumn" in "createAlias" configuration. The generated code will have xtype as checkcolumn, which is a real check column. To edit, add a checkbox edit to the field.

I post this solution here, in case that somebody else also wants to know how to add checkcolumn through SA. I am using SA 3, but SA 2 should allow you to do same thing.