Feb 03, 2015, 3:37 AM
[CLOSED] Combobox focus not proper in GridPanel
Hi,
In GridPanel when we add a new row and click on TAB key, focus is not moving cell by cell.
Have a look at the sample code provided below:
SCENARIOS:
1) Click on Add, input some text in first column of new row.
2) Click TAB.
3) Instead of moving to next cell, the focus goes to the last column.
In GridPanel when we add a new row and click on TAB key, focus is not moving cell by cell.
Have a look at the sample code provided below:
<%@ Page Language="C#" %>
<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[] { "test", "test", "test" },
new object[] { "test", "test", "test" },
new object[] { "test", "test", "test" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v3 Example</title>
<script>
Ext.grid.plugin.CellEditing.override({
startEdit: function (record, columnHeader) {
var currentEditor = this.getActiveEditor();
if (currentEditor && currentEditor.field && !currentEditor.field.isValid()) {
return;
}
this.callParent(arguments);
}
});
Ext.Editor.override({
completeEdit: function () {
if (!this.field.isValid()) {
return;
}
this.callParent(arguments);
}
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="Sample" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2">
<Editor>
<ext:ComboBox runat="server" ID="Combo1" QueryMode="Local" Editable="false"></ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Test 2" DataIndex="test2">
<Editor>
<ext:ComboBox runat="server" ID="ComboBox1" QueryMode="Local" Editable="false"></ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
<Buttons>
<ext:Button ID="btnAdd" runat="server" Text="Add">
<Listeners>
<Click Fn="AddRow" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel">
<Listeners>
<Click Fn="CancelChanges"></Click>
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
<script type="text/javascript">
function AddRow() {
var rowIndex = Sample.GridPanel1.store.getCount();
Sample.GridPanel1.store.insert(rowIndex, {});
Sample.GridPanel1.editingPlugin.startEdit(parseInt(rowIndex), 0);
}
function CancelChanges() {
Sample.GridPanel1.getSelectionModel().deselectAll();
Sample.Store1.rejectChanges();
Sample.GridPanel1.getView().refresh();
}
</script>
</body>
</html>
SCENARIOS:
1) Click on Add, input some text in first column of new row.
2) Click TAB.
3) Instead of moving to next cell, the focus goes to the last column.
Last edited by fabricio.murta; Feb 05, 2015 at 5:05 AM.
Reason: [CLOSED]