How to give itemId to togglebutton inside Ext.panel.panel? - extjs

I have an Ext.panel.panel which is collapsible. Now, I need to give the collapsible toggle button an itemId so I can simulate clicks for this component in the automated tests. I can give an itemId to the panel itself but I can't see any way to give one to its toggle button:

You don't have to simulate clicks. You can call collapse on the panel :)

Related

Override styling for md-autocomplete (change clear button icon)

I have a component that contains an md-autocomplete. This component is essentially being used as a searchable select list.
So, I'd like to change the icon of the clear-button from the 'X' to a down arrow.
I've tried the solution mentioned here, but that doesn't work for me, because I need the button to remain clickable.
Is there a way I can override the button styling in the component's CSS to specify a different icon to be used?

How to adding navigation bar button having ionic-on/ ionic-off functionality

I want to add star button on navigation bar and when user press on this, the button show selected icon and next time is press it show unselected.
I tried it by using ionic-on and ionic-off but I can't make it.
The icon-on and icon-off attributes only apply to tabs I think. You can use ng-class like you see here. Based on the value of your $scope.starred property, it will show a star or the outline of a star.
<span class="icon" ng-class="{'ion-ios-star': starred, 'ion-ios-star-outline': !starred}"></span>

ExtJS Change Button UI

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

Vertical scroll-bar of extjs4-multiselect is not displaying?

I'm using extjs 4.0.7 library. I have created UI as follows.
Landing page is a panel with border-layout.its north region have a panel with id: 'filterPanel'. This panel have a 'multiselect' component. Center region of landing page a tab panel, each panel having a grid.
Landing page has a listener, afterrender, on this listener I made filterPanel as collapsed by using Ext.getCmp('filterPanel').collapse().
The issue is, system not showing vertical scroll-bar when I expand 'filterPanel'.
If I remove panel collapse code from listener, scroll-bar is displaying.
Our requirement is filterPanel should be collapsed while rendering the UI, that's why I tried to collapse filter panel on landing-page afterrender listener.
Is this approach correct?
Regards,
Ajil
I got a work around for this issue. The steps which i followed is given below,
Add an expand listener for the panel here its 'filterPanel'
Remove all element from multiselect component store.
Reload multiselect store.
I'm sure its not a good fix , but time being its work for me.
Thank you all.

Extjs Clickable tooltip

I have a situation where I roll over a row in a grid, I want to display a menu. I put the menu in a tooltip. But can't click on a menu unless I make the tooltip closable. If I make the tooltip closable, I can't provide the use the autohide functionality and I have to click to close the tooltip. Is there any way to mouseover rows in a grid, show a tooltip that includes clickable items and then have the tooltip goaway when you scroll off of it?
you may need extend your own component from tooltip.

Resources