Custom shape button fails in Ext Panel Header - extjs

We have created a custom button but when added in ExtJs panel header the shape is not proper, but as a separate component it works fine, please find the two fiddles attached for the same.
Custom Button on Panel header - Sencha Fiddle
Custom button as a separate component - Sencha Fiddle

if you add more height to the header tbar it works, the :before is chopped off.
fiddle

Related

How to change MUI DataGrid footer's action buttons layout

I created a data grid using MUI exact demo code and noticed that the "Go to next/previous page" buttons in the footer are laid out vertically rather than horizontally as seen below:
Any idea how can I fix this?
I don't think it is an MUI issue. My guess is that you are overriding all button styles in a global css file, causing the page navigation buttons in MUI DataGrid to be distorted.

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.

Hide Expand/Collapse button in Grid panel Group Header

In my grid I would like to retain the grouping feature along with a groupHeaderTpl (Currently showing some custom text in the headers) , but I want to hide the [+/-] button from the header.
I tried it with CSS styles but without success. Can somebody help me to achieve this?
Implement the collapsible property like this
features: [{ftype:'grouping', collapsible : false}]

Cannot drag draggable DIV from panel in ExtJS 4.1

I've created some simple example with ExtJS drag-b-drop, it available here.
And there is some issue - I cannot drag draggable divs from side panel (or region) - draggable div stays under the center region. Is that a bug in Ext or something wrong in my code?
I've done in hacking way. It looks like this
In short, I appending element to document body tag - and dragged element displayed fine.

Resources