Let me know whether the following example helps you.
<script runat="server">
public class Entity
{
public int ID { get; set; }
public string Name { get; set; }
public float Salary { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this._grd.GetStore();
List<Entity> lst = new List<Entity>();
for (int index = 1; index < 15; index++)
{
lst.Add(new Entity
{
ID = index,
Name = string.Format("Name - {0}", index),
Salary = index * 1000
});
}
store.DataSource = lst;
store.DataBind();
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
var Edit = function (item, e) {
e.record.commit();
ProcessSummary();
}
var ProcessSummary = function () {
var records = App._grd.getStore().data.map;
var result = '';
for (var id in records) {
var rec = records[id];
if (rec.data.Salary > 10000) {
result = Ext.String.format('{0}<li>{1}</li>', result, rec.data.Name)
}
}
if (!Ext.isEmpty(result)) {
result = Ext.String.format('<b>Salaries > $ 10,000 (Employee Name)</b></br /><ul>{0}</ul>', result)
}
App._lblResult.setHtml(result);
}
var addEmployee = function () {
var grid = App._grd;
grid.editingPlugin.cancelEdit();
var recordID = App._str.getTotalCount() + 1;
grid.store.insert(0, { ID: recordID, Name: Ext.String.format('Name - {0}', recordID), Salary: recordID * 1000 });
grid.editingPlugin.startEdit(0, 0);
};
var removeEmployee = function () {
var grid = App._grd,
sm = grid.getSelectionModel();
grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
ProcessSummary();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="_grd" runat="server" Width="600" Height="600" Border="true" Title="Employees">
<Store>
<ext:Store ID="_str" AutoLoad="true" runat="server">
<Model>
<ext:Model IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Salary" Type="Float" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="ProcessSummary();" />
</Listeners>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing runat="server" ClicksToMoveEditor="1" AutoCancel="false" >
<Listeners>
<Edit Handler="Edit(item, e);" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="ID" />
<ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:NumberColumn runat="server" Text="Salary" DataIndex="Salary" Format="$0,0">
<Editor>
<ext:NumberField runat="server" AllowBlank="false" MinValue="1" MaxValue="150000" />
</Editor>
</ext:NumberColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length);" />
</Listeners>
</ext:GridPanel>
<div style="width: 590px; border: 1px solid gray; padding: 5px;">
<ext:Label ID="_lblResult" runat="server" />
</div>
</form>
</body>
</html>