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

В настоящее время у меня возникла проблема с настройкой фокуса на текстовое поле extjs. Когда появится форма, я хочу установить фокус на текстовое поле "Имя", и я пытаюсь использовать функцию build в функции 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);

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

hasfocus:true,

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

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

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

Ответ 5

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

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

Ответ 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);
            }
    });
    }
});

Ответ 7

Я также боролся с тем, чтобы сосредоточиться на текстовом поле в 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);
          }
        }
    }

Ответ 8

UIManager.SetFocusTo = function (row, column) {
    var grd = Ext.getCmp('gridgrn');
    grd.editingPlugin.startEditByPosition({ 'column': column, 'row': row });

}