In a renderer I'm generating links, which I want to map to my controllers functions.
The ActionColumn does this with images somehow, but I don't get the mechanism behind it.
I would like to have buttons there, but ExtJS only lets me render strings in a grid.
Well.. the question is bit confused.
If you want to implement an ActionColumn with a callback, you will only have to implement the "handler" property which is the callback. See in http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action
Real buttons aren't possible out of the box (and note: you should not), but you can render a button on your own.
I would suggest a bunch of icons (with the ActionColumn). No buttons required.
Related
So right now I'm trying to build this radio list for the regions in LWC, the functionality works fine in that when you click on the regions it selects all the states below for that region.
https://i.stack.imgur.com/y2MM8.png
However, I want to stylize it so that it looks more proper. I'm a little confused how to do this using these components that LWC provides. Here's a mockup of what the regions should look like.
https://i.stack.imgur.com/A26PH.png
Here's what the HTML for it looks like.
https://i.stack.imgur.com/1vWcy.png
You can probably achieve this by using the grid system : https://www.lightningdesignsystem.com/utilities/grid/
We can achieve the same style by following a couple of steps:
Pass class to each lightning inputs to scope the styling.
Style radio controls having the passed class name.
save the file as .css and store in static resources.
Load style sheet in component by making use of loadStyle method from platformResourceLoader module.
Is it possible to download chart with additional data?
For example add labels when chart.download() method is called, I want these labels to be visible on download result (.png image), but not in rendered view.
I have label described in chart component, with property: hidden:true.
I've dived deep in Ext.draw.Container source code, but still have no clue about how to resolve the mentioned case.
Yes, but you will have to render two charts: Visible and "Invisible". In the following example I have two charts, the first one is visible, the second one is located below (You cannot see it because the scrolling is off). On clicking the Prevoew or Download button the "invisible" chart's .preview() and .download() methods are called.
FIDDLE
P.S.
Code is not clean, it is just the proof of concept.
I need to hide a CQ component from the page, when I select a particular value from another components dialog. Is this possible using ExtJS?
Yes, it is possible, but without more info it is difficult to give more details. In general, you can look up the xtypes you are using in your dialog at http://dev.day.com/docs/en/cq/current/widgets-api/index.html. Find the events that are available for the xtypes you are using in the dialog, then add a listener for one of the events exposed by that xtype. That allows you to run your own JavaScript code in response to an event--and that code could do things like hide HTML DOM elements.
Here is an example of using a listener to add custom functionality in response to an event: http://cq.shishank.info/2011/12/20/adding-limit-to-multifiled/
And here is another example: CQ5 - Hiding a tab within a component dialog depending on user group?
I’m very impressed with Josh's answer about ‘angular way’ and declarative style in client-side.
But can you help me to understand, how to do that:
I have a single-page app with the menubar in the left side, and div container on the right-side.
When user clicking the menu item in the left menubar, on the right side I must to open the new tab with some grid,like this:
In angular I realized the <grid> directive.
When user click menuitem, I must add dynamically this grid directive with params on the right side.
What is the angular way for doing this functionality?
Update:
I found article about dynamic tabs, and this is example how I use it in my case
Since you asked a general question, let me give you a general answer. It should be helpful :)
AngularJS is model/data driven, and if you want to make any change to the UI, the first thing you may think is how to achieve it by changing data. Given this idea, we can implement it like this:
Define a ng-repeater, which should render tabs for a list of Tab objects called MyTabs, for instance.
When you want to add a new tab, then create a tab object and add/push it to MyTabs.
AngularJS will magically render it on the UI, thanks to the 2-way data binding.
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.