Установить фокус на текстовое поле Extjs

Question

В настоящее время у меня проблема с настройкой фокуса на текстовое поле extjs. Когда форма показывается, я хочу установить фокус на текстовое поле Имя и пытаюсь использовать встроенную функцию focus (), но все равно не могу заставить ее работать. Я рад видеть ваше предложение.

var simple = new Ext.FormPanel({

    labelWidth: 75, 
    url:'save-form.php',
    frame:true,
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            id: 'first_name',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, new Ext.form.TimeField({
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        })
    ],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

simple.render(document.body);

Answer 1

Иногда помогает добавить небольшую задержку при фокусировке.Это связано с тем, что некоторым браузерам (наверняка, Firefox 3.6) требуется немного дополнительного времени для визуализации элементов формы.

Обратите внимание, что метод focus() ExtJS принимает defer в качестве аргумента, поэтому попробуйте:

Ext.getCmp('first_name').focus(false, 200);

Answer 2

Основано на ответе Pumbaa80 и ответе Танела Я перепробовал много вещей и нашел способ сделать это.Вот код:

{
    fieldLabel: 'First Name',
    name: 'first',
    id: 'first_name',
    allowBlank: false,
    listeners: {
      afterrender: function(field) {
        field.focus(false, 1000);
      }
    }
}

Answer 3

Вы должны использовать событие "afterrender" для своего текстового поля, если вы хотите установить фокус после визуализации формы.

    {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus();
          }
        }
    }

Answer 4

почему бы просто не добавить defaultFocus : '#first_name' вместо добавления к большому количеству строк кода?

ИЛИ, после this.callParent(arguments); добавить эту строку Ext.getCmp('comp_id').focus('', 10);

Answer 5

Попробуйте добавить следующее свойство:

hasfocus:true,

и используйте функцию ниже:

Ext.getCmp('first_name').focus(false, 200);

{
    id: 'fist_name',
    xtype: 'textfield',
    hasfocus:true,
}

Answer 6

Я боролся с этой проблемой сегодня, и я думаю, что нашел решение. Хитрость заключается в использовании метода focus() после вызова метода show() на панели форм. То есть добавление слушателя к событию show:

Ext.define('My.form.panel', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
        this.on({
            show: function(formPanel, options) {
                formPanel.down('selector-to-component').focus(true, 10);
            }
    });
    }
});

Answer 7

Это работает для меня. В текстовое поле или текстовое поле добавьте конфигурацию слушателей:

listeners:{
            afterrender:'onRender'
        }

После, в вашем контроллере напишите функцию:

onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}

Ext.defer перенос для setTimout () . Без Ext.defer () field.focus () не работает, и я не знаю почему. Вы не можете написать эту функцию в listeners config вместо использования имени функции контроллера, но хорошей практикой является удержание функций в контроллере компонента. Удачи.

Answer 8

Я также изо всех сил пытался сфокусироваться на текстовом поле в Internet Explorer (так как вышеупомянутые предложения хорошо работают в Chrome и Firefox).Пробовал решения, предложенные выше на этой странице, но ни один из них не работал в IE.После стольких исследований я нашел обходной путь, который сработал для меня, и я надеюсь, что он будет полезен и другим:

Используйте focus(true) или, если вы хотите отложить это, просто используйте focus(true, 200).В связи с вышеуказанной проблемой код будет:

  {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus(true);
          }
        }
    }

Answer 9

Использовать afterlayout событие. Установите флажок на элементе, чтобы предотвратить многократную фокусировку для стабильности.

afterlayout: function(form) {
  var defaultFocusCmp = form.down('[name=first]');
  if (!defaultFocusCmp.focused) {
    defaultFocusCmp.focus();
    defaultFocusCmp.focused = true;
  }
}

Answer 10

Моя форма находилась внутри окна, и текстовое поле не фокусировалось, если я сначала не сфокусировал окно.

                listeners: {
                    afterrender: {
                        fn: function(component, eOpts){
                            Ext.defer(function() {
                                if (component.up('window')){
                                    component.up('window').focus();
                                }
                                component.focus(false, 100);
                            }, 30, this);
                        },
                        scope: me
                    }
                }