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
Related
I have dynamically generated input elements with unique Id. I need to bind click event for each input element which will perform different action.
Is there any better way to achieve this?
Assuming you mean call methods on the controller scope dynamically, you want something like this:
$scope.callFn = function(fn) {
$scope[fn]();
}
then
<input ng-click="callFn(foo)" />
but you really need a lot more detail in your question to give a better answer.
I have a plunker that is trying to sort a collection of objects for display. The map looks like...
{
test1:{
name:'Cccccc',
title:'Aaaaaa'
}
}
I would like to order this list by title using a filter, however, the following seems to fail...
this.drawers = $filter('orderBy')(this.drawers, 'title', false);
I found an answer to a similar question, however, this does not appear to apply to my scenario because it changes the structure of the object returned from the filter. Does anyone know how I would write a custom filter to handle this?
I have an angular-rails resource with a property that consists of irregular data that is potentially quite complicated-- something like:
{ foo: [ { bar: 'baz', lol: [ { 'omg': ... etc
I built a directive which takes this data and drills down into it, dynamically rendering form fields for each object... I've got the data displaying perfectly, however the piece of the puzzle that's missing is, how can I take advantage of Angular's binding so that changing the value on the form input will actually update that attribute in the model?
Originally I was thinking this should be simple, as my code drills through the data structure, it can just be maintaining a path, so I'd end up with something like: 'myObject.foo.bar'
Then I could just pass that to the form input's ng-model attribute...... however, I could not get angular to recognize ng-model="path" where $scope.path = "myObject.foo.bar"... ng-model="{{path}}" did not work either.
My directive is using angular.forEach to drill down into this datastructure, and someone had mentioned to me that I should perhaps be using ng-repeat instead, but I wasn't sure if this is the correct way to go or not? I still feel like there should just be a way to do ng-model="path" and have that work...
Any guidance would be greatly appreciated.
To use dynamic property names, use array notation. I.e. myObject["foo"]["bar"]. Plunkr: http://plnkr.co/edit/W60F75?p=preview
Can you try setting an property on the scope with the value of the object itself and then refer it in the form element? Like below:
// In your script
$scope.obj = myObject;
// In your form
<input ng-model="obj.foo.bar" type="text" />
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 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.