Jul 11, 2013, 7:46 PM
[CLOSED] TriggerField does not blur after focusing another control.
I have a TreePanel, which it's possible on filter its items. When i focus the Filter field, and then press the Down key, the focus is moved to the TreePanel and its first item is selected, but the Filter field is still focused, as shown below:
So, it's not possible to clear TreePanel's selection when the Filter field is clicked (focused) again, because, it's still focused. In other words, filterFocus function is not invoked because the Filter field still focused.
1 - View
it's possible to overcome this issue by inserting the following code over javascript's line 14:
The code above makes a fake mouse click on the document, that will blur all controls.
Complete javascript after applying the change mentioned above:
Going further, if a TextField is used rather than TriggerField, it works as expected, with no need to do a fake click on the document, as shown below:
So, it's not possible to clear TreePanel's selection when the Filter field is clicked (focused) again, because, it's still focused. In other words, filterFocus function is not invoked because the Filter field still focused.
1 - View
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var filterFocus = function () {
App._trp.getSelectionModel().deselectAll();
}
var specialKey = function (campo, argumentosDoEvento) {
var tree = App._trp;
if (argumentosDoEvento.getKey() == argumentosDoEvento.DOWN) {
var firstVisibleNode = tree.getRootNode().findChildBy(function (node) { return !node.data.hidden; }, tree, true);
if (firstVisibleNode) {
tree.getSelectionModel().select(firstVisibleNode);
tree.focus();
setTimeout(function () {
tree.getView().focus();
}, 100);
}
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:TreePanel ID="_trp" Margin="10" RootVisible="false" Title="Ext.Net" Height="700" Width="500"
Margins="10" Border="false" runat="server">
<TopBar>
<ext:Toolbar Border="false" runat="server">
<Items>
<ext:TriggerField TriggerIcon="Clear" runat="server" TabIndex="1"
EnableKeyEvents="true" Flex="1">
<Listeners>
<Focus Handler="filterFocus();" />
<SpecialKey Fn="specialKey" />
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:TreeStore runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Task" />
<ext:ModelField Name="Column1" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn Text="Task" Lockable="true" DataIndex="Task" Flex="2"
runat="server" />
<ext:Column Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
</Columns>
</ColumnModel>
<View>
<ext:TreeView DeferEmptyText="false" />
</View>
</ext:TreePanel>
</body>
</html>namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index2()
{
return View();
}
public StoreResult LoadTreeFakeChildren()
{
NodeCollection nodes = new NodeCollection(false);
for (int index = 1; index < 6; index++)
{
Node no = new Node();
no.NodeID = index.ToString() + DateTime.Now.Second;
no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
no.CustomAttributes.Add(new ConfigItem { Name = "Column1", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });
nodes.Add(no);
}
return new StoreResult { Data = nodes.ToJson() };
}
}
}it's possible to overcome this issue by inserting the following code over javascript's line 14:
document.body.fireEvent('onmousedown');The code above makes a fake mouse click on the document, that will blur all controls.
Complete javascript after applying the change mentioned above:
<script type="text/javascript">
var filterFocus = function () {
App._trp.getSelectionModel().deselectAll();
}
var specialKey = function (campo, argumentosDoEvento) {
var tree = App._trp;
if (argumentosDoEvento.getKey() == argumentosDoEvento.DOWN) {
var firstVisibleNode = tree.getRootNode().findChildBy(function (node) { return !node.data.hidden; }, tree, true);
if (firstVisibleNode) {
document.body.fireEvent('onmousedown');
tree.getSelectionModel().select(firstVisibleNode);
tree.focus();
setTimeout(function () {
tree.getView().focus();
}, 100);
}
}
};
</script>Going further, if a TextField is used rather than TriggerField, it works as expected, with no need to do a fake click on the document, as shown below:
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var filterFocus = function () {
App._trp.getSelectionModel().deselectAll();
}
var specialKey = function (campo, argumentosDoEvento) {
var tree = App._trp;
if (argumentosDoEvento.getKey() == argumentosDoEvento.DOWN) {
var firstVisibleNode = tree.getRootNode().findChildBy(function (node) { return !node.data.hidden; }, tree, true);
if (firstVisibleNode) {
tree.focus();
setTimeout(function () {
tree.getView().focus();
}, 100);
}
}
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:TreePanel ID="_trp" Margin="10" RootVisible="false" Title="Ext.Net" Height="700"
Width="500" Margins="10" Border="false" runat="server">
<TopBar>
<ext:Toolbar ID="Toolbar1" Border="false" runat="server">
<Items>
<ext:TextField ID="TextField1" runat="server" TabIndex="1" EnableKeyEvents="true"
Flex="1">
<Listeners>
<Focus Handler="filterFocus();" />
<SpecialKey Fn="specialKey" />
</Listeners>
</ext:TextField>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTreeFakeChildren">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Task" />
<ext:ModelField Name="Column1" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn1" Text="Task" Lockable="true" DataIndex="Task" Flex="2"
runat="server" />
<ext:Column ID="Column1" Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
</Columns>
</ColumnModel>
<View>
<ext:TreeView DeferEmptyText="false" />
</View>
</ext:TreePanel>
</body>
</html>
Last edited by Daniil; Jul 16, 2013 at 4:28 AM.
Reason: [CLOSED]
