1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    19
    Vote Rating
    0
    adrianbj is on a distinguished road

      0  

    Default Answered: Ext.get(id).focus() Ext.getCmp(id).focus() doesn't work

    Answered: Ext.get(id).focus() Ext.getCmp(id).focus() doesn't work


    Hello partners:
    I'm trying to override de enter key instead Tab key as navigation key on a form. What I do is to catch the enter key and then set the focus into the next field in the form, but it'doesn't work. It works when i try to highlight the field but the focus not. The code of the panel that i'm showing is this:
    Code:
    Ext.define('MyApp.view.ui.MyPanel1', {
        extend: 'Ext.panel.Panel',
        model: "Task",
        height: 450,
        width: 354,
        title: "description",
        initComponent: function() {
            Ext.FocusManager.enable();
            var me = this;
            var form = {};
            form.items = [
                    {
                        xtype: "textfield",
                        width: 354,
                        name: "idTask",
                        id: "idTask",
                        labelAlign: "left",
                        selectOnFocus: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.get(form.items[1].id).focus();
                              }
                            }
                          }
                    },
                    {
                        xtype: "lookuplist",
                        width: 354,
                        name: "whomakes",
                        id: "whomakes",
                        labelAlign: "left",
                        forceSelection: true
                    },
                    {
                        xtype: "lookuplist",
                        width: 354,
                        name: "taskType",
                        id: "taskType",
                        labelAlign: "left",
                        forceSelection: true
                    }
            ];
            return form;
        }
    });
    If anyone can help me with his knowledge would greatly appreciate it .

  2. I can't help with CCI. Here's an example of it working in plain ExtJS:

    Code:
    Ext.create('Ext.panel.Panel', {
        height: 300,
        renderTo: Ext.getBody(),
        width: 300,
        items: [
            {
                xtype: 'textfield',
                listeners: {
                    specialkey: function(field, event) {
                        if (event.getKey() === event.ENTER) {
                            field.ownerCt.getComponent(1).focus();
                        }
                    }
                }
            }, {
                xtype: 'textfield',
                listeners: {
                    specialkey: function(field, event) {
                        if (event.getKey() === event.ENTER) {
                            field.ownerCt.getComponent(0).focus();
                        }
                    }
                }
            }
        ]
    });

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    A couple of thoughts.

    Is the specialkey event even firing? Put in some logging to confirm. If not, try this:

    http://docs.sencha.com/ext-js/4-0/#!...nableKeyEvents

    You're also going to have problems accessing items like that. The items property is not an array, it's a MixedCollection. form.items[1] is most likely undefined and I'd expect that line to throw an error.

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    19
    Vote Rating
    0
    adrianbj is on a distinguished road

      0  

    Default Thanks for your help =)

    Thanks for your help =)


    Yes, the specialkey event is fired, because when i replace the .focus by .hightlight it works.
    Then, the second question. If I want to do it that way, as it should?

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The more I look at your code the more confused I get. You seem to be extending Ext.panel.Panel but you aren't calling the superclass's initComponent from within your initComponent. You're also specifying a model config option, which seems a bit odd.

    To be honest, I don't understand how that code could possibly work for highlighting either.

    Try your code in different browsers. Does focussing fail in all of them?

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    19
    Vote Rating
    0
    adrianbj is on a distinguished road

      0  

    Default Explanation

    Explanation


    Thanks again for your help,
    What happens is I use a framework that encapsulates many of the statements made in ExtJS and in the backend i have jpa, that is the reason for the model property and why i don't call initComponent neither me.callparent(arguments). So to define a panel I simply put:
    Code:
    CCI.defineInspectPanel({
        model: "Task",
        height: 450,
        width: 354,
        titleTpl: "{description}",
        initForm: function() {
            Ext.FocusManager.enable();
            var me = this;
            var form = {};
            form.items = [
                    {
                        xtype: "textfield",
                        width: 354,
                        name: "idTask",
                        id: "idTask",
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[1].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "lookuplist",
                        width: 354,
                        name: "whomakes",
                        id: "whomakes",
                        labelAlign: "left",
                        forceSelection: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[2].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "lookuplist",
                        width: 354,
                        name: "taskType",
                        id: "taskType",
                        labelAlign: "left",
                        forceSelection: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[3].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "lookuplist",
                        width: 354,
                        name: "color",
                        id: "color",
                        labelAlign: "left",
                        forceSelection: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[4].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "numberfield",
                        width: 354,
                        name: "weight",
                        id: "weight",
                        maxLength: 2,
                        allowDecimals: false,
                        decimalPrecision: 0,
                        maxValue: 10,
                        minValue: 1,
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[5].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "textfield",
                        width: 354,
                        name: "duration",
                        id: "duration",
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        id: "duration",
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[6].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "textareafield",
                        height: 41,
                        width: 354,
                        name: "checkListIn",
                        id: "checkListIn",
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[7].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "textareafield",
                        height: 41,
                        width: 354,
                        name: "checkListOut",
                        id: "checkListOut",
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[8].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "textareafield",
                        height: 41,
                        width: 354,
                        name: "description",
                        id: "description",
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[9].id).focus();
                              }
                            }
                        }
                    },
                    {
                        xtype: "textareafield",
                        height: 41,
                        width: 354,
                        name: "comments",
                        id: "comments",
                        labelAlign: "left",
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        listeners: {
                            specialkey: function(field,event){
                              if (event.getKey() == event.ENTER) {
                                  Ext.getCmp(form.items[0].id).focus();
                              }
                            }
                        }
                    }
            ];
            return form;
        }
    });

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    19
    Vote Rating
    0
    adrianbj is on a distinguished road

      0  

    Default Always thanks

    Always thanks


    Todo esta hecho con un framework para ExtJS, llamado CCI que ya esta implementado,
    Es por eso que me enfoque solo en la parte del "MixedCollection" que dijiste antes, y en la forma de capturar el evento enter y emular el tab, He probado en otros exploradores, (Firefox y Safari) en ninguno funciona.

  8. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    19
    Vote Rating
    0
    adrianbj is on a distinguished road

      0  

    Default Always thanks

    Always thanks


    Everything is done with a framework for ExtJS, called CCI that is already implemented,
    That's why I focused only on the part of the "MixedCollection" you said before, and how to capture the whole event and emulate the tab, I have tried in other browsers (Firefox and Safari) in any work.
    I hope you see beyond and lead me to the solution

  9. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I can't help with CCI. Here's an example of it working in plain ExtJS:

    Code:
    Ext.create('Ext.panel.Panel', {
        height: 300,
        renderTo: Ext.getBody(),
        width: 300,
        items: [
            {
                xtype: 'textfield',
                listeners: {
                    specialkey: function(field, event) {
                        if (event.getKey() === event.ENTER) {
                            field.ownerCt.getComponent(1).focus();
                        }
                    }
                }
            }, {
                xtype: 'textfield',
                listeners: {
                    specialkey: function(field, event) {
                        if (event.getKey() === event.ENTER) {
                            field.ownerCt.getComponent(0).focus();
                        }
                    }
                }
            }
        ]
    });

  10. #9
    Sencha User
    Join Date
    Sep 2011
    Posts
    19
    Vote Rating
    0
    adrianbj is on a distinguished road

      0  

    Default Thanked really

    Thanked really


    Probe with that code and still does not work. I guess it must be a framework problem or something .. Because I have seen many examples and it works, but for some reason the focus is not working ... Eye web console does not show any error.
    In any case thank you very much ... for help

Thread Participants: 1