PDA

View Full Version : [CLOSED] TriggerField does not blur after focusing another control.



RCN
Jul 11, 2013, 8:46 PM
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:

6533

6534

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>


2 - Controller


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');


6535

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>

Baidaly
Jul 11, 2013, 11:45 PM
Hello!

Try to use the following:



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);
App.TreeFilterField.triggerBlur();
setTimeout(function () {
tree.getView().focus();
}, 100);
}
}
};