0
136
ViewsExtjs6 How to handle overflow for Panel Header items
I want to handle overflow for panel header items .when the number of buttons exceed the screen width the collapse icon and buttons are not visible. I want to make the header scrollable or show the overflow items in a dropdown menu.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 200,
height: 50,
collapsible: true,
renderTo: Ext.getBody(),
title: 'title',
layout : 'hbox',
header: {
title: {
text: 'title',
flex: undefined
},
items: [{
xtype: 'button',
text: 'test',
margin: '0 10'
},{
xtype: 'button',
text: 'test',
margin: '0 10'
},{
xtype: 'button',
text: 'test',
margin: '0 10'
},{
xtype: 'button',
text: 'test',
margin: '0 10'
},{
xtype: 'button',
text: 'test',
margin: '0 10'
},{
xtype:'tbfill'
}]
}
});
});
}
});
Please refer to the below image-
It should look like this-
·
Juan Pablo Isaza
1 answers
Answer question0
You can get the desired result using an Ext.toolbar.Toolbar, it has an overflowHandler config which you can set to menu. Try this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.onReady(function () {
Ext.create('Ext.toolbar.Toolbar', {
width: 200,
renderTo: Ext.getBody(),
overflowHandler: 'menu',
items: [{
xtype: 'component',
html: 'title'
},{
xtype: 'button',
text: 'test1'
}, {
xtype: 'button',
text: 'test2'
}, {
xtype: 'button',
text: 'test3'
}, {
xtype: 'button',
text: 'test4'
}, {
xtype: 'button',
text: 'test5'
}]
});
});
}
});
·
Juan Pablo Isaza
Report
Answer question