PDA

View Full Version : Radiobutton within a grid showing the gender



BastianKrones
30 Apr 2013, 12:51 AM
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.


{ 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.


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

{ 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 )

slemmon
1 May 2013, 2:24 PM
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 (http://skirtlesden.com/ux/component-column)