Добавление новой кнопки "Сохранить и Далее" отдельно от "Обновить" и "Отмена" в редактируемой сетке extjs
Пожалуйста помоги. Я использую extjs. В настоящее время моя редактируемая сетка имеет две кнопки ("Обновить" и "Отмена"). Мне нужно добавить новую кнопку "Сохранить и затем" (сохраняет текущую строку и делает следующую строку редактируемой) в редактируемой сетке. Может кто-нибудь, пожалуйста, помогите мне достичь этого.
3 ответа
Если вы не возражаете запачкать руки и переопределить код ExtJS кнопок RowEditorButtons. посмотрите на конструктор и используйте Ext.define с переопределением, чтобы добавить еще одну кнопку.
Вот рабочий пример:
Ext.define('CompanyName.grid.RowEditorButtons', {
override: 'Ext.grid.RowEditorButtons',
constructor: function(config) {
var me = this,
rowEditor = config.rowEditor,
editPlugin = rowEditor.editingPlugin;
me.callParent(arguments);
if(editPlugin.saveAndNextBtn){
me.insert(0,{
cls: Ext.baseCSSPrefix + 'row-editor-update-button',
itemId: 'next',
handler: editPlugin.saveAndNext,
text: 'Save and next',
disabled: rowEditor.updateButtonDisabled
});
}
}
});
Ext.define('CompanyName.grid.plugin.RowEditing', {
override: 'Ext.grid.plugin.RowEditing',
saveAndNext: function(button){
var ctx = this.context,
nextIdx = ctx.rowIdx + 1,
nextRec = ctx.store.getAt(nextIdx);
this.completeEdit();
this.startEdit(nextRec);
}
});
Ext.create('Ext.grid.Panel', {
store: {
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
},
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
plugins: {
ptype: 'rowediting',
clicksToEdit: 1,
saveAndNextBtn: true // enable it here
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Если вы поделитесь своим кодом, то я могу дать вам лучший ответ. Я написал код для редактирования строки при нажатии на кнопку (которая находится в сетке как столбец действий). Вы можете написать код для сохранения данных, где вы хотите, прежде чем редактировать код.
Ext.application({
name: 'Fiddle',
launch: function() {
var studentStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{name: 'studentId'},
{name: 'name'},
{name: 'age'}
],
data:[
{'studentId': 1, 'name': 'Puneet', 'age': 25}
]
});
cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
Ext.create('Ext.window.Window', {
title: 'Row Editing Grid',
height: 400,
width: 400,
items: [{
xtype: 'grid',
height: 400,
store:studentStore,
plugins: [cellEditing],
columns:[
{
xtype: 'actioncolumn',
items:[
{
text:'Add New Row',
tooltip: 'Add Row',
icon: 'add.png',
handler: function(grid, rowIndex, colIndex){
grid.store.add({});
var rowIndex = grid.store.data.items.length - 1;
cellEditing.startEdit(rowIndex,1);
}
}
]
},
{
header: 'StudentId',
dataIndex: 'studentId',
editor:{
xtype: 'textfield'
}
},
{
header: 'Name',
dataIndex: 'name',
editor:{
xtype: 'textfield'
}
},
{
header: 'Age',
dataIndex: 'age',
editor:{
xtype: 'textfield'
}
}
]
}]
}).show();
}
});
Я обновил свой предыдущий код, чтобы сделать его, как вы хотите. Теперь есть одна кнопка на верхней панели сетки. Когда вы щелкнете по нему, он сохранит вашу текущую строку, и следующая строка будет редактируемой. Теперь он работает правильно, как вы хотите. Тем не менее, если у вас возникнут проблемы, то поделитесь со мной, я их решу.
Ext.application({
name: 'Fiddle',
launch: function() {
var studentStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{name: 'studentId'},
{name: 'name'},
{name: 'age'}
],
data:[
{'studentId': 1, 'name': 'Puneet', 'age': 25}
]
});
cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
Ext.create('Ext.window.Window', {
title: 'Row Editing Grid',
height: 400,
width: 400,
items: [{
xtype: 'grid',
id: 'rowEditingGrid',
height: 400,
store:studentStore,
plugins: [cellEditing],
tbar: [{
text: 'Save',
iconCls: 'employee-add',
handler: function(){
var grid = Ext.getCmp('rowEditingGrid');
grid.store.add({});
var rowIndex = grid.store.data.items.length - 1;
cellEditing.startEdit(rowIndex,0);
}
}],
columns:[
{
header: 'StudentId',
dataIndex: 'studentId',
editor:{
xtype: 'textfield'
}
},
{
header: 'Name',
dataIndex: 'name',
editor:{
xtype: 'textfield'
}
},
{
header: 'Age',
dataIndex: 'age',
editor:{
xtype: 'textfield'
}
}
]
}]
}).show();
}});