Feb 04, 2015, 1:23 PM
[CLOSED] Lose focus on store data
Hi,
I need to make a form like Excel that user can move cursor up and down with TAB key.
My code:
But if I remove this line of code:
Yet it not send postback and all the work is done by javascript.
Can you help me please?
THANK YOU
I need to make a form like Excel that user can move cursor up and down with TAB key.
My code:
<%@ 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)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 1 },
new object[] { 2, 2 },
new object[] { 3, 3 },
new object[] { 4, 4 },
new object[] { 5, 5 },
};
this.Store1.DataBind();
}
}
</script>
<script type="text/javascript">
var CheckValue = function (el, e) {
var Value = this.getValue();
if (Value == 1)
{
this.rightButtons[0].show();
}
else
{
this.rightButtons[0].hide();
if (!(Value == 2 || Value == 3 || Value == 4 || Value == 5)) {
this.setValue("");
this.rightButtons[0].hide();
}
}
el.record.set(el.dataIndex, Value);
};
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.x-grid .row-cmp-cell-ct td {position: relative; border-left: 1px solid #b5b8c8 !important; border-right: 1px solid #b5b8c8 !important; vertical-align: middle !important;}
.x-field-buttons-body .x-btn-icon {position: absolute; top: 0px; right: 2px;}
.x-grid-row-alt .x-grid-td,
.x-grid-row-alt .x-form-text {background-color: #eeeeee; background-image: none;}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" Title="Example" Width="500" Height="200">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Number" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column runat="server" Text="ID" Width="200" DataIndex="ID" />
<ext:ComponentColumn runat="server" Text="Text" Flex="1" >
<Component>
<ext:TextField runat="server" ItemID="TextFieldValue" EnableKeyEvents="true" SelectOnFocus="true" EnforceMaxLength="true" MaxLength="1" DataIndex="Number">
<RightButtons>
<ext:Button runat="server" Icon="Add" Hidden="true" />
</RightButtons>
<Listeners>
<Change Fn="CheckValue" />
</Listeners>
</ext:TextField>
</Component>
<Listeners>
<BeforeBind Handler="var value = e.record.data.Number; if (value > 0 && value < 6) e.config[0].value = value; if (value == 1) e.config[0].rightButtons[0].hidden=false;" />
<Bind Handler="cmp.record = record;" />
</Listeners>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Window runat="server" ID="Windows1" Title="Details" Hidden="true" >
<Items>
<ext:TextField runat="server" ID="TextField1" />
</Items>
</ext:Window>
</form>
</body>
</html>
In this code I can move up and down with the TAB key, but if I enter a value in the cell I lose the TextField control focus and the TAB key no longer works well.But if I remove this line of code:
el.record.set(el.dataIndex, Value);
...the code works well and even if I press a number I do not lose the TextField control focus from the cell and with the TAB key you can move up or down.Yet it not send postback and all the work is done by javascript.
Can you help me please?
THANK YOU
Last edited by Daniil; Feb 06, 2015 at 12:36 PM.
Reason: [CLOSED]