I am using this project for the react map: https://github.com/gabidavila/react-usa-map
Here is a live example: https://codesandbox.io/s/frosty-christian-9gzcjx
I have a similar react project but thought posting that example would be easier.
mapHandler = event => {
alert(event.target.dataset.name);
};
For this event handler, I would like to alert the full state name instead of the abbreviation.In my actual project, I am setting the state based on what the user clicks on and using that to dynamically filter a grid. Problem is that the items in the grid are full state names instead of abbreviations.
Any help would be great. Thanks!
You'd need to read their documentation and see if they support full names.
If they seem to only support abbreviations, you may need your own mappings.
What that means is, you may take the abbreviation from event.target.dataset.name and map it into an object that contains the full name. Something like this:
const stateMappings = { NY: 'New York', CA: 'California'}
You can add more to the object above.
Then we can do a lookup in the object like so:
alert(stateMappings[event.target.dataset.name]);
Full code:
mapHandler = event => {
alert(stateMappings[event.target.dataset.name]);
}
Related
I have a situation where I need to disable the button(added as widget for widget column) when I receive one web socket event. When receiving the web socket I might be in any page. So how to get the reference of that button widget and disable it.
I have created a fiddle WidgetTestFiddle
Can anyone please help.
Thanks in advance
You could use the Ext.ComponentQuery.
Using the query method you can search for the buttons inside your grid.
You probably want to give your buttons an itemId (e.g. itemId: 'widgetcolumn-button-switch') to ensure that you only find the buttons you want.
Using the itemId your search query would look like this: 'button[itemId="widgetcolumn-button-switch"]'
I forked your fiddle and created my own version to illustrate my point: Sencha fiddle example
I think there are several ways to achieve your wanted result.
KaMuns answer will work, but can be tricky in case you use a buffered store / grid. Because the pages in this case are handled internally by the store. Using a static itemId wont work in this case out of the box.
I would suggest you rely on the record data.
Everytime you recieve a websocket message, update the store and refresh the grid view can be an option.
I have modified your fiddle here:
https://fiddle.sencha.com/#view/editor&fiddle/3a87
Here are is the most relevant part:
var grid = btn.up('grid');
var models = grid.getStore().getData().getRange(); // of cause you can use find or another way here
var model = models.filter(mod => mod.get('actualRole') === 'Follower');
model[0].set('showBtn', false);
grid.getView().refresh(); // get ref to view and refresh because data changed
On top you can have a look on the defaultBindProperties and may change this to the hidden key of the button.
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 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 am working on a project in ExtJS 4.2 written in the MVC pattern. I need a reference to a specific item inside MyViewport (extended from the class Ext.container.Viewport). The item which needs to be referenced from within the controller has the Class MyPanel (extended from "Ext.Panel"). Problem is there are several items with the same class, so simply doing a standart ExtJs-component-query like,
//inside myController.js
refs: [
...
{ref: 'specificItem', selector: 'MyViewport_alias > myPanel_alias'},
...
]
wont get me a reference to the item. Thats why i thought of retrieving the reference by something like this, since the items using MyPanel-class have a property title:
//inside myController.js
refs: [
...
{ref: 'specificItem',
selector: 'MyViewport_alias > myPanel_alias > title="title of specific item"'},
...
]
But i coulnd't find any examples on retrieving items as references by using their properties as parts of the component query other than this.
Has someone experience with this kind of problem?
Component queries in ExtJS are very similar to CSS query selectors. You could find a component by a specific property with syntax similar to: "... > [title=My Component Title]" - that said, using the "title" sounds like really bad practice.
At worst, as a visible part of the user-interface it's very sensitive to change - easily breaking your application and at best it immediately limits your application's language-support and configurability.
Ideally you should be utilising the itemId property as a more robust way of referencing components.
» fiddle
I hadn't noticed that 4.2 didn't support attribute selectors - the component query functionality seems to have always drawn inspiration from CSS though, so unfortunately if it's only a recent development it doesn't look like there's any way to do what you want using this method.
You'd have to manually fetch the component and/or create your own reference. You can select by xtype / alias in 4.2 and then apply a filter to the result, for example:
Ext.Array.filter(Ext.ComponentQuery.query('panel'), function(x){
return !!x.title.match('Sub Panel 2');
}).shift();
( Obviously no use in a controller's refs )
» fiddle
... this is however ugly - all the more reason to use itemId's properly. There was already an example of this in action in the first fiddle. All you need to do is assign an alphanumeric string (no spaces) to the property - these don't strictly need to be unique but it's generally preferable. Then in your selector simply prefix a hash # in front of the string which indicates to the engine that you are looking for a component with a specific ID.
itemId selectors definitely work in 4.2 so without seeing your code I can only speculate as to what the problem is. In your post you are using > which narrows the query to direct descendants only. Are you absolutely sure that the component you are looking for is a child of myPanel_alias and not wrapped up in another container? i.e.
"myPanel_alias #myItemId" <-- try this
"myPanel_alias > #myItemId" <-- instead of this
I need to update a Store based on some information that I have.
I have a table in the document, that uses some Store to keep data,
and in separate part of page I have a button that needs to add some information to the Store (and table). I got a bit confused, so, I just ask here all I need to know:
Which property in table configuration needs to be specified to locate table later?
Which call I need to make to find the table and locate its store?
How I can generate and append data to the table's existing store?
The "table" you are referring to is Grid in ExtJS terminology.
1. To get the grid for later use, you need a reference to that object. There are many ways in ExtJS to get hold of this reference.
Using Javascript Variables: Most simple way is to have a javascript variable that will hold the reference. This is usually done when the grid is created. For example:
var myGrid = Ext.create('Ext.grid.Panel', {
// All the configs...
});
You can use the myGrid variable to get access to the grid.
Using ComponentManager: When an ExtJS component is created, it gets registered with the component manager. You can always get hold of an ExtJS component from this register. The manager tracks each component with a unique id. To use this method, you will have to define a unique id for your grid component and later use the famous Ext.getCmp() method. Here is an example:
var myGrid = Ext.create('Ext.grid.Panel', {
id: 'myGrid', // Unique id for the grid
// All other configs...
});
Using this method is NOT the best practice.
Using itemId and Component Query: A better method than the above two; you can use the itemId config and ComponentQuery. ComponentQuery class provides a selector-based searching for Sencha Components analogous to DOM querying. Example:
var myGrid = Ext.create('Ext.grid.Panel', {
itemId: 'myGrid',
// All other configs...
});
And to get a reference, you may call the query() method from a container or use Ext.ComponentManager (this is global).
Accessing in MVC controller: If you are developing your application using MVC, you can make use of this method. A controller have reference array namely: refs. (Internally, the method makes use of ComponentQuery and selectors to access the component). Refer MVC guides and examples to see how this works..
2. Once you obtain the grid with any the above techniques, you can get the store simply by calling the method: getStore(). This returns the store object (Ext.data.Store). Example:
myStore = myGrid.getStore();
3. Refer the Ext.data.Store documentation. you can manipulate your grid's store using methods like add(),load(),remove() etc...
FYI.
It is not
Ext.Cmp()
it is
Ext.getCmp('myGrid')