I need a horizontal and vertical scroll bar for Viewport. With the below code, I get a vertical scroll bar. I've tried multiple ways to get a horizontal bar including scroll.autoScroll:true, scrollable:true, but it is not working.
var bbb = [{
region: 'north',
border: false,
maxHeight: 60,
//width : 250,
//margin: '0 0 5 0', //top, right, bottom, left
//padding: '0 2 5 2', //top, right, bottom, left
layout: 'anchor',
items: [{
xtype: 'container',
id: 'rendererHeader',
border: false,
height: 35,
scrollable: false,
style: 'background-color: #E6E6E6', //border:1px solid #70BF73;
padding: '0', //top, right, bottom, left
layout: {
type: 'hbox',
pack: 'start',
//align: 'stretch',
},
items: [{
xtype: 'displayfield',
id: 'dspdashboardname',
itemid: 'dspdashboardname',
//text: 'DashBoard',
value: '',
fieldStyle: "font-size:large;color:#000000;text-overflow:ellipsis;font-family:tahoma",
margin: '5 5 5 5', //top, right, bottom, left
},
{
xtype: 'tbfill'
},
{
xtype: 'combobox',
id: 'permitteddashboard',
itemid: 'permitteddashboard',
margin: '7 2 3 2', //top, right, bottom, left
queryMode: 'local',
typeAhead: true,
grow: true,
forceSelection: true,
editable: true,
valueField: 'DashBoardID',
displayField: 'DashBoardName',
value: '',
width: 200,
height: 20
},
{
xtype: 'image',
id: 'rdr_icondbrdrpersonalize',
itemid: 'rdr_icondbrdrpersonalize',
src: './resource/icons/filter.png',
title: 'Personalize Filters',
height: 25,
width: 25,
margin: '6 2 5 2', //top, right, bottom, left
mode: 'image'
},
{
xtype: 'image',
id: 'rdr_icondbrdrmanagedashboard',
itemid: 'rdr_icondbrdrmanagedashboard',
src: './resource/icons/dashboard.png',
title: 'Manage DashBoard',
height: 25,
width: 25,
margin: '6 5 5 2', //top, right, bottom, left
mode: 'image'
}
]
}]
},
// Renderer Panel
{
region: 'center',
id: 'dashboardcenterrigionpanel',
layout: 'anchor',
border: false,
style: 'background-color: #E6E6E6', //border:1px solid #70BF73;
defaults: {
},
items: [
{
xtype: 'container',
//anchor:'100% 10%',
maxHeight: 30,
border: true,
id: 'dashboardfilterpanel',
layout: 'hbox',
padding: '5 5 5 5', //top, right, bottom, left
//margin: '0 6 0 6', //top, right, bottom, left
//style: 'border:1px solid #C8C8C8;',
style: 'border-left:solid #C8C8C8 25px;', //border-right:solid #C8C8C8 5px;
defaults: {
//padding: '0 5 0 5', //top, right, bottom, left
//margin: '25 10 5 10' //top, right, bottom, left
}
}
]
}
];
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
alias: 'topContainer',
id: 'dbrendererviewport',
itemId: 'dbrendererviewport',
height: winHeight,
width: winWidth,
padding: 0,
//style:"background-color:lightgrey;",
items: {
xtype: 'container', // viewport can't scroll, so you need an extra container
//style: 'overflow-x: scroll;overflow-y: scroll',
style: 'overflow:auto',
layout: 'anchor',
items: eval(Ext.encode(bbb))
//layout: 'border',
//height: '100%',
//width: '100%',
}
});
http://docs.sencha.com/extjs/6.0.2/classic/Ext.container.Viewport.html
The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the scrollable config.
Related
I have an existing layout like the following where each box is a D3 chart
================================
|
box 1 | box 2
|
|
================================
|
|
box 3 | box 4
|
|
I would like to arrange box 1 so it has 2 buttons above it for switching charts.
=============
button|button
box 1
So the full layout would be like
================================
|
button|button | box 2
box 1 |
|
================================
|
|
box 3 | box 4
|
|
The code for the existing layout is below
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},
flex: 1,
padding: 5,
defaults: {
viewId: me.viewId,
frame: true,
height: 350,
cls: 'app-panel'
},
items: [
{xtype:'panel', itemId: 'box-1'},
{xtype:'panel', itemId: 'box-2'},
{xtype:'panel', itemId: 'box-3'},
{xtype:'panel', itemId: 'box-4'}
]}
So i need to replace the first panel (itemId: 'box-1') with some sort of parent panel or container. I am having difficulty achieving this. How can i get the 2 buttons to sit inline and then have the box underneath it ?
If you have the first layout alreay in place you can use the following:
{
xtype:'panel',
itemId: 'box-1',
tbar:[{
xtype: 'button',
text: 'switch A'
}, {
xtype: 'button',
text: 'switch B'
}]
}
Other options are dockedItems and buttons (though these go to the bottom like fbar).
Here is one solution of many possible to arrive at the layout you are asking how to do.
Can be seen working on this Fiddle
let cnt = Ext.create('Ext.Container', {
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
padding: 10,
items: [{
xtype: 'container',
width: '100%',
margin: '0 0 10 0',
layout: {
type: 'hbox',
align: 'fit',
pack: 'start'
},
items: [{
xtype: 'panel',
flex: 1,
height: 250,
title: 'Panel 1',
itemId: 'box-1',
bodyPadding: 10,
margin: '0 10 0 0',
items: [{
xtype: 'button',
text: 'Button 1'
}, {
xtype: 'button',
text: 'Button 2'
}, {
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}, {
xtype: 'panel',
flex: 1,
height: 250,
title: 'Panel 2',
itemId: 'box-2',
bodyPadding: 10,
items: [{
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}]
}, {
xtype: 'container',
width: '100%',
layout: {
type: 'hbox',
align: 'fit',
pack: 'start'
},
items: [{
xtype: 'panel',
flex: 1,
height: 225,
title: 'Panel 3',
itemId: 'box-3',
bodyPadding: 10,
margin: '0 10 0 0',
items: [{
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}, {
xtype: 'panel',
flex: 1,
height: 225,
title: 'Panel 4',
itemId: 'box-4',
bodyPadding: 10,
items: [{
xtype: 'container',
width: '100%',
height: 150,
style: {
border: '1px solid #000'
},
}]
}]
}]
}]
})
I want to disable horizontal scroll of panel when someone enter text in text field.
First problem:
Currently problem is when you enter text in any textfield and press right arrow key from keyboard (keyCode = 39) then panel horizontal also move in right direction. I want to diable that when text is entered in textfield.
second Problem
Horizontal scroll moves with key only when click on that panel.
Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1mjd
Ext.create('Ext.panel.Panel', {
scrollable: 'horizontal',
region: 'center',
layout: 'hbox',
baseCls: '',
containerScroll: true,
items: [{
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}],
renderTo: Ext.getBody()
});
How to create a horizontal menu in Extjs ?
Example vertical menu :
Ext.onReady(function(){
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
margin: '0 0 10 0',
renderTo: Ext.getBody(),
floating: false,
items: [{
text: 'JavaScript',
},{
text: 'Java'
},{
text: 'C/C++'
}]
});
});
Use layout property(examples)
Ext.onReady(function(){
var menu = Ext.create('Ext.menu.Menu', {
layout: 'hbox',
width: 300,
height: 100,
margin: '0 0 10 0',
renderTo: Ext.getBody(),
floating: false,
items: [{
text: 'JavaScript',
},{
text: 'Java'
},{
text: 'C/C++'
}]
});
});
Question is simple.
I have a home screen where the north region has to display two textfields and one button to enable user to connect.
I have this code.
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
id: 'homescreen',
items: [
{
layout: 'border',
border: false,
height: 160,
anchor: '100%',
items: [
{
region: 'west',
// some codes here
},
{
xtype: 'container',
width: '70%',
region: 'east',
layout:
{
type: 'table',
columns: 1,
tdAttrs:
{
style: 'padding: 5px 15px 5px 15px;',
align: 'middle',
},
defaults:
{
width: 150,
textAlign: 'right'
},
},
items: [
{
xtype: 'textfield',
//fieldLabel: 'login',
labelWidth:50,
emptyText: 'Utilisateur',
margin: '18 0 0 0',
},
{
xtype: 'textfield',
//fieldLabel: 'mot de passe',
labelWidth:100,
emptyText: 'Mot de passe',
},
{
xtype: 'button',
html: 'Connexion',
scale: 'large',
},
]
}]
},
As you can see, all the textfields and the button are aligned vertically on one column.
But problem is that they are displayed on the left side of the container. How can I display them on the right (without using css) ?
= align them horizontally.
VBox layout would probably be more appropriated to your use case. It stacks component vertically and lets you control horizontal and vertical alignment of the resulting block.
Try the following layout, for example:
layout: {
type: 'vbox'
,align: 'center' // or 'right'
,pack: 'center' // controls vertical align
,defaultMargins: 5
}
I am trying to display a panel with a BorderLayout. The panel being displayed is an instance of an Ext.Panel subclass. I had the panel displaying perfectly before attempting to add the layout, but with the layout added it doesn't show at all, without throwing any errors or giving any useful feedback whatsoever. Using exactly the same attributes, but not subclassing, the panel also works fine.
To demonstrate, with code directly from the ExtJS BorderLayout API, this works:
var win = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
and this does not:
BasePanel = Ext.extend(Ext.Panel, {
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
var win = new BasePanel();
Am I missing something obvious here?
Thanks for any help.
You need to create the actual control, then extend it:
var BasePanel = function (config) {
Ext.apply(config,{items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
}, {
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region: 'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
}, {
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]});
//call the base constructor
BasePanel.superclass.constructor.call(this, config);
}
Ext.extend(BasePanel, Ext.Panel, {
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
});
var win = new BasePanel({renderTo:document.body});