PDA

View Full Version : Deleting Records



waqasaslammmeo
11 Mar 2012, 11:06 PM
Hello !
i have a grid , i can able to edit my records from the grid ,but now i want to delete records from the grid , this is my very first application in extjs so i have no idea how to do it and which is the best way to perform this action , as i know there are so many experts are in this forum , please help me and guide me , how can i delete records from the grid and if it is not possible then how can i remove record from the store , i am using c# webservice . please help me .

Best Regards

vietits
11 Mar 2012, 11:18 PM
1. Delete records from grid is in fact to delete them from store. To implement grid UI to delete records, you can use 'actioncolumn (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action)' (Ext.grid.column.Action (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action)) to include a delete icon on each row of the grid, or you can use a way that allows users select records to delete and then click a button on toolbar, etc.

2. To delete a record from store, use can use <store>.remove(record/records), <store>.removeAt(recordIndex). Call <store>.removeAll() to delete all records from the store.

3. To synchronize your store with your server, call <store>.sync(). If you configured your store with autoSync set to true this will be automatically executed

waqasaslammmeo
12 Mar 2012, 2:44 AM
thanks for your quick reply sir , but by trying actionColumn 100 times it gives an error g is not a constructor
i cant able to remove it , here is my code




var grid = new Ext.grid.EditorGridPanel({
store: store,
// cm: cm,
//renderTo: 'editor-grid',


width: 670,
height: 350,
autoExpandColumn: 'Name', // column with this id will be expanded
frame: true,
items: {
columns: [
{ id: 'ID', header: 'ID', dataIndex: 'ProductID', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Name', header: 'Name', dataIndex: 'ProductName', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Qty', header: 'Qty', dataIndex: 'Qty', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Rate', header: 'Rate', dataIndex: 'Rate', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Total', header: 'Total', dataIndex: 'Total', editor: new fm.TextField({ allowBlank: false }) },
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'images/edit.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('ProductName'));
}
}, {
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('ProductName'));
}
}]
}
]
}


});



please check this.i know i am missing something please guide me ,

Regards

Farish
12 Mar 2012, 3:01 AM
I use a "Delete" button in a toolbar above the grid. On press of this button:


deletebutton.on('click', function() {
store.remove(grid.getSelectionModel().getSelection()[0]);
});

this will remove the selected record from the store (and grid). you can call store.sync() after store.remove() to save the changes OR have a "Save" button to call store.sync() OR use autoSync: true in your store.

vietits
12 Mar 2012, 5:42 AM
@waqasaslammmeo,
You are missing the line of code to remove record from store. See my suggestion in red color below.


var grid = new Ext.grid.EditorGridPanel({
store: store,
// cm: cm,
//renderTo: 'editor-grid',
width: 670,
height: 350,
autoExpandColumn: 'Name', // column with this id will be expanded
frame: true,
items: {
columns: [
{ id: 'ID', header: 'ID', dataIndex: 'ProductID', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Name', header: 'Name', dataIndex: 'ProductName', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Qty', header: 'Qty', dataIndex: 'Qty', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Rate', header: 'Rate', dataIndex: 'Rate', editor: new fm.TextField({ allowBlank: false }) },
{ id: 'Total', header: 'Total', dataIndex: 'Total', editor: new fm.TextField({ allowBlank: false }) },
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'images/edit.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('ProductName'));
}
}, {
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
//var rec = grid.getStore().getAt(rowIndex);
//alert("Terminate " + rec.get('ProductName'));
grid.getStore().removeAt(rowIndex);
grid.getStore().sync(); // <- use this in case <store>.autoSync = false
}
}]
}
]
}
});