Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
Related
In a day view, how to change style of the event content.
I am able to make custom toolbar and change some styling for timeSlotWrapper but not able to take control of event content.
I have tried below code and achieved some customization using below code.
I have created a sandbox with all the code I have so far.
Currently I have this:
Expected -
I want to be able to show those colored bars with event content.
I tried searching in issues but could not find any code that can help me so far.
Could someone pls help point me to right direction?
Thank you.
You can provide a custom event layout and pass it into your components prop
<Calendar
components={{
event: CustomEvent
}}
...other props
/>
you can also use the eventPropGetter prop for adding in additional classnames or styles.
I'm going through Angular Material Design Gridlist and they have not mentioned anything about handling hover/click on the grids.
So, is there a way to do it or should I use buttons inside each grid to handle click events ?
For anyone coming across this using material-ui, you can use the onClick attribute to the same effect.
You could just add a ng-click="foo(bar)" to the <md-grid-tile> element:
http://codepen.io/anon/pen/pJggEb
Why not just add the ng-click event to the grid-list. See:
codepen example
(click yellow)
Just giving 1 more option for this to work:
Angular Bottom Sheet. Here click on the 'Show as Grid' to see clickable grid items.
I have a border Layout with let's say two regions; center and west. The westregion is added with the splitter param and is collapsible. Now I have a toolbar from which I want to hide/show the west region. I've solved this by calling the toggleTargetCmp() method of the splitter. Well I know, this is a private method and should not be used, but I found no other way to archive this. So far so good. All this works.
But now I want to hide the splitter & placeholder (I fetch the placeholder ownet by using the getCollapseTarget() method of the splitter) if the button in the toolbar gets clicked. I tried it with setVisible(false) which works for the splitter but it didn't work well for the placeholder... after a deeper look onto the placeholder instance I can tell that it is set to hidden: true but it uses the hideMode: 'offsets' by default plus hiddenAnchestor: false which is not documented in the API.
Based on the API docu for hideMode I tried to set it to 'display'
before calling setVisible(false) without any luck, the placeholder still stays visible.
So how can I hide the placholder, too. Or is there even a better way to archive this?
Have you tried hide method? It works exactly as you describe - hides region and splitter.
In my project I do it like this:
panel.hide();
where panel is one of borderPanel items.
I can't find a way to apply my custom styles to the buttons, checkboxes etc. contained in a Popup of RadGridView when the filter button is clicked. I would also like to change the popup's background color etc.
Any help will be appreciated. Thanks.
I'd take a look at this post on the Telerik forums.
EDIT : Ah, OK - the FilteringControl template looks like what you need in that case. Can you not apply the styles to the named sections in there?
This question is specific to Adobe CQ5, so ExtJS answers by themselves won't be that helpful.
I have a custom text component with a menu option to change the background color. We're referencing a colorfield component in our dialog.xml, and so far everything works. The color menu appears with the default set of colors in the palette and can be clicked. So far so good.
I would now like to customize the palette and only show a select set of colors specific to our client. How do I achieve this?
Here's the relevant dialog.xml snippet so far:
<bgcolor
jcr:primaryType="cq:Widget"
fieldLabel="Background color"
name="./bgColor"
showHexValue="true"
xtype="colorfield"/>
For future reference, you could probably get by creating a custom ColorField to call a custom ColorMenu which sets a custom ColorPalette. If ColorField had configurable options, these would probably be mentioned in the Ext docs or found in the JS file itself in /libs/cq/ui/widgets/..
Found it on dev.day.com - http://dev.day.com/content/kb/home/cq5/Development/HowToCreateCustomClientLib.html
Simply put, override the ExtJS widget with your own. Not ideal but it'll do.