[CLOSED] Field focus problem

[matrixwebtech]

I have 2 tab inside a tabpanel .I want to set focus when TAB key press on F 1 field then F 2 of TAB 2 is focused and mouse cursor pointed to F 2 .but the problem is instead of F 2 ,F 3 got focused .

@using Ext.Net
@using Ext.Net.MVC
@{
    var X = Html.X();
}
<script>
    var SwitchTab = function (Tabpanel, Panel) {
        console.log(Tabpanel)
        console.log(Panel)
        if (Panel != 'null' && Tabpanel != 'null') {
            Tabpanel.setActiveTab(Panel);
        }

    }
    var SetFocus = function (Item) {
        console.log(Item);
        Item.focus();
    }

</script>
@X.ResourceManager()
@(
X.FormPanel()
.Items(
 X.TabPanel().Border(false).BodyStyle("background-color: #F1F1F1;").ID("wintabpanel")
                .Items(

                // TAB
                X.Panel().Width(480).Padding(5).Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch }).AutoScroll(true)
                .ID("t1").Title("TAB 1")
                .Items(
  X.NumberField()
                    .ID("f1")
                    .FieldLabel("F 1")
                    .AnchorHorizontal("100%")
                    .AllowBlank(true)
                    .EmptyText("0")
                    .EmptyValue(0)
                    .LabelWidth(100)
                    .InputWidth(125)
                    .LabelAlign(LabelAlign.Left)
                     .Listeners(l => { l.SpecialKey.Handler = @"if (e.keyCode == 9) 
                                                                    {
                                                                    SwitchTab(#{wintabpanel},#{t2})
                                                                    SetFocus(#{f2});
                                                                    }"; })),
                     X.Panel().Width(480).Padding(5).Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch }).AutoScroll(true)
                .ID("t2").Title("TAB 2")
                .Items(                                                                      
                    X.TextArea()
                    .ID("f2")
                    .FieldLabel("F 2")
                    .AnchorHorizontal("100%")
                    .AllowBlank(true)
                    .EmptyText("0")
                    .EmptyValue(0)
                    .LabelWidth(100)
                    .InputWidth(125)
                    .LabelAlign(LabelAlign.Left),
                    
                    X.TextField()
                    .ID("f3")
                    .FieldLabel("F 3")
                    .AnchorHorizontal("100%")
                    .AllowBlank(true)
                    .EmptyText("0")
                    .EmptyValue(0)
                    .LabelWidth(100)
                    .InputWidth(125)
                    .LabelAlign(LabelAlign.Left)
                    )
                    
                    )
                    ))

please check the sample.

[Daniil]

Hi @matrixwebtech,

Please add this into the SpecialKey Handler.

e.preventDefault();

[matrixwebtech]

Thanks for reply.problem solved.
Why we use e.preventDefault();?

[Daniil]

It prevents the browsers default handling of the event.
http://docs.sencha.com/extjs/4.2.1/#...preventDefault

In your scenario, you focus a field, then the tab default behavior happens after that.

[matrixwebtech]

Thanks daniil.this can be close.

[matrixwebtech]

Hi,I am facing a little problem.I have three textfields tt1,tt2,tt3 and I want on tab press in tt1 set mouse focus in tt3 I use bellow code

@(X.TextField().ID("tt1")
   .Listeners(l=>{
       l.SpecialKey.Handler = @"e.preventDefault();if (e.keyCode == 9) 
                                {
                                    App.tt3.focus();
                                }"; 
   })) 

@(X.TextField().ID("tt2")
   .Listeners(l=>{
       l.SpecialKey.Handler = "";
   })) 

@(X.TextField().ID("tt3")
   .Listeners(l=>{
       l.SpecialKey.Handler = "";
   }))

but many keys not working in tt1 .like Delete,Back Space,Ctrl+Shift+left arrow etc... I think this is causes for

e.preventDefault()

,but without that tt3 not focused after Tab press in tt1

[Daniil]

Please call e.preventDefault() only if it is needed to call. I mean that, probably, you could move it inside the if statement.