Move tab from form control to popup and from popup to form

Question

I have a popup opening next to the textbox. When I click on the tab key from the textbox it should be navigated to the close icon of the popup (top right corner) and when I click on the close button from the popup, focus should be set to the next control in the form and popup should be closed.

Here is the fiddle

So in fiddle, when I click on the tab from business structure drop down, focus should be set to the close icon(top right corner) and on each next tab it should be move to the next control inside the popup and from close button it focus should be on type dropdown

Answer 1

Its all about the method how to grab a component, which seems to have no connection to another component.

Here the solution is, that you set an alignTarget by using showBy.

Focus:

        focus: function(field){

            field.popup= Ext.create('tooltip' );
            field.popup.showBy(field.el, 'l-r',[10,0]);
        },

Listener:

        listeners: {
            'destroy' : function(win,ev) {
                const field = win.alignTargetFly,
                    next = field.next().component;
                
                next.focus();
             }
         },

By the pure number of questions you are asking here for the same component (3 or 4 so far), it might be better to grab professional help. Just ask someone to build a component by an image and a short description. This description could be instantly part of your documentation too. This might cost a one day of work.

From what I see so far I would do a custom component, that includes a field.base with the popup. This can be added as a single component to your library and be included instead of your field.

At the end this will be way cleaner in your codebase than what you are currently doing. Just for an example: Always keep the same order for components. After the extend line should be the xtype ... At the end it is easer to read for everyone.