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
答えて
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);
}
}]
}
]
});
});
関連する問題
- 1. グリッド内の画像を編集する
- 2. データフレーム内の値からテキストチャンクを編集して削除する
- 3. JqGrid各行の編集と削除ボタン
- 4. は、インベントリ内のアイテムを削除し、編集に
- 5. フレックスデータグリッドのボタンを編集/削除します
- 6. バッチファイル内の1行を編集する
- 7. DB内の行を編集する
- 8. データグリッドの行を編集中に削除ボタンを無効にする方法
- 9. カスタム編集/削除ボタンGridViewの
- 10. Silverlight:グリッド内の特定のセルのコンテンツを削除します。
- 11. パスワードチェックインを削除します。編集プロファイル
- 12. アンドロイドは、ビュー内のすべてのボタンを削除します
- 13. C#を使用してオートシェイプ内のWordイメージを編集する
- 14. プライマリを使用してデータテーブル内の行を編集する際の問題
- 15. データグリッド内のすべての行に削除ボタンを追加します。
- 16. GridView(VB .Net)でテキストファイルの行を編集して削除する
- 17. git hunk編集モード - ' - '行を削除するには?
- 18. 編集後にデータベース内の画像が削除されました
- 19. 表示タグを使用してテーブルの各行に編集と削除ボタンを提供
- 20. タブベースのiphoneアプリケーションで[詳細]ビューの[編集]ボタンを削除するには
- 21. CRUDの「編集」ボタンと「削除」ボタンを前面に移動することはできますか?
- 22. 既存のEKEventを編集して削除しますか?
- 23. QTableはどのように使用しますか?行の追加、編集、削除および取得
- 24. データテーブル内の行を検索して.Net内で削除する
- 25. データベース内の行を削除する
- 26. ファイル内の行を削除する - Ruby
- 27. データベース内の行を削除する
- 28. filled.contour legend内の行を削除する
- 29. サブフォーム内の行を削除する
- 30. テキストファイル内の改行を削除する
actioncolumnをクリックしたときに、第一及び第二の列を編集するための任意の提案ですか? – FlashyFuddyFuddy
@FlashyFuddyFuddy githubのライブサンプルをご覧ください:http://htmlpreview.github.com/?https://github.com/werdender/ext4examples/blob/master/actioncolumns-edit.html – Vlad
Vladありがとうございました! :)それは本当に多くの助けになりました! – FlashyFuddyFuddy