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");
});
Related
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.
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);
}
I am using the Mariontte ItemView 'ui' to create short hands for selectors.
class MyView extends App.Views.ItemView
ui:
myItem: "#item"
However when I call #ui.myItem I'm being returned an array so the actual element is inside #ui.myItem[0]
What's causing this behavior? It's an issue for me as I'm doing a compare between #ui.myItem with the event.target element from an event so they don't match and now I have to do some fiddling.
This is a jQuery thing. When it selects an element it's actually storing it in an array-like object. Using #ui.myItem[0] to compare is one way to go. Another way is #ui.myItem.get(0).
While the first approach above is what I would recommend, you could also compare using jQuery.is.
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 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.