I'm using casperJS to capture a portion of the screen using casptureSelector method with the code below:
this.waitForSelector(config.selector, function () {
this.then(function() {
this.captureSelector(config.imageFileName, config.selector);
});
});
it is possible to pass #someId for an an id selector and .someClass for a class selector.
But how can I pass multiple classes selector like .someClass.otherClass ?
I tried many variations but I'm unable to make it work.
I believe you can you any valid css selector so for multiple classes select you just separate the string with a comma:
'.firstSelector, .secondSelector'
You can't path an array but you can dynamically build with Array.join a string of comma separated classes
EDIT
I believe this would work only if the selection results in a single DOM element . If you drill into the code, the selector is used to find the capture bounds and adjust zoom., an inner method for calculating the bounds calls findOne with the selector, so I guess (without really digging into findOne method that it would return the first element if a query results in multiple DOM elements.
Related
I'm using a chart to render a piechart for my app. I have:
Ext.query('.highcharts-container')
that gives me an array of highchart-containers and I'd like to add a custom class to every one of them to add some custom css. I tried:
Ext.query('.highcharts-container').addCls("test")
but says "addCls" is not a function.
below is the img of how it looks:
and accord to the answers below, i tried adding it in seperate app, and it works, but for some reason in this case it constant shows undefined.no clue whts going on?
Ext.query returns an array. Instead, use Ext.select which returns a CompositeElement. It lets you run Ext.dom.Element methods on a group of elements:
Ext.select('.highcharts-container').addCls("test");
Ext.query will return an array of matching components. If you're sure there will always be exactly 1 item in the array, you can use:
Ext.ComponentQuery.query('.highcharts-container')[0].addCls("test")
Otherwise, you should loop through the items and add the class to each component.
Ext.ComponentQuery.query('.highcharts-container').forEach(function (item) {
item.addCls("test");
});
I have a component that needs to know how many components thats currently added to the very same placeholder, this since it needs to update a value of an html-attribute based on its index within the placeholder.
Is there anyway to get either the number of components thats already added to a placeholder, or to get the current-renderers index?
Usually I would just use a simple for-loop and set the attribute, but since its a placeholder with components thats not an option.
Thanks in advance!
Try this:
var placeholder = "my-placeholder";
var renderingReferences = Sitecore.Context.Item.Visualization.GetRenderings(Sitecore.Context.Device, true);
var renderingsInPlaceholder = renderingReferences.Where(r => r.Placeholder.EndsWith('/' + placeholder, StringComparison.OrdinalIgnoreCase));
var numberOfRenderingsInPlaceholder = renderingsInPlaceholder.Count();
Update: Changed search for placeholder key from IndexOf to EndsWith.
What is the HTML attribute you are trying to update and how are you planning on update this value? From C# code at render time? Or do you want to store this value when a component is added in the Page Editor and store the value against a Sitecore Item?
It depends on what your use-case is, but by suggestion for front-end use would be to execute this logic using JavaScript, otherwise you have to hook into Sitecore pipelines, find your HTML element and the add the attribute appropriately. Saving this value when a component is added means you need to r-run the login for the entire placeholder and update any stored values, since it will (should) be possible for the user to components anywhere...
Something like the following to add a order order data-attribute to a list of elements. If this is being used by another plugin the make sure you run this code before initializing your plugin.
// get element + its siblings
var $els = $('.selector').siblings().addBack();
// loop and add data-attr with index number
$els.each(function(index, element) {
$(this).attr('data-sortorder', index);
}
Is there a method to query for a child component of xtype 'yourxtype' ?
For example you have a panel, and inside this panel is a custom xtype located on a toolbar.
The findParentByType works great for looking up, but there is not method like findChildByType.
And the down method works only on elements. The Ext.ComponentQuery is a singleton, but not for xtypes?
Is there another way to query from a component down?
yourCt.down will find the first instance of a container with the specified type, in the component's children and descendants.
yourCt.child will do the same, but restrict to the direct children of the container.
yourCt.query will find all of the matching components underneath the container, as an array.
yourCt.up will find the first parent of the container that matches.
Oh, and Ext.ComponentQuery.query can take an optional object that is used as the start point for the query.
These are all based off (and clearly documented in) Ext.ComponentQuery
There is also a down method for component queries, but it is only available for containers. And component queries looks in xtypes for identifiers with no prefix (eg. "#", ".", etc.), it has no importance if the xtype is defined by Ext or your self. So jut do:
var child = yourCt.down('yourxtype');
This worked for me
This returns an array of instances with the mention xtype.
Ext.ComponentQuery.query('fieldxtype')
This returns only single instance i.e if we have 5 instances of the xtype.it will return only first instance of the xtype
formpanel.down('fieldxtype')
if you want get an component by name you can use
var componentArray = Ext.ComponentQuery.query('[name=checkboxName]');
var componentObj = Ext.ComponentQuery.query('[name=checkboxName]')[0];
You can simply query using
Ext.ComponentQuery.query('myXtype') this will return an array of all instances of your type.
How can I get a list of items from a Ext.form.Fieldset? I'm trying to find a component based on one of its properties, this is what I've got so far:
Ext.each(container.items, function (component) {
if (component.name == config.name) {
component.doUpdate(config);
}
}, me);
Of course, items is undefined...so what can I do to access the components contained in my container, which is a fieldset?
You can use container.down(selector) or if its a form field use form.findField(name).
See this answer on the different ways to 'find' things in an extjs app:
Testing extjs apps
For form fields here is an answer that lists different tricks: Best way to access adjacent components / fields
EDIT: Use container.query(selector) method to get an array of objects. As down() method returns first found.
I have a ExtJS page that is outputting the following DOM.
I want to select a specific element so that I can respond to a click on it.
However, the following code never selected the elements that are built with the extJS library. JQuery can't seem to select them either.
ExtJS can't even find an element that is defined in the <body> element in the HTML file itself. However, JQuery can indeed select an element defined in the <body> element.
I have been reading this guide which seems to indicate it should be no problem to just use Ext.get() and Ext.select() to get elements, however, as the following code shows, the elements are never selected.
How do I select an element in ExtJS?
var members = Ext.select('x-panel');
for (var i = members.length - 1; i >= 0; i--){
element = members[i];
element.on('click', function() { alert('test');})
};
Try Ext.select('.x-panel') with a period in the selector, which is required for selecting by class name.
bmoeskau is right, you can use Ext.select('.x-panel') which returns a collection of divs with class x-panel.
Note that Ext.get() just returns a single element, so if you want to get multiple matches you should use Ext.select() or Ext.query().
And what's more, Ext.select() returns Ext.CompositeElement, though the document does not list but it supports all the methods of Ext.Element so your example can be simply written as:
Ext.select('.x-panel').on('click', function(){ alert('test') });
Code above will add event handler for click operation to each x-panel.
Use:
Ext.get(el);
if you need to get the flyweight element, use:
Ext.fly(el);
See the API documentation for the Static Ext object for details