web-dev-qa-db-fra.com

Mettre l'accent sur le champ de texte Extjs

Actuellement, j'ai eu un problème avec la mise au point sur le champ de texte extjs. Lorsque le formulaire s'affiche, je souhaite définir le focus sur la zone de texte Prénom et j'essaie d'utiliser la fonction build dans focus () mais je ne peux toujours pas le faire fonctionner. Je suis heureux de voir votre suggestion.

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);
javascriptextjs
21
Sokmesa Khiev

Parfois, il est utile d'ajouter un peu de retard lors de la mise au point. En effet, certains navigateurs (Firefox 3.6 à coup sûr) ont besoin d'un peu de temps supplémentaire pour rendre les éléments du formulaire.

Notez que la méthode focus() d'ExtJS accepte defer comme argument, alors essayez ceci:

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

Basé sur réponse de Pumbaa8 et réponse de Tanel J'ai essayé beaucoup de choses et trouvé un moyen de le faire. Voici le code:

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

pourquoi ne pas simplement ajouter defaultFocus : '#first_name' au lieu d'ajouter à beaucoup de lignes de code?

OU, après this.callParent(arguments); ajoutez cette ligne Ext.getCmp('comp_id').focus('', 10);

4
Raza Ahmed

Essayez d'ajouter la propriété suivante:

hasfocus:true,

et utilisez la fonction ci-dessous:

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

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

Je me bats avec ce problème aujourd'hui, et je pense avoir trouvé la solution. L'astuce consiste à utiliser la méthode focus() après l'appel de la méthode show() dans le panneau de formulaire. Autrement dit, ajouter un écouteur à l'événement 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);
            }
    });
    }
});
3
Carlos Gavidia-Calderon

J'ai également eu du mal à me concentrer sur une zone de texte dans Internet Explorer (Comme les suggestions ci-dessus fonctionnent bien dans chrome et Firefox). J'ai essayé les solutions suggérées ci-dessus sur cette page mais aucune d'entre eux ont travaillé dans IE. Après tant de recherches, j'ai trouvé la solution de contournement qui a fonctionné pour moi, j'espère que cela sera également utile aux autres:

Utilisez focus(true) ou si vous voulez retarder cela, utilisez simplement focus(true, 200) simplement. En référence au problème ci-dessus, le code serait:

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

Ça marche pour moi. Dans textfield ou textarea, ajoutez la configuration des écouteurs:

listeners:{
            afterrender:'onRender'
        }

Après, dans la fonction d'écriture de votre contrôleur:

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

Ext.defer est un habillage pour setTimout () . Sans Ext.defer () field.focus () ne fonctionne pas et je ne sais pas pourquoi. Vous ne pouvez pas écrire cette fonction dans écouteurs config au lieu d'utiliser le nom de fonction du contrôleur, mais la bonne pratique consiste à maintenir les fonctions dans le contrôleur du composant. Bonne chance.

1
Ivan Matskan

Utilisez l'événement afterlayout. Définissez un indicateur sur l'élément pour éviter de vous concentrer plusieurs fois pour plus de stabilité.

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

Mon formulaire était à l'intérieur d'une fenêtre et le champ de texte ne se concentrerait pas à moins que je ne concentre la fenêtre en premier.

                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
                    }
                }
0
Gavin Palmer