We Keep Coding

Extjs6 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-

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'
}]
});
});
}
});

ExtJs - Dynamically changing expand and collapse buttons of panel

I have a docked panel in which am changing the dock position using the setDock method. In that docked panel, I also have collapsible buttons which should change as per to the dock position. I am updating the configs collapseDirection and expandDirection and calling out a method updateCollapseTool which lets me update the button.
But I get an issue after the following steps:
Change the dock position to left using the menu button.
Collapse the docked panel using the collapse button, then again expand it.
Again change the dock position to top.
Collapse the docked panel again => After this step my docked panel gets collapsed, but it seems to be collapsed in left direction. It should have collapsed to top and should show an expand button pointing in bottom direction.
If I perform the same steps by excluding the step 2, it works properly. Is there anything that am doing wrong or any other methods which lets me update my expand/collapse buttons properly ?
Here is my fiddle link.

You can use border layout and the the region with setRegion method, something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
scrollable: true,
id: 'parentPanel',
xtype: 'panel',
height: 500,
layout: 'border',
items: [{
xtype: 'panel',
id: 'dockPanel1',
region: 'north',
title: 'Parent Dock Panel',
collapsible: true,
collapseFirst: false,
width: 300,
height: 200,
defaults: {
style: {
background: "orange",
border: "1px"
},
},
layout: "container",
tools: [{
text: "dock change",
xtype: 'button',
value: 'top',
menu: {
items: [{
text: 'top',
region: 'north'
}, {
text: 'left',
region: 'west'
}, {
text: 'right',
region: 'east'
}],
listeners: {
click: function (menu, item, e, eOpts) {
Ext.getCmp('dockPanel1').setRegion(item.region);
}
}
}
}],
items: [{
xtype: 'textfield',
text: 'item 1'
}, {
xtype: 'textfield',
text: 'item 2'
}, {
xtype: 'textfield',
text: 'item 3'
}]
}, {
xtype: 'panel',
region: 'center',
layout: "vbox",
items: [{
html: "<span style='font-size:20px;'>Child panel 1</span>",
bodyStyle: "background: lightgreen;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}, {
html: "<span style='font-size:20px;'>Child panel 2</span>",
bodyStyle: "background: lightblue;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}]
}],
renderTo: Ext.getBody()
});
}
});

Hbox layout panel doesn't auto fit items after resize event

I've a resizable panel which includes another panel with hbox layout inside. Whole display settings are correct expect one behaviour; when resizing main panel with mouse after render; it's not auto-fit items inside.
To be success fit those item; need to resize main panel once again or refreshing main panel from tool config's gear. How can I set this mouse event resizing as auto-fit?
Here is a screenshot and both of panel's code snippets;
Main Panel:
Ext.define('MyApp.BasePanel', {
extend: 'Ext.panel.Panel',
xtype: 'basepanel',
resizable: true,
scrollable: true,
frame: true,
plugins: 'responsive',
tools: [
{
type: 'refresh',
handler: 'refreshPanel'
},
{
type: 'gear',
handler: 'setPanel'
}
],
initComponent: function() {
var me = this;
me.items = me.setupItems();
me.callParent();
},
setupItems: function() {
var me = this;
return Ext.Array.merge(me.getChildPanel(), me.getOtherChildPanel());
},
getChildPanel: function () {
return [];
},
getOtherChildPanel: function () {
return [];
},
Here is called child panel;
Ext.define('MyApp.ChildComponent', {
//Calling this class with 'getChildPanel()' method on BasePanel.
extend: 'Ext.container.Container',
alias: 'widget.mychildcomponent',
layout: {
type: 'hbox', align: 'stretch', pack: 'center'
},
defaults: {
margin: 10,
width: 300,
height: 90,
flex: 1
},
items: [
{

How can I set this mouse event resizing as auto-fit
You need to use flex config for ExtJS child items to automatically adjust.
Flex
Flex may be applied to child items of a box layout (Ext.layout.container.VBox or Ext.layout.container.HBox). Each child item with a flex property will fill space (horizontally in hbox, vertically in vbox) according to that item's relative flex value compared to the sum of all items with a flex value specified.
Any child items that have either a flex of 0 or undefined will not be 'flexed' (the initial size will not be changed).
In this Fiddle, I have created a demo using resizable panel.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('CommonGrid', {
extend: 'Ext.grid.Panel',
xtype: 'commongrid',
title: 'Data',
store: {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}]
});
Ext.create({
xtype: 'panel',
layout: 'vbox',
title: 'Demo',
bodyPadding: 10,
width: 500,
border: true,
resizable: true,
draggable: true,
tools: [{
type: 'refresh'
}, {
type: 'settings'
}],
renderTo: Ext.getBody(),
defaults: {
layout: 'hbox',
xtype: 'container',
width: '100%',
flex: 1,
defaults: {
xtype: 'button',
margin: '0 10',
flex: 1
}
},
items: [{
maxHeight:30,
items: [{
text: 'Button 1'
}, {
text: 'Button 2'
}, {
text: 'Button 3'
}]
},{
xtype:'tbspacer',
height:10,
maxHeight:10
}, {
items: [{
xtype: 'commongrid'
}, {
xtype: 'commongrid'
}]
}]
})
}
});

This happens because the default layout for all Containers is Auto Layout
Make BasePanel layout hbox or vbox and if you want it to be scrollable do not set align

is it possible to implement moveable Toolbar with Ext.js, if yes, how to do that with my code?

it is my toolbar which i want to move free in any position of my desktop.
what i need to change for it? maybe xtype'toolbar' or different extend'Ext.panel.Panel'??
Ext.define('test.view.desktop.Toolbar', {
bodyStyle: "background: #CAE1FF; border: 4px solid red;",
width: 500,
height: 200,
extend: 'Ext.panel.Panel',
title: 'test',
alias: "widget.testtoolbarX",
requires: [
"Ext.form.FieldSet"
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'tbtext',
text: '<b style="font-size: 20px; margin-left: 300px; color: red;">I am Toolbar</b>',
},
{
xtype: 'tbfill',
},
{
text: 'Report',
menu: {
items: [
{
text: 'Export'
,
menu: {
items: [
{
text: 'PDF'
}, {
text: 'Excel'
}
, {
text: 'CSV'
}
]
}
}, {
text: 'Filter'
}
]
}
},
{
xtype: 'cycle',
text: 'File',
menu: {
xtype: 'menu',
width: 120,
items: [
{
text: 'Upload'
},
{
text: 'Share'
},
{
text: 'Popout'
}
]
}
},
{
xtype: 'button',
text: 'Help',
url: 'http://test/faq.html',
//baseParams: {
// q: 'html+anchor+tag'
//},
tooltip: 'Get the answers to frequently asked questions about'
}
,
//{
// xtype: 'htmleditor',
// text: 'Help'
//}
]
}
]
});

Create a window with a fixed width and add a toolbar to it.
Kyle Fransham pointed this out but I'll show it with a code snippet:
Ext.create('Ext.window.Window', {
layout: 'fit',
width : 500,
dockedItems: {
xtype: 'toolbar',
items: [{
text: 'Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
'-','text 1',
{ xtype: 'tbspacer' },
'text 2'
]
}
}).show();

An easy way to accomplish this is to:
Add the toolbar to a panel, and the panel to a window.
Play with the size of the window so that only the toolbar can be seen.
In the window's config, add headerPosition: 'right' to move the titlebar/header off to the right of the window.
Now you have a toolbar that can be dragged anywhere on your desktop by the handle on the right (the titlebar of the window.)

fixed search bar with an accordion layout - EXT JS4

I need to have a fixed search bar at the top of my Menu Column. This is what I have so far:
Ext.define('Cam.view.menu.LeftSidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.leftsidebar',
views: 'Cam.view.menu.Search',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:0px;'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
activeOnTop: true
},
title: _SIDEBAR_LEFT_TITLE,
items: [
{
title: 'Menu Search',
items: [{xtype: 'menusearch'
}]
},
{
title: _SIDEBAR_LEFT_PREVIOUS,
xtype: 'menuhistory',
itemId: 'menuhistory'
},
{
title: 'Menu',
items: [{xtype: 'screenmenu'}]
}]
});
So far, it collapses the way I want it but
xtype:'menusearch' is what I want fixed at the top.
and
xtype:'menuhistory' to be active one.
Any help on this?

You could do something like this:
Ext.require('*');
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width: 400,
height: 400,
renderTo: document.body,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Search'
}, {
flex: 1,
xtype: 'container',
layout: 'accordion',
items: [{
title: 'Item 1',
html: 'I1'
}, {
title: 'Item 2',
html: 'I2'
}, {
title: 'Item 3',
html: 'I3'
}]
}]
});
});