Checkbox column in architect and grid

[gbjk]

Hi,

I've seen several questions/answers that seem to relate to this, but none have given me something I can work with.

I have a standard gridpanel in architect.
It's tied to a ExtDirect store, and the store's model has a boolean field on it.

I want a checkbox column in the gridpanel tied to this field so that:
- Rows are rendered with the box ticked/unticked as per the model they're rendering
- When I tick/untick the checkbox, the model in the store should be changed
- Presumably, red dirty data tabs will appear on the corner of the cell, as well

I've seen various suggestions, but none appear to cover this exactly.

I think I want:
- Row editting plugin
- Promote column to class, override the class, and set xtype to checkbox

But "promote to class" is greyed out in the context box on any column in my grid.

If someone could walk me through this, I'd really appreciate it!

Thanks

Gareth

Here's the code with a boolean column instead:

                {
                    xtype: 'gridpanel',
                    region: 'north',
                    floating: true,
                    height: 300,
                    hidden: true,
                    itemId: 'manage_list',
                    minWidth: 250,
                    title: '!Auto-Translated Languages',
                    store: 'XYZLanguage',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            width: 140,
                            dataIndex: 'name',
                            text: '!Language'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'maintain_translations',
                            text: '!Auto Translate'
                        }
                    ],
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'bottom',
                            items: [
                                {
                                    xtype: 'tbspacer',
                                    flex: 1
                                },
                                {
                                    xtype: 'button',
                                    itemId: 'ok',
                                    text: '!OK'
                                },
                                {
                                    xtype: 'button',
                                    itemId: 'cancel',
                                    text: '!Cancel'
                                }
                            ]
                        }
                    ]
                }

[aconran]

There is a ticket regarding promote to class on grid columns not working. We'll see what we can do about prioritizing this to work.

Your above scenario is an excellent idea for an example that would involve some custom code.

[dominic_u]

Hi Aaron Conran

I would like to know there is an update how we can add custom column in the grid. My suggestion is to allow the xtype can be change by putting the xtype property in the object inspector or property config (I dont know if it the right term) which similar to dataIndex. I found out the the combo box option is a great, the developer can choose from the combobox, if the developer want to choose his own custom column.

I hope my suggestion would not affect the View, because I encounter putting { ftype = filter} inside the grid. When I run the application, the filter work well but the Panel turn into white inside the Sencha Architect. For the sake of our designer, I remove the { ftype : filter } temporarily

2-6-2013 3-23-10 PM.png

[gbjk]

What I ended up doing was adding an attribute, with an override that would change the xtype later.
( Though actually, the xtype of the column is irrellevant, it's the recreate that mattered )

Ext.override(Ext.panel.Table, {
    initComponent: function(){
        // See if we have columns that we need to transform
        if (this.columns){
            for (var i=0;i<this.columns.length;i++){
                var column = this.columns[i];
                if (column.checkbox){
                    column.xtype = 'checkcolumn';
                    this.columns[i] = Ext.create('Ext.ux.CheckColumn', column);
                }
                // ... I have a few other attributes that I do similar with
            }
        }
        this.callParent(arguments);
    }
});

Hope this helps.

Gareth

[aconran]

Gareth -

Thanks for sharing your workaround. In the next minor revision Architect 2.2, you will be able to specify a custom createAlias or createClass. createAlias would map to 'checkcolumn' and createClass would map to 'Ext.ux.CheckColumn'. By the way, you only need to specify one of these.

[asics167]

in architect i create grid panel :

 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'
                                                })
                                            ],
                                            columns: [
                                                {
                                                    xtype: 'booleancolumn',
                                                    autoRender: true,
                                                    defaultWidth: 30,
                                                    dataIndex: 'fcheck',
                                                    text: 'Отм.',
                                                    editor: {
                                                        xtype: 'checkboxfield',
                                                        boxLabel: 'Box Label'
                                                    }
                                                },
                                                {
                                                    xtype: 'gridcolumn',
                                                    hidden: true,
                                                    dataIndex: 'fSotrId',
                                                    text: 'FSotrId'
                                                }, ...

in event launch Application i write:

Ext.override(Ext.panel.Table, {
    initComponent: function(){
        // See if we have columns that we need to transform
        console.log('Panel');
        if (this.columns){
            for (var i=0;i<this.columns.length;i++){
                var column = this.columns[i];
                if (column.checkbox){
                    column.xtype = 'checkcolumn';
                    this.columns[i] = Ext.create('Ext.ux.CheckColumn', column);
                }
                // ... I have a few other attributes that I do similar with
            }
        }
        this.callParent(arguments);
    }
});

bon nothing change.. and column text view..
in edit mode ( after 2 click) - check box mode- ok..
can help me..

[gbjk]

asics167,

You've mixed together several techniques.

If you're just trying to use my work around, change this:

{
  xtype: 'booleancolumn',
  autoRender: true,
  defaultWidth: 30,
  dataIndex: 'fcheck',
  text: 'Отм.',
  editor: {
  xtype: 'checkboxfield',
  boxLabel: 'Box Label'
  }
}

to this:

{
  xtype: 'booleancolumn',
  checkbox: true,
  autoRender: true,
  defaultWidth: 30,
  dataIndex: 'fcheck',
  text: 'Отм.',
}

You must have the ux.CheckColumn stuff installed for this.

Gareth

[asics167]

i copy from ext-4.0.2a/examples/ux/CheckColumn.js to my project and add in Architect JS Resources. This file load fine.. delete properties edit for column and config same as you write.
but not work and console.log not work. may be my panel have not xtype is right?

 {
                                            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: 'Отм.'
                                                },

you code in launch event application..

[gbjk]

Works for me, with ExtJS 4.1.3.

Though I now use Ext.define('...', {override: 'Ext.panel.Table', ... }) but I don't think that's your problem.

If your Ext.panel.Table initComponent isn't invoked, then this fundamentally won't work.

You'll have to work out why.