How can I add a 'checkcolumn' to a grid in Architect 2?

[rrkhan]

I can do this by manually making the following changes to the code and an existing 'gridcolumn':

add:

Ext.Loader.setPath('Ext.ux', '/ExtJS/examples/ux');

add:

requires: 'Ext.ux.CheckColumn',

change column xtype:

xtype: 'checkcolumn'

Please, how do I do this within Architect 2 itself?

[ssamayoa]

You cant use any ux component in SA.

If you want only to show data, add a column to your grid then copy the renderer method from Ext.ux.CheckColumn to that column:

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


        if (value) {
            cls.push(cssPrefix + 'grid-checkheader-checked');
        }
        return '<div class="' + cls.join(' ') + '">&#160;</div>';
    }

Regards.

[rrkhan]

Thanks. This is exactly what I did!

But now... I have the requirement to edit the data. (I tried setting the editor to a check column... and it essentially works but not as elegantly. You need to click or double-click into the cell, and then when the real edit check box shows up, the value can be changed. Whereas, with the check column, once you click the check box, the value changes.)

So is my only option "hand" coding this? Or is there another tool I can use?

[ssamayoa]

I use Ext.ux.grid.plugin.RowEditing for row editing (http://www.sencha.com/forum/showthre...efull-features), example:

Ext.define('AG.view.override.AutoRespuestasLista', {
	requires: 'AG.view.AutoRespuestasLista'
}, function() {
	Ext.override(AG.view.AutoRespuestasLista, {
		initComponent : function() {
			var me = this;
			var re = Ext.create("Ext.ux.grid.plugin.RowEditing", {
				clicksToMoveEditor : 2,
				autoCancel : false,
				errorSummary : false
			});
			Ext.applyIf(me, {
				plugins: [ re ]
			});
			me.rowEditing = re;
			me.callOverridden(arguments);
		}
	});
});

			columns: [
				{
					xtype: 'gridcolumn',
					dataIndex: 'palabra',
					editor: {
						allowBlank: false,
						maxLength: 15,
						enforceMaxLength: true,
						vtype: 'alphanumupper'
					},
					text: 'Palabra'
				},
				{
					xtype: 'datecolumn',
					dataIndex: 'validoDesde',
					editor: {
						xtype: 'daterangefield',
						format: 'd/m/Y',
						itemId: 'validoDesde',
						endDateField: 'validoHasta',
						allowBlank: false
					},
					text: 'Valido desde',
					format: 'd/m/Y'
				},
				{
					xtype: 'datecolumn',
					dataIndex: 'validoHasta',
					editor: {
						xtype: 'daterangefield',
						format: 'd/m/Y',
						itemId: 'validoHasta',
						startDateField: 'validoDesde',
						allowBlank: false
					},
					text: 'Valido hasta',
					format: 'd/m/Y'
				},
				{
					xtype: 'gridcolumn',
					sortable: false,
					dataIndex: 'respuesta',
					editor: {
						allowBlank: false,
						maxLength: 140,
						enforceMaxLength: true
					},
					flex: 1,
					text: 'Respuesta'
				}
			],

<script type="text/javascript" src="app/lib/RowEditing.js"></script>

x1.png

[msinn]

@rrkhan

in my case it works when I add the renderer to colomn promoted to a class, as @ssamayoa told you, and the rest of the extension in its override. I can not use the event 'checkchange' in SA, just using the store events.

[paulcardo]

@ssamayoa, @rrkhan

I was just wondering how to do it, thanks to your post I could show the checkboxes and edit them

[dariush]

Hi friend,
may you send an architect/designer example implementing what you described in that post? not so clear to me how to use the plugin in a grid within architect.
Best regards,
Dariush.

[paulcardo]

Hi,

attached sample.zip, what I did based on @ssamayoa post, a check column with cell editing,

The key points are:
- column function render()
- define column editor
- add folder \css
- use index.html, it has the reference to the folder \css

I got what @rrkhan mentioned: You need to click or double-click into the cell, and then when thereal edit check box shows up, the value can be changed

[msinn]

@dariush

1. promote a column to a class

2. add a renderer to your class, e.g:

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


    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    },

    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        var cssPrefix = Ext.baseCSSPrefix,
        cls = [cssPrefix + 'grid-checkheader'];

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

});

3. override your class, e.g:

Ext.define('Nav.view.override.CheckColumn', {
    requires: 'Nav.view.CheckColumn'
}, function() {
    Ext.override(Nav.view.CheckColumn, {
    constructor: function() {
        this.addEvents(
            'checkchange'
        );
        this.callParent(arguments);
    },

    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
        if (type == 'mousedown' || (type == 'keydown' && (e.getKey() == e.ENTER || e.getKey() == e.SPACE))) {
            var record = view.panel.store.getAt(recordIndex),
                dataIndex = this.dataIndex,
                checked = !record.get(dataIndex);
            record.set(dataIndex, checked);
            this.fireEvent('checkchange', this, recordIndex, checked);
            return false;
        } else {
            return this.callParent(arguments);
        }
    }
    });
});

4. add a column to your grid, e.g:

{
xtype: 'checkcolumn',
width: 60,
dataIndex: 'Checked',
text: 'Header'
},

5. how to listen the event 'checkchange' in SA? I did not get it working, but I listen to the store events.

this works in my case, maybe this helps you too

[dariush]

thank you guys, let me check&test
best regards,
Dariush