PDA

View Full Version : How to add button component in Grid Column Headers



agarapati
6 Jul 2015, 10:05 PM
I have requirement to add Buttons to column headers so that client can remove the columns if he want.

The fiddle with sample code is

https://fiddle.sencha.com/#fiddle/p2o

I tried to add items in the header of the grid as shown below, in the column header it is show [Object Object]



header: {
xtype: 'header',
layout:'fit',
items:[{
xtype:'button',
text:'Delete this column'
},{
xtype:'box',
autoEl:'span',
html:'Col Heading'
}]
},
dataIndex: '1yr',


Is this the correct way to do the addition of buttons in the column headers of the grid?

jdkhamba
8 Jul 2015, 11:36 AM
Grid supports removal and addition of columns by default. Why would you want to add a button to do that?

http://docs.sencha.com/extjs/4.2.0/#!/example/build/KitchenSink/ext-theme-neptune/#array-grid

As you hover over a column, a drop down arrow appears on the right hand side. If you click on it, a drop down will appear where you can select the "columns" option in the drop and configure your grid accordingly.

agarapati
8 Jul 2015, 8:37 PM
As per the design of our screen, grid columns should not have drop down arrow next to them. The design shows delete option on the column header

jdkhamba
9 Jul 2015, 3:57 AM
That is some interesting design. Anyway, one way would be to inject a button in the header using domQuery and handling hiding of columns in the hanler of the button. Take a look :

https://fiddle.sencha.com/#fiddle/q5l

Although this is not recommended as the click event that triggers the handler might also trigger the click associated (namely sorting) so that will have to be disabled in order to use this approach.

agarapati
9 Jul 2015, 6:06 AM
Thank you so muchh