Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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
    4,781
    Answers
    356
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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