Help: How to create a column with check box cells.

[reselbob]

Hi:

I am using Sencha Architect 2. I have a data grid in which one field is boolean values. Instead using a Boolean column, I want to display the cell value as a checked or unchecked value.

I tried to find a simple example, but I have not been successful. Help please?

Thanks in advance,
Bob

[danguba]

http://docs.sencha.com/ext-js/4-1/#!...ux.CheckColumn

[reselbob]

Danguba: Thanks!

But, I cannot seem to locate checkcolumn in the Sencha Architect toolbox. do I need to import a file. If so, tell me please, what do I need to do?

Thanks again for all your help. I really appreciate it.

[reselbob]

Figured it out.

I had to:

1. Get the file, CheckColumn.js from the ExtJS.4.x download and put it into a directory I created, /app/ux, under the web app root.
2. Add a loader to the Application
3. add the setting, {"Ext.ux":"app/ux"} to the loader path
4. copy the configuration code for the Panel in which the grid lives, ovrride the Panel, paste the configuration code into the override and then in the change the code xtype of the column that I want to have checkboxes displayed to, xtype:'checkcolumn' (I suggest that you be really careful here.)
5. Get the css file, CheckHeader.css from the downloaded ExtJs zip file and put it into, app/css, which is a folder I created.
6. Add a <link> tag to app.html, <link rel="stylesheet" href="app/css/CheckHeader.css">
7. create a directory app/css/images and put the files checked.gif and unchecked.gif in the newly created, app/css/images directory. (You can find the gif files in the ExtJS zip file from download)
8. Make sure that the field in the model, to which the grid-column is bound, is set to boolean. In my case the model field is named, inactive

I gotta say this was hard in terms of "figuring it out time". I wonder why checkcolumn is not part of the Toolbox. it's a pretty common use case.

[danguba]

Great work figuring that out mate! Thumbs up!

[tecnosencha]

After many tries I have found this solution with SA.

-Download CheckColumn.js from Api
In Sencha Architect
-Add a simple Ext.grid.column.column

-in property tdCls add 'grid-cell-checkcolumn'

-add this basic functions: constructor, processEvent
copy and paste the codes of this functions from CheckColumn.js
and remove or add comments in this lines
constructor:
...
//this.callParent(arguments)

processEvent:
/*else {
return me.callParent(arguments);
}*/
This because we dont'have inheritance but we are overriding default methods.

-add a renderer: copy and paste code form CheckColumn.js

var cssPrefix = Ext.baseCSSPrefix,cls = [cssPrefix + 'grid-checkheader'];
//alert('value='+value);
if (value===true) {
// i have edit this line, bacause in my project i have boolean value, but i think you can have string, number, etc    
cls.push(cssPrefix + 'grid-checkheader-checked');}return '<div class="' + cls.join(' ') + '"> </div>'; 

-add this icons in your project workspace
unchecked.gif
checked.gif
search this icon in ExtJs 4 package

-add a css resources file
CheckHeader.css (you can find this in ExtJs 4 package)
edit css inserting your path of images

End!