PDA

View Full Version : [CLOSED] Textfield Change Event in Grid Panel



canusr1
Jul 23, 2013, 9:20 AM
Hello there,

I have 2 Textfields (so called Amount & Rate) in GridPanel.

When I make the changes in "Rate" textfield, I would like to calculate Amount based on updated "Rate".

I use Change OnEvent to fire the calculate function. But this function fire, whatever I make changes in text field.

I would like to fire the event only after key in completely in the textfield. Is there any other event can I use for that situation?

Thanks for the help in advance.


<ext:Column ID="RATE_adj" runat="server" Text="Rate Adj" DataIndex="RATE_adj" Width="80">
<Editor>
<ext:TextField ID="txtRATE_adj" runat="server" Regex="/(^-?\d\d*[\.,]\d*$)|(^-?\d\d*$)|(^-?[\.,]\d\d*$)/" SelectOnFocus="true">
<DirectEvents>
<Change OnEvent="txtRATE_adjChanged">
<ExtraParams>
<ext:Parameter Name="DEFINITION_GRP_ID" Value="#{txtRATE_adj}.getValue()" Mode="Raw" Encode="true"></ext:Parameter>
</ExtraParams>
</Change>

</DirectEvents>
</ext:TextField>
</Editor>
<Renderer Fn="colorRenderer" />
<%--<Renderer Fn="Ext.util.Format.numberRenderer('0,0.00')" />--%>
</ext:Column>

Daniil
Jul 23, 2013, 1:14 PM
Hi @canusr1,

Please clarify the following. I mean what exactly the moment it happens.



I would like to fire the event only after key in completely in the textfield.

However, I guess you need to use a CellEditing's Edit event.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-edit

canusr1
Jul 24, 2013, 9:39 AM
Currently, whenever i make the changes in txtRATE_adj, fire "txtRATE_adjChanged" event repeatedly.

Let say I wanna key in "2.5" in "txtRATE_adj" textfield.

First I type "2", then fire "txtRATE_adjChanged" as first time.

Then I continue to type "2.", then fire the event again as second time.

Then I continue typing "2.5", then fire the event again.

I wanna fire the event only one time after I've completely type the value in textfiled?

Or do you have a grid panel sample for the following scenario.

I have Column A, Column B and Column C in gridpanel.

When I change in Column A, Column C have to fill with the value of Column A * Column B.

Is there any other way to do that? Hope you get what I mean.

Thanks.


Hi @canusr1,

Please clarify the following. I mean what exactly the moment it happens.



However, I guess you need to use a CellEditing's Edit event.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-edit

Daniil
Jul 24, 2013, 12:58 PM
I wanna fire the event only one time after I've completely type the value in textfiled?


There are three options I can see that you can try.

1. Exclude the keyup event from the checkChangeEvents.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Base-cfg-checkChangeEvents

2. Use the Blur event instead of the Change one.

3. Increase the checkChangeBuffer option.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Base-cfg-checkChangeBuffer


When I change in Column A, Column C have to fill with the value of Column A * Column B.

A ComponentColumn looks good for this requirement.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { 1, 1 },
new object[] { 2, 2 },
new object[] { 3, 3 }
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="a" />
<ext:ModelField Name="b" />
<ext:ModelField Name="c">
<Convert Handler="return record.data.a * record.data.b;" />
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn runat="server" Text="A" DataIndex="a" Editor="true" SilentSave="false">
<Component>
<ext:NumberField runat="server" />
</Component>
<Listeners>
<Edit Handler="e.record.data.c = e.value * e.record.data.b;" />
</Listeners>
</ext:ComponentColumn>
<ext:ComponentColumn runat="server" Text="B" DataIndex="b" Editor="true" SilentSave="false">
<Component>
<ext:NumberField runat="server" />
</Component>
<Listeners>
<Edit Handler="e.record.data.c = e.record.data.a * e.value;" />
</Listeners>
</ext:ComponentColumn>
<ext:ComponentColumn runat="server" Text="C" DataIndex="c" Editor="true">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>