1. #1
    Touch Premium Member
    Join Date
    Apr 2011
    Posts
    61
    Vote Rating
    0
    gbjk is on a distinguished road

      0  

    Default Checkbox column in architect and grid

    Checkbox column in architect and grid


    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:
    Code:
                    {
                        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'
                                    }
                                ]
                            }
                        ]
                    }

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    17
    Vote Rating
    2
    dominic_u is on a distinguished road

      0  

    Default Any Update on Custom Field

    Any Update on Custom Field


    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

  4. #4
    Touch Premium Member
    Join Date
    Apr 2011
    Posts
    61
    Vote Rating
    0
    gbjk is on a distinguished road

      0  

    Default


    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 )

    Code:
    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

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default i cant see checkbox column in my grid

    i cant see checkbox column in my grid


    in architect i create grid panel :
    Code:
     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:
    Code:
    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..

  7. #7
    Touch Premium Member
    Join Date
    Apr 2011
    Posts
    61
    Vote Rating
    0
    gbjk is on a distinguished road

      0  

    Default


    asics167,

    You've mixed together several techniques.

    If you're just trying to use my work around, change this:
    Code:
    {
      xtype: 'booleancolumn',
      autoRender: true,
      defaultWidth: 30,
      dataIndex: 'fcheck',
      text: 'Отм.',
      editor: {
      xtype: 'checkboxfield',
      boxLabel: 'Box Label'
      }
    }
    to this:

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

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

    Gareth

  8. #8
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default not see checkbox

    not see checkbox


    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?
    Code:
     {
                                                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..

  9. #9
    Touch Premium Member
    Join Date
    Apr 2011
    Posts
    61
    Vote Rating
    0
    gbjk is on a distinguished road

      0  

    Default


    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.