Delete selected row from grid

[rajen shrestha]

Hi,
Neet help me to delete row from a grid.
I am using ASP.net MVC application.
I am new to Sencha.

Problem: 1) Not able to retrieve selected value, object, from grid row when click on delete button

var clientModel = Ext.define('Client', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Serial', type: 'string' }, 'Serial'
]
});

Ext.onReady(function() {
var regMachinesStore = new Ext.data.Store({
model: 'Client',
autoSync: true,
proxy: new Ext.data.HttpProxy({
type: 'rest',
url: '/License/Clients',
reader: {
type: 'json',
root: 'clients'
},
writer: {
type: 'json'
}

})

});


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
id: 'myGridClientMachine',
store: regMachinesStore,
frame: true,
border: 1,
columns: [
{
text: 'Serial', dataIndex: 'Serial',
renderer: function(value, metadata, record, rowIndex, colIndex, store, view) {
return value;
}
}
]

});


var MyRDMFTabPanelUi = new Ext.Panel
({

items:
[
grid
,
{
xtype: 'button',
text: 'Delete',
margin: '0 5 0 5',
listeners:
{
'click': function() {
alert(grid.getSelectionModel().getLastSelected());
alert(grid.getSelectionModel().getSelected());

if (!grid.selModel.selection) {
alert("Not selected");
return;
}

var record = grid.selModel.selection.record;
alert(record);

Ext.Ajax.request
({
url: '/License/Delete',
method: 'post',
params: {
Serial: Ext.ComponentMgr.get('myGridClientMachine').getSelectionModel()
},
success: function(response) {
var json = Ext.decode(response.responseText);
Ext.Msg.alert("Message", json.value);
}
});
}
}
}
]
});

MyRDMFTabPanelUi.render('mainControls');

regMachinesStore.on({
'load': {
fn: function(store, records, options) {
Ext.Msg.alert("Debug Message", "Store " + store.getTotalCount());
Ext.Msg.alert("Debug Message", "records " + records);
}
}
, scope: this
});

regMachinesStore.load();

}); //onReady

C#
public ActionResult Clients()
{
List<Client> clients = new List<Client>();
Client client1 = new Client();
client1.Serial = "1234";
Client client2 = new Client();
client2.Serial = "41234";
clients.Add(client1);
clients.Add(client2);



return Json(new { clients = clients, totals = clients.Count() }, JsonRequestBehavior.AllowGet);
}

public ActionResult Delete(Client Client)
{
return Json(new { success = true });
}

[raz0r1]

ok:
1. please use code-tags
2. why you render the grid twice? renderTo is set and you use it in the MyRDMFTabPanelUi .
3. dont use, in this case semi, global vars. create the grid directly in the the MyRDMFTabPanelUi and use the new ComponentQuery to address the components.
4.
delete listener should look like:


'click': function(btn) {
console.log(btn.up('panel').down('grid').getSelectionModel().getSelection());

[........]
}
with that you should get the selectioned records (untested)
5. you only want to remove the records from the grid/store or either on remote site (database or whatever)?

[rajen shrestha]

Thanks raz0r1,

I have removed one grid and placed inside my panel. Yes I am calling remote site, url: '/License/Delete'.

When I chanage "Ext.ComponentMgr.get('myGridClientMachine').getSelectionModel()" to
serial: grid.selModel.selected.items[index].raw.Serial, string, then I got the selected value. I do not like th bit, "items[index].raw.Serial", at the moment. I expected client model.

[skirtle]

grid.selModel.selected.items[index].raw.Serial

This could be written:


grid.getSelectionModel().getSelection()[index].get('Serial')