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'
}]
});
});
}
});
Related
I have created a toolbar inside a panel header but the overflow menu doesn't appear on screen resize.
Menu when the screen is not resized
On Screen resize the buttons are not showing in overflow menu.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
renderTo: Ext.getBody(),
collapsible: true,
header: {
title: {
text: 'title',
flex: undefined
},
items: [{
xtype: 'toolbar',
width: 400,
overflowHandler: 'menu',
items: [{
xtype: 'button',
text: 'test1'
}, {
xtype: 'button',
text: 'test2'
}, {
xtype: 'button',
text: 'test3'
}, {
xtype: 'button',
text: 'test4'
}, {
xtype: 'button',
text: 'test5'
}, {
xtype: 'button',
text: 'test6'
}],
}, {
xtype: 'tbfill'
}]
}
});
});
}
});
Here is a fiddle. I set a layout using hbox and set a flex on the two different components in the header. also set the panel and header to resizable: true.
I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.
{
margin: '10 50 10 50',
padding: '10 20 10 20',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
},
This is the button:
{
margin: '0 50 0 50',
padding: '10 20 10 20',
xtype: 'button',
text: "Create",
listeners: {
click: function() {
Ext.get('name').disabled = false;
}
}
}
When I click this nothing is happening. What is wrong here?
As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().
Example
Ext.getCmp('name').setDisabled(false)
In this Fiddle, I have created a demo using same code.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
title: 'Demo',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
}, {
xtype: 'button',
text: "Create",
listeners: {
click: function () {
Ext.getCmp('name').setDisabled(false);
}
}
}]
})
}
});
Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this
Code snippet:
Ext.create({
xtype: 'panel',
title: 'Enable component using ITEM ID',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
itemId: 'name'
}, {
xtype: 'button',
text: "Create",
handler: function() {
this.up('panel').down('#name').setDisabled(false);
}
}]
})
items: [{
xtype: 'button',
text: 'Today',
ui:'default-toolbar',
margin: '10 10 10 10'
},{
xtype: 'button',
text: 'Yesterday',
ui:'default-toolbar',
margin: '0 10 10 10'
}
},{
xtype: 'button',
text:'Last 7 days',
ui:'default-toolbar',
margin: '0 10 10 10'
}, {
xtype: 'button',
text: 'Last Month',
ui:'default-toolbar',
margin: '0 10 10 10'
}]
Ext.Button have a property enableToggle which if set to true will apply pressedCls to the button when clicked and remove the pressedCls when pressed again.
Sample Code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'My Button',
enableToggle: true
}]
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
For Multiple Button:
When we need to toggle pressedCls between mutiple button.We need to use toggleGroup property of button. It will toggle the pressedCls among multiple where same toggleGroup is given.
Sample Code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
layout:'vbox',
items: [{
xtype: 'button',
text: 'Today',
enableToggle: true,
toggleGroup:'myButtonGroup'
},{
xtype: 'button',
text: 'Yesterday',
enableToggle: true,
toggleGroup:'myButtonGroup'
},
{
xtype: 'button',
text: 'Last 7 days',
enableToggle: true,
toggleGroup:'myButtonGroup'
}]
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
When I am using formBind: true, it does not seem to (save) and I am not sure why. Any ideas?
title: 'Edit Sessions',
modal: 'true',
items: [
{
xtype: 'form',
bodyPadding: 10,
title: "",
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
items: [
{
name: 'title',
xtype: 'textfield',
fieldLabel: 'Title',
allowBlank: false,
},
{
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved',
}
]
},
{
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:
[ //Buttons and handlers
{
xtype: 'button',
text: 'Save',
formBind: true,
type: 'submit',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
},
{
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}
]
}
]
The formBind only works if the button is in the form.
Working example: https://fiddle.sencha.com/#view/editor&fiddle/1o4t
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'
}]
}]
});
});