Jun 18, 2014, 1:49 AM
[CLOSED] gridpanel editor blur
I hope to get the Sum(Price) when enter or Tab or move mouse after I input a number on price cell. but it does not change first time.
in v1.x ,maybe by 'grid.view.getColumnData()'. in v2.5 cannot.
in v1.x ,maybe by 'grid.view.getColumnData()'. in v2.5 cannot.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public double Price { get; set; }
public double Change { get; set; }
public double PctChange { get; set; }
public DateTime LastChange { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.BindData();
}
}
private void BindData()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.GetData();
store.DataBind();
}
private List<Company> GetData()
{
DateTime today = DateTime.Today;
return new List<Company>
{
new Company { ID = 1, Name = "3m Co", Price = 0.00, Change = 0.02, PctChange = 0.03, LastChange = today },
new Company { ID = 2, Name = "Alcoa Inc", Price = 0.00, Change = 0.42, PctChange = 1.47, LastChange = today },
new Company { ID = 3, Name = "Altria Group Inc", Price = 0.00, Change = 0.28, PctChange = 0.34, LastChange = today },
};
}
[DirectMethod(Namespace = "CompanyX")]
public void Edit(int id, string field, string oldValue, string newValue, object customer)
{
string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";
// Send Message...
X.Msg.Notify(new NotificationConfig()
{
Title = "Edit Record #" + id.ToString(),
Html = string.Format(message, id, field, oldValue, newValue),
Width = 250
}).Show();
this.GridPanel1.GetStore().GetById(id).Commit();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Editor with DirectMethod - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var template = 'color:{0};';
var change = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value;
};
var pctChange = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value + "%";
};
var sumItem = function (grid) {
var r, t;
var sum1 = 0.00;
for (var j = 0, jlen = grid.store.data.length ; j < jlen; j++) {
r = grid.store.getAt(j);
t = r.data.Price;
if (t != '') {
sum1 += parseFloat(t);
}
}
App.NumSum.setValue(sum1);
}
var Enter2Tab = function (field, e) {
if (e.keyCode == 13) e.keyCode = 9;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<br />
<br />
<br />
<ext:NumberField ID="NumSum" runat="server" FieldLabel="PriceSum" />
<br />
<br />
<br />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Editable GridPanel"
Width="600"
Height="350">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Change" Type="Float" />
<ext:ModelField Name="PctChange" Type="Float" />
<ext:ModelField Name="LastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="ID" DataIndex="ID" Width="35" />
<ext:Column runat="server" Text="Name" DataIndex="Name" Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Price" DataIndex="Price">
<Renderer Format="UsMoney" />
<Editor>
<ext:NumberField runat="server" EnableKeyEvents="true">
<Listeners>
<Blur Handler="sumItem(this.up('grid'))">
</Blur>
<SpecialKey Fn="Enter2Tab">
</SpecialKey>
</Listeners>
</ext:NumberField>
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="Change">
<Renderer Fn="change" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="PctChange">
<Renderer Fn="pctChange" />
<Editor>
<ext:NumberField runat="server" />
</Editor>
</ext:Column>
<ext:DateColumn
runat="server"
Text="Last Updated"
DataIndex="LastChange"
Format="yyyy-MM-dd">
<Editor>
<ext:DateField runat="server" Format="yyyy-MM-dd" />
</Editor>
</ext:DateColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CellSelectionModel runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing runat="server" ClicksToEdit="1">
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Jun 18, 2014 at 1:33 PM.
Reason: [CLOSED]
