Ext.onReady(function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'class', 'view', 'edit', 'delete']
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'}
]
});
Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
renderTo: Ext.getBody(),
store: userStore,
width: 389,
height: 200,
title: 'Student Details',
columns: [
{
text: 'Student Name',
cls: 'studentName',
width: 100,
sortable: true,
hideable: false,
dataIndex: 'name'
},
{
text: 'Student Class',
cls: 'studentClass',
width: 150,
sortable : true,
dataIndex: 'class'
},
{
xtype:'actioncolumn',
width:40,
tdCls:'delete',
items: [{
icon: 'Delete-icon.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//**rec.store.remove();**
//rec.store.remove()` is not working.
Suggest me the code that will work here to remove the //entire row?
alert("Delete " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
tdCls:'edit',
width:40,
items: [{
icon: 'edit-icon.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
tdCls:'view',
width:40,
items: [{
icon: 'view-icon.png', // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("View " + rec.get('name'));
}
}]
}
]
});
});
5
A
Odpowiedz
11
grid.getStore().remove(rec); //or rec.destroy() if the url specified in model
9
1
//My Code Updated with delete options
Ext.onReady(function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'class', 'view', 'edit', 'delete']
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'},
{ name: 'Sri Vidhya', class: '6 A'},
{ name: 'Rafla', class: '9 C'},
{ name: 'Fabin', class: '10 B'},
{ name: 'Jayanthi', class: '8 C'}
]
});
Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
renderTo: Ext.getBody(),
store: userStore,
width: 389,
height: 200,
title: 'Student Details',
/*selType: 'User',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],*/
columns: [
{
text: 'Student Name',
cls: 'studentName',
width: 100,
sortable: true,
hideable: false,
dataIndex: 'name'
/*editor: 'textfield'*/
},
{
text: 'Student Class',
cls: 'studentClass',
width: 150,
sortable : true,
dataIndex: 'class'
/*editor: 'textfield'*/
},
{
xtype:'actioncolumn',
tdCls:'view',
width:40,
items: [{
icon: 'view-icon.png', // Use a URL in the icon config
tooltip: 'View',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("View " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
tdCls:'edit',
width:40,
items: [{
icon: 'edit-icon.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
},
{
xtype:'actioncolumn',
width:40,
tdCls:'delete',
items: [{
icon: 'Delete-icon.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//rec.store.remove();
alert("Delete " + rec.get('name'));
grid.getStore().remove(rec);
//grid.getStore().removeAt(rowIndex);
}
}]
}
]
});
});
Powiązane problemy
- 1. Usuń wiersz tabeli za pomocą przycisku w nokaucie JS
- 2. Animowana kolumna siatki lub wiersz siatki w XAML?
- 3. Kolidowanie za pomocą siatki lokalizacji
- 4. Nawigacja za pomocą przycisku w sencha touch
- 5. Jak wydrukować widok siatki za pomocą iTextSharp
- 6. Symulacja wody za pomocą siatki
- 7. Jak obliczyć wiersz/col z pozycji siatki?
- 8. za pomocą "onclick" za pomocą przycisku radiowego w aplikacji
- 9. Jak podzielić wiersz siatki na dwie kolumny?
- 10. Pobierz wiersz przycisku w widoku tabeli
- 11. Jak zwolnić zablokowany wiersz za pomocą JPA?
- 12. Uruchamianie kreatora za pomocą przycisku w OpenERP
- 13. Jak iterować wiersz za pomocą zapytania mysql w php
- 14. za pomocą przycisku {} po średnikiem
- 15. Jak usunąć rysunek za pomocą przycisku?
- 16. Tworzenie regularnej siatki Delaunay za pomocą scipy
- 17. Ukrywanie przycisku za pomocą jquery
- 18. Jak otworzyć szufladę tylko za pomocą przycisku?
- 19. Jak zrobić UIPickerView za pomocą przycisku Gotowe?
- 20. jak przekazywać paramy za pomocą przycisku akcji w grailsach
- 21. Jak zaimplementować pole tekstowe za pomocą czystego przycisku w WPF?
- 22. ModelSerializer za pomocą właściwości modelu
- 23. Wrap poziomy legenda w wielu rzędach
- 24. Jak dodać dodatkowy wiersz tabeli html po kliknięciu przycisku za pomocą jQuery?
- 25. Jak skutecznie liczyć powiązane wiersze w modelu za pomocą Doctrine2
- 26. Ukryj doskonałe linie siatki za pomocą EPPLUS
- 27. Usuwanie znaków za pomocą przycisku
- 28. Wyrównanie osi ggplot2 za pomocą siatki
- 29. Punkty przerwania za pomocą bourbon schludny siatki
- 30. Jak mogę przekazać parametr za pomocą przycisku przesyłania?
Wszelkie sugestie dotyczące edycji pierwszą i drugą kolumnę actioncolumn kliknięcie? – FlashyFuddyFuddy
@FlashyFuddyFuddy Zobacz przykład na żywo na github: http://htmlpreview.github.com/?https://github.com/werdender/ext4examples/blob/master/actioncolumns-edit.html – Vlad
Dziękuję Vlad! :) To naprawdę bardzo pomogło! – FlashyFuddyFuddy