Hide Expand/Collapse button in Grid panel Group Header - extjs

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}]

Related

React ag-grid header component is rendering behind row

I have a custom component for my ag-grid header, of a clickable icon that opens a menu. This menu opens, but most of it appears behind the rows below the header. I know there is a solution for a custom cell that has a popup menu, where you add "overflow: visible" to the cell, and adjust z-indexes for the cell and the other cells. I tried that with the header cells but it still is not working. I couldn't find a similar question asked anywhere else. Does anyone know how to fix this?
This is what it looks like
Here is my AgGridColumn:
<AgGridColumn headerComponentFramework={(params) => renderKebabMenuHeader(params)} minWidth={160} headerName="" field="id" cellRenderer="kebabMenuRenderer" cellClass="kebab-menu-cell cell-vertical-align-text-right" headerClass="kebab-menu-cell cell-vertical-align-text-right"/>
renderKebabMenuHeader() simply returns a JSX element of my menu.
I ended up not using the ag-grid header at all for this. Instead I made a div with position: absolute instead

ant-design collapse ,only one paneland it's content should show at a time

I'm using ant-design collapse so when I expand particular panel ,only that particular panel and it's content should display and other panels should not show at all,when I click on collpase only all panel should show,how to achieve this.
I'm using accordian here,
this is the link
https://ant.design/components/collapse/
But here when I click on partiular panel it's content is showing and also other panel is appearing, but I want other panels also should not show
Thank you

Custom shape button fails in Ext Panel Header

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

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.

Resources