ExtJS 6.x Moderner Komponentenfokus

In ExtJS 6.x Modern machen Sie eine Komponente, die fokussieren kann.ExtJS 6.x Moderner Komponentenfokus

Ich habe versucht, beide tabIndex: 0, fokussierbar: True und haben die gesamte Dokumentation und Code von https://docs.sencha.com/extjs/6.5.2/modern/Ext.mixin.Focusable.html gelesen, aber was auch immer ich versuche, kann ich nicht den Container zu konzentrieren.

Wie erkennen Sie außerdem, dass der Container den Fokus verloren hat? Gibt es eine Möglichkeit, einem Focus-Leave-Event zuzuhören?

Quelle

2017-12-10 Tony J Watson

Was wollen Sie hier erreichen? Hast du eine Geige? [Unschärfe] (http://docs.sencha.com/extjs/6.5.2/modern/Ext.Container.html#event-blur) ist das Ereignis, das ausgelöst wird, wenn eine Komponente den Fokus verliert. –

Wenn ich Textfeld a, Textfeld b, meine Komponente, Textfeld c. Wenn ich in a klicke und einmal auf die Tabulatortaste klicke, wird das Textfeld angezeigt. Wenn ich die Tabulatortaste erneut drücke, sollte es zu meiner Komponente gehen (oder unsichtbar sein). Ich kann die Komponente nicht fokussierbar machen. Tut mir leid, keine Geige, ich sollte wohl einen Sencha-Geigen-Account machen. –

Was ist der Typ Ihrer Komponente? Ein "Panel" zum Beispiel? –

Fügen Sie den Code unten in einer sencha fiddle:

Ext.application({ 
name : 'Fiddle', 

launch : function() { 
Ext.create({ 
xtype: 'panel', 
fullscreen: true, 
bodyPadding: true, // don't want content to crunch against the borders 
title: 'Focusable Elements', 
items: [{ 
    xtype: 'textfield', 
    label: 'field A', 
    tabIndex: 2, 
    listeners: { 
     blur: function (field) { 
      console.log('field A loses focus!') 
     } 
    } 
}, { 
    xtype: 'textfield', 
    label: 'field B', 
    tabIndex: 1, 
    listeners: { 
     blur: function (field) { 
      console.log('field B loses focus!') 
     } 
    } 
}, { 
    xtype: 'panel', 
    title: 'Panel 1', 
    height: 200, 
    html: 'Focus on Me!', 
    tabIndex: 4, 
    focusable: true, 
    layout: { 
     type: 'vbox', 
     align: 'stretch', 
     pack: 'start' 
    }, 
    listeners: { 
     blur: function (panel) { 
      console.log('Panel 1 Lost Focus!'); 
     }, 
     focus: function (panel) { 
      console.log('Panel 1 Got Focus!'); 
     } 
    } 
}, { 
    xtype: 'panel', 
    title: 'Panel 2', 
    height: 200, 
    html: 'Focus on Me!', 
    tabIndex: 5, 
    focusable: true, 
    layout: { 
     type: 'vbox', 
     align: 'stretch', 
     pack: 'start' 
    }, 
    listeners: { 
     blur: function (panel) { 
      console.log('Panel 2 Lost Focus!'); 
     }, 
     focus: function (panel) { 
      console.log('Panel 2 Got Focus!'); 
     } 
    } 
    },{ 
    xtype: 'textfield', 
    label: 'field D', 
    tabIndex: 3, 
    listeners: { 
     blur: function (field) { 
      console.log('field D loses focus!') 
     } 
    } 
}], 
}); 
} 
});

Fokus auf Feld B und starten Sie die Registerkarte Taste drücken ..

Quelle

2017-12-13 13:14:30

ExtJS 6.x Moderner Komponentenfokus

Antwort

Verwandte Themen