Редактирование в гриде
Редактирование по строкам
Грид в Ext JS позволяет нам редактировать данные с помощью плагина Ext.grid.plugin.RowEditing. Теперь применим плагин к гриду:
Ext.create('Ext.grid.Panel', {
title: 'Пользователи',
plugins:[{
ptype:'rowediting',
clicksToEdit: 1
}],
selType: 'rowmodel',
height: 250,
width: 550,
margin:10,
store: store,
columns: [{
xtype:'rownumberer'
},{
text:'Имя',
xtype:'templatecolumn',
flex:1,
dataIndex:'name',
tpl:'<b>{name} {surname}</b>'
},{
header: 'Дата рождения',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1,
editor: {
xtype: 'datefield',
allowBlank: false
}
},{
header: 'E-mail',
dataIndex: 'email',
flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
text:'Женат/Замужем',
xtype:'booleancolumn',
width:90,
dataIndex:'married',
trueText:'Да',
falseText:'Нет',
editor: {
xtype: 'checkbox',
checked: false
}
},{
xtype:'actioncolumn',
width:40,
items:[{
icon:'del.png',
handler:function (grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}],
renderTo: Ext.getBody()
});
В данном случае у нас в грид было добавлено два момента. Во-первых, определение плагина:
plugins:[{
ptype:'rowediting',
clicksToEdit: 1
}],
Параметр plugins принимает набор плагинов, применяемых к гриду. В данном случае у нас определен плагин Ext.grid.plugin.RowEditing.
Поэтому в качестве значения параметра ptype используется значение 'rowediting'.
А параметр clicksToEdit указывает количество кликов мышью, которое активирует плагин.
Второй момент состоит в добавлении редакторов для столбцов с помощью опции editor:
editor: {
xtype: 'datefield',
allowBlank: false
}
Редакторы столбцов задают компонент и правила, которые будут использоваться для редактирования значения. Например, для столбца даты у
нас определен компонент datefield - то есть календарь, а параметр allowBlank говорит о том, что поле обязательно должно иметь значение.
Подобные редакторы столбцов мы можем определить для всех столбцов или только для некоторых.
В итоге, когда мы захотим редактировать, у нас отобразятся рядом со строкой две кнопки для редактирования - Update и Cancel. Введя новые значения в поля и нажав Update, мы увидим, что значение обновилось, причем обновилось не только в самой таблице, но и в хранилище, откуда берутся данные для таблицы:
Редактирование ячеек
Кроме редактирования строк в целом мы можем также изменять значения отдельных ячеек. Для этого нам надо воспользоваться плагином
Ext.grid.plugin.CellEditing. По сравнению с предыдущим примером таблицы мы можем просто поменять определение плагина:
Ext.create('Ext.grid.Panel', {
title: 'Пользователи',
plugins:[{
ptype:'cellediting',
clicksToEdit: 1
}],
height: 250,
width: 550,
margin:10,
store: store,
columns: [{
xtype:'rownumberer'
},{
text:'Имя',
xtype:'templatecolumn',
flex:1,
dataIndex:'name',
tpl:'<b>{name} {surname}</b>'
},{
header: 'Дата рождения',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1,
editor: {
xtype: 'datefield',
allowBlank: false
}
},{
header: 'E-mail',
dataIndex: 'email',
flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
text:'Женат/Замужем',
xtype:'booleancolumn',
width:90,
dataIndex:'married',
trueText:'Да',
falseText:'Нет',
editor: {
xtype: 'checkbox',
checked: false
}
},{
xtype:'actioncolumn',
width:40,
items:[{
icon:'del.png',
handler:function (grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}],
renderTo: Ext.getBody()
});
