ExtJS Dynamically setting tab index - extjs

How can I dynamically set a tab index in ExtJS? I can't see anything in the docs for it, only a config option for it. If I try to do an .apply, it still doesn't work. I know I can probably extend the framework to support this since it is just a DOM element, but I'm sure I'm missing something simpler. Help?

It seems that in the extjs code for field they do this:
this.el.dom.setAttribute('tabIndex', this.tabIndex);

you can use the set method of the Element class which you can retrieve using the get method, so something like this: Ext.get('YOURELEMENTID').set({tabIndex:5});

If you want to include buttons in the tabindex, i'm afraid they have to be addressed seperatley:
this.btnEl.dom.setAttribute('tabIndex', this.tabIndex);

See the setActiveTab method of a tabPanel, which accepts either a string (id of the tab element) or an integer.

Related

Disable emmett in functions for styled-components

I keep getting emmett autocomplete suggestions even inside the template string used with styled/css/createGloablStyle when using styled-components. Is there a way I can get around to disabling emmett inside the function template string or maybe at least push it down the suggestions? It's not a problem per see but I have been exploring vscode and want to know if there's a setting that helps.
Image attached below for reference. The body tag I want to disable in autocomplete suggestions.
PS: I don't want to disable emmett globally or even in the file, just in the function scope.

how to use selectRootElement angular 2 Renderer method

what is the use of selectRootElement , when I tried to use this Renderer function
I am getting only root element but it's child not visible on UI .
May I get one example to understand this renderer method ?
Thanks in advance !
what's wrong with using selectRootElement if I only want to grab the element? It returns the element without its children and nothing changes in the view! Well, you can still use it of course, but you will be defeating its purpose and misusing it just like people do with DynamicComponentLoader#loadAsRoot and subscribing manually to EventEmitter.
See this https://stackoverflow.com/a/36059595/6554634 and here see the question also

React-select select menu list support html tag

I'm wondering if it's possible to enable html-tag support in react-select.
I'm using promise callback function to inject list of suggestion, and have added <em>tag into the results..
But there's no way to tell react-select consider it as html tag.
How to do that ?
You'll want to use the optionRenderer property for this, and define a custom method that returns your element. This can contain html.
See example of this in react-select documentation.
You should handle this as a string, and use Dangerously Set innerHTML to display it in your component.

Getting the active element within ExtJS?

Im trying to get the component that is active/focused at a given time. I already know that you can get a HTMLElement with the cross-browser javascript function document.activeElement.
How can I cast this element to a Ext.Component or does ExtJs have a similar function?
I've figured it out myself :)
var activeComponent = Ext.get(Ext.Element.getActiveElement());
Take a look at this : Ext.FocusManager. I have never used this feature, could you tell me if it fits with your needs?

How to use Jquery $(".something") to select a class in ExtJS?

I'm looking for an equivalent method to select a class element like this $(".className") in Jquery for ExtJS.
I understand that Ext.get() only takes in an id. Your help will be very much appreciated.
Cheers,
Mickey
Edited:
Let me explain further. I want to be able to do something like Ext.get after I did a "select". For example:
$(".className").css("width");
I understand that Ext.Element has getWidth() method. I was hoping I can do something like...
Ext.select(".className").getWidth(); // it just return me [Object object]
Maybe i don't understand it well.
Thanks a mil.
Yes, Ext.select() is what you want. It returns a CompositeElement (same API as a single Element, but contains an internal collection of all selected elements). You could do this to see the widths of each element:
Ext.select('.className').each(function(el){
console.log(el.getWidth());
});
The way you called it is more useful for operating on the elements in some way, e.g.:
Ext.select('.className').setWidth(100);
I think you are looking for:
Ext.query(".className");
This method allows you to get elements by the given query string like jQuery does.
EDIT
var els=Ext.query(".className"), ret=[];
for(var i=0; i<els.length; i++)
{
ret.push(els[i].getWidth());
}
If you want the component you can use this:
Ext4 and up.
Ext.ComponentQuery.query('panel[cls=myCls]');
And you will get and array of this components
source: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery

Resources