PDA

View Full Version : [CLOSED] Lose focus on store data



Mario
Feb 04, 2015, 1:23 PM
Hi,

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

Daniil
Feb 04, 2015, 3:52 PM
Hi Mario,

Please try to replace:

el.record.set(el.dataIndex, Value);
with

el.record.data[el.dataIndex] = Value;

A record's set call re-renders a row. It is why the focus is being lost. I think that in your scenario you can just change a record's data silently.

Mario
Feb 04, 2015, 4:31 PM
Great Daniil ... it works!

I take advantage of your kindness yet:
if the grid was bigger, do you think it is possible to implement a solution using the keys Up, Down, Left and Right?

If you need I open a new thread for this question ....

Thank You

Daniil
Feb 06, 2015, 12:36 PM
Personally, I would prefer a new forum thread.