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?
Related
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
In my sencha mobile web app I have dynamically created elements/containers in my view.
Each has a uniquie id but all same the same css class.
I am trying to find a way to remove them using the css class. The reason I need to use the css class and not the id is that the number created cannot be determined at runtime.
I have tried Ext.select('.myContainer').remove(); but that give error "has no method 'remove' "
I also tried
var main = Ext.getCmp('mainpage');
main.remove(main.down('.siteContainer'));
but that did nothing at all.
I'm still new to Sencha. Any advice would be very much appreciated.
I was hoping for something similar to jquery's $('.classname').remove() which will work on multiple elements at the same time.
Did you try with removeNode or with destroy ?
I solved it by using jquery to get the ID of each component with the same class, then used senchas destroy() on the acquired ID.
$( $('.siteContainer') ).each(function( index ) {
var thiscont = $(this).attr('id');
Ext.getCmp(thiscont).destroy();
});
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.
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
HI,
I am just trying to set a field value and disable it at the same time.
Can this be done in ext js? The docs are very weak on this subject.
something like this generates errors:
myForm.getForm().findField('start_date').setValue('').setDisabled(true);
I'm used to JQuery which does this sort of thing nicely but haven't had luck with Ext.
Thanks for any help.
Actually, Field.setValue does in fact return a reference to the field (docs), so you should be able to call setDisabled (inherited from Component) as you have it. You must have some other issue going on. Maybe findField('start_date') is returning null. You have to make sure all the return values are what you expect. Use Firebug to figure out the error, or break apart your statement and see which call is actually failing.
Anything is "chainable" as long as the return value is the object itself (usually denoted as this in the docs). In jQuery, everything operates on DOM elements, so it is consistent. In Ext, you have lots of components with various behaviors. Sometimes chaining makes sense, sometimes it does not -- just make sure you check the docs when you aren't sure.
i agree with bmoeskau it should work if the field is there and found by the form. I would advise you to to it something like that to prevent errors:
var field = myForm.getForm().findField('xyz');
if(field !== undefined)
{
field.setValue('');
field.setDisabled(true);
}
else
{
// Error Handling
}
This is because setValue() method doesn't return field object. You cannot use setDisabled() in such way.
EDIT: (For those down-voting morons)
From ExtJS documentation:
method: setValue(value)
Parameters:
value : Mixed
The value to set
Returns:
void