Establecer el foco en el campo de texto Extjs

Question

Actualmente tengo un problema al establecer el foco en el campo de texto extjs. Cuando se muestre el formulario, quiero establecer el foco en el cuadro de texto Nombre y trato de usar la compilación en el foco de la función() pero todavía no puedo hacer que funcione. Me complace ver su sugerencia.

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

A veces ayuda agregar un poco de retraso al enfocar. Esto se debe a que ciertos navegadores (Firefox 3.6 seguro) necesitan un poco de tiempo extra para representar elementos de formulario.

Tenga en cuenta que el método de ExtJS focus()defer acepta como argumento, a fin de tratar lo siguiente:

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

Answer 2

Debe utilizar "AfterRender" evento para su campo de texto si usted desea ajustar el foco después de forma se representa.

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

Answer 3

Basado en Pumbaa80's answer y Tanel's answer He intentado muchas cosas y encontró una manera de hacerlo. Aquí está el código:

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

Answer 4

intenta agregar la siguiente propiedad:

hasfocus:true, 

y utilizar la función de abajo:

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

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

Answer 5

¿por qué no añadir defaultFocus : '#first_name' en lugar de añadir mucho a las líneas de código?

O, después de añadir esta línea this.callParent(arguments);Ext.getCmp('comp_id').focus('', 10);

Answer 6

He estado luchando con ese tema hoy, y creo que tengo la solución. El truco está en utilizar el método focus() después de llamar al método show() en el panel de formulario. Es decir, la adición de un oyente a la show evento:

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

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

} 

Answer 8

También he estado luchando con conseguir el foco en un cuadro de texto en el Internet Explorer (Como las sugerencias anteriores están trabajando muy bien en Chrome y Firefox) Probé las soluciones sugeridas anteriormente en esta página, pero ninguna de ellas funcionó en IE. Después de tantas investigaciones obtuve la solución que funcionó para mí, espero que sea útil también para otros:

Use focus(true) o si desea retrasar esto, simplemente use focus(true, 200). En ref del problema anterior el código sería:

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

Answer 9

Mi forma estaba dentro de una ventana y el campo de texto no se centraría menos que me he centrado la ventana en primer lugar.

   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 
        } 
       } 

Answer 10

Use afterlayout event. Establezca un indicador en el elemento para evitar enfocar varias veces para la estabilidad.

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