1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    26
    Vote Rating
    0
    BastianKrones is on a distinguished road

      0  

    Default Unanswered: Radiobutton within a grid showing the gender

    Unanswered: Radiobutton within a grid showing the gender


    hey all,
    i got a grid with a varity of fields and now i want to add a field with 2 ( or more ) radio-buttons.

    So far i could read the json-data "gender" and get a selected radio-button. But if i use my row-edit-plugin, i got 2 possibilities of results:
    1) if i add an editor-radio to my current field. I just a single radio, which have been 2 radio, if i click in any row.

    Code:
    {                            xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if( value === 'M')
                                    {
                                        return '<input type="radio" name="gender_' + rowIndex + '" id="gender" checked="checked" value="M" /><input type="radio" name="gender_' + rowIndex + '" id="gender" value="F" />';
                                    } else if( value === 'F')
                                    {
                                        return '<input type="radio" name="gender_' + rowIndex + '" id="gender" value="M" /><input type="radio" name="gender_' + rowIndex + '" id="gender" checked="checked" value="F" />';
                                    }
                                },
                                width: 65,
                                align: 'center',
                                dataIndex: 'gender',
                                groupable: true,
                                text: 'Geschlecht',
                                editor: {
                                    xtype: 'radiofield',
                                    name: 'gender',
                                    boxLabel: 'M',
                                    inputValue: 'M'
                                }
                            }
    2) If i just use the renderer-function, old value of the gender doesn't get changed, no matter what i am clicking on.

    Code:
    {                            xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if( value === 'M')
                                    {
                                        return '<input type="radio" name="gender_' + rowIndex + '" id="gender" checked="checked" value="M" /><input type="radio" name="gender_' + rowIndex + '" id="gender" value="F" />';
                                    } else if( value === 'F')
                                    {
                                        return '<input type="radio" name="gender_' + rowIndex + '" id="gender" value="M" /><input type="radio" name="gender_' + rowIndex + '" id="gender" checked="checked" value="F" />';
                                    }
                                },
                                width: 65,
                                align: 'center',
                                dataIndex: 'gender',
                                groupable: true,
                                text: 'Geschlecht'
                            }

    This is my current grid:
    Code:
    {                    xtype: 'gridpanel',
                        frame: true,
                        id: 'gridPanelId',
                        autoScroll: true,
                        store: 'Users',
                        columns: [
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'userID',
                                text: 'ID'
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'name',
                                text: 'Name',
                                flex: 4,
                                editor: {
                                    xtype: 'textfield',
                                    maxLength: 20,
                                    minLength: 3
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'emailAddress',
                                text: 'E-Mail',
                                flex: 4,
                                editor: {
                                    xtype: 'textfield',
                                    vtype: 'email'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if (value > 33) {
                                        return '<span style="color:green;font-weight: bold">' + value + '</span>';
                                    } else if (value <= 33) {
                                        return '<span style="color:red;font-weight: bold">' + value + '</span>';
                                    }
                                    return value;
                                },
                                width: 55,
                                align: 'center',
                                dataIndex: 'age',
                                text: 'Alter',
                                editor: {
                                    xtype: 'numberfield',
                                    decimalPrecision: 0,
                                    maxValue: 130,
                                    minValue: 0
                                }
                            },
                            {
                                xtype: 'datecolumn',
                                align: 'center',
                                dataIndex: 'birthdate',
                                text: 'Geburtstag',
                                format: 'd.m.Y',
                                editor: {
                                    xtype: 'datefield',
                                    format: 'd.m.Y'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if( value === 'M')
                                    {
                                        return '<input type="radio" name="gender_' + rowIndex + '" id="gender" checked="checked" value="M" /><input type="radio" name="gender_' + rowIndex + '" id="gender" value="F" />';
                                    } else if( value === 'F')
                                    {
                                        return '<input type="radio" name="gender_' + rowIndex + '" id="gender" value="M" /><input type="radio" name="gender_' + rowIndex + '" id="gender" checked="checked" value="F" />';
                                    }
                                },
                                width: 65,
                                align: 'center',
                                dataIndex: 'gender',
                                groupable: true,
                                text: 'Geschlecht',
                                editor: {
                                    xtype: 'radiofield',
                                    name: 'gender',
                                    boxLabel: 'M',
                                    inputValue: 'M'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                    if(value === true)
                                    {
                                        return '<input type="checkbox" name="getNewsletter" checked="checked" />';
                                    } else if (value === false)
                                    {
                                        return '<input type="checkbox" name="getNewsletter" />';
                                    }
                                },
                                width: 65,
                                align: 'center',
                                dataIndex: 'getNewsletter',
                                text: 'Newsletter',
                                editor: {
                                    xtype: 'checkboxfield',
                                    name: 'getNewsletter'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                width: 60,
                                align: 'center',
                                dataIndex: 'contactFK',
                                menuText: '',
                                text: 'Kontakt',
                                editor: {
                                    xtype: 'combobox',
                                    displayField: 'ContactID',
                                    forceSelection: true,
                                    store: 'Contacts',
                                    valueField: 'ContactID'
                                }
                            },
                            {
                                xtype: 'actioncolumn',
                                id: 'delete',
                                width: 25,
                                items: [
                                    {
                                        handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                            var user = Ext.getStore('Users');
                                            user.remove(record);
                                        },
                                        icon: 'resources/icons/fam/delete.gif'
                                    }
                                ]
                            }
                        ],
                        items: [
                            {
                                xtype: 'combobox',
                                width: 100,
                                fieldLabel: 'Label',
                                displayField: 'Name',
                                forceSelection: true,
                                store: 'Contacts',
                                valueField: 'ContactID'
                            }
                        ],
                        plugins: [
                            Ext.create('Ext.grid.plugin.RowEditing', {
                                clicksToEdit: 1
                            })
                        ],
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'button',
                                        handler: function(button, event) {
                                            // Create a model instance
                                            var r = Ext.create('MyApp.model.User', {
                                                name: 'Mostly Shady',
                                                emailAddress: 'example@example.com',
                                                age: 0,
                                                birthdate: Ext.Date.clearTime(new Date()),
                                                gender: 'M',
                                                getNewsletter: false,
                                                contactFK: 8300
                                            }),
                                            usersGrid = this.up('#gridPanelId');
    
    
                                            usersGrid.getStore('UserStore').insert(0, r);
    
    
                                            usersGrid.getPlugin('CellEditing').startEditByPosition({row: 0, column: 0});
                                        },
                                        text: 'Add User'
                                    }
                                ]
                            }
                        ],
                        listeners: {
                            select: {
                                fn: me.onGridPanelIdSelect,
                                scope: me
                            }
                        }
                    }
    Any idea how to save the new value of the radio-buttons?

    PS: I know that there are other possibilities to show the gender, but i want to test, if i it is possible to use radio-buttons inside a grid. ( maybe for using option-values later on )

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    ExtJS doesn't allow for components to be rendered in the grid cells out of the box. You might check out this ux, though:
    http://skirtlesden.com/ux/component-column

Thread Participants: 1

Tags for this Thread