I have a toolbar and a grid within a Panel. On resize, the grid looks good. However the toolbar maintains its original dimensions and does not resize causing a few buttons to hide .
How do I rectify this?
{
xtype: 'panel',
region: 'center',
layout: 'border',
tbar:[
{
xtype: 'buttongroup',
region: 'center',
items: getToolBarButtons() // method to add buttons to toolbar dynamically
}
],
items: [
{
xtype: 'tabpanel',
activeTab: 0,
layout: 'fit',
region: 'center',
disabled: 'true',
items:[
{
// grid 1
height : '80%',
width : '100%'
},
{
// grid 2
height : '80%',
width : '100%'
}
]
}
]
}
Edit:
I replaced tbar with dockedItems: [{ xtype:' toolbar' ...}] . The toolbar doesn't get rendered at all
Ext.toolbar.Toolbar can automatically transform overflowed toolbar buttons to menu with menu items. To allowed this automatic transformations you need to configure your toolbar component with config enableOverflow: true
So instead of tbar config use:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
enableOverflow: true,
items: [
{
xtype: 'buttongroup',
items: getToolBarButtons()
}
]
}]
Also consider dividing buttons to more buttongroups. If toolbar has more buttongroups ExtJS toolbar can handle overflow with better results.
Fiddle with live example: http://sencha.com/#fiddle/2nd
Related
I'm unable to remove scrollbar in the textarea. Data for textarea is coming from a json file.
{
xtype: "fieldcontainer",
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 2,
items: [{
xtype: "textareafield",
name: "Message",
anchor: '100%',
grow:true,
scrollable: false,
value: widgetConfig.NOTES,
//width: "100%",
readOnly: true,
cls: "textareaStyles"
}]
}
scrollbar should be removed and the textarea height should auto increase
When you use grow:true in textareafield you have to adjust its height using growMin and growMax, in your case you are setting a height using flex:2
See a fiddle example
I need to set horizontal scrolling to an ExtJS tbar which contains buttons in a row that are not visible in the end. Following is the code.
Ext.define('myProject.view.accounts.user.UserGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usergrid',
minHeight: 400,
margin: '0,5,0,5',
title: 'User Accounts',
region: 'center',
cls: 'grid-with-footer',
scroll: 'vertical',
bind: {
...
},
initComponent: function() {
...
Ext.applyIf(me, {
columns: [{
...
}],
features: [{
...
}],
tbar: [{ // <-- this should be horizontally scrollable.
...
}],
bbar: {
...
}
});
this.callParent();
}
});
(I'm using ExtJS 4.2.1)
Instead of using tbar, you can add it as a dockedItem, which allows for more configs
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
overflowX: 'scroll', // <---- This allows horizontal scroll
items: [
.....
]
}]
You can view this in a fiddle here
(edit: fiddle was in ExtJS 6.2 instead of 4.2, whoops)
I am new to Ext.js & am having some issues scrolling a nested form on mobile devices. I have a grid panel & a form panel both inside the 'center' panel & I hide one depending on which selection was chosen in west panel. The grid section works fine (& scrolls in mobile thanks to the bufferedrenderer plug-in.) but I can't get the form to. It scrolls fine in desktop view & it even scrolls when I preview the mobile view in Chrome dev tools but when I try to use it on an actual device, there are no scroll bars & I can not drag the screen either. I've tried so many different ways but here's the gist of what I have. Any suggestions are appreciated.
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Container',
plugins: ['viewport', 'responsive'],
xtype: 'app-main',
autoscroll: true,
defaults: {autoscroll: true},
overflowY: 'auto',
responsiveConfig: {
tall: {
layout: {
type: 'auto'
}
},
wide: {
layout: 'border'
}
},
items [{
xtype: 'panel',
region'north'
},{
xtype: 'panel',
region'west'
},{
xtype: 'panel',
region:'center'
autoscroll: true,
layout: 'fit',
items: [{
xtype: grid,
......
},{
xtype: 'form',
layout: 'fit',
height: '500',
autoscroll: true, //this does nothing??
overflowY: auto, //this does nothing either???
responsiveConfig: {
wide: {
layout: 'hbox'
},
tall: {
layout: 'auto'
}
},
layout: {
type: 'box',
align: 'stretch'
},
items: [{
xtype: 'textfield'
},{
xtype: 'textfield'.....
}]
}]
}]
In my project, I am trying to position a container as absolute. but if I do so, it is also effecting the neighbour items. I mean, after positioning the container, if I give some width and height to that particular container, it is effecting all the toolbar. (which I don't want to happen). This effect is happening even if I use layout: 'absolute or css position:absolute.
Here is my related code:
xtype: 'panel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 40,
items: [
{
//only this should be absolute positioned
xtype: 'container',
cls: 'logo', //tried with applying css styles !important
//even tried with layout: 'absolute'
},'-',
//the below elements should not move their position
//even if the above one has been applied positioning.
{
xtype: 'container'
},'->',
{
xtype: 'container'
}]
}],
Here my goal is to bring the container out of the toolbar because it should have greater height than the toolbar keeping other containers constant.
If the profile pic container has to be higher than the toolbar, it can't be a child of the toolbar container.
You could create a container with absolute layout below the toolbar, in that container you will have the profile pic and you can use a negative Y variable in order to move up the image, so it looks like is in the toolbar.
Just like this
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
items: [
{},
{ xtype: 'tbspacer', width: 50 }, // Moving the button to the right
{ text: 'Fake Name Button' }
]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width : 700,
renderTo: Ext.getBody(),
items: [toolbar]
});
var image = Ext.create('Ext.Img', {
x: 0,
y: -25,
maxWidth: 70,
src: 'https://twimg0-a.akamaihd.net/profile_images/1471554494/swel.png'
});
Ext.create('Ext.container.Container', {
layout: {
type: 'absolute'
},
renderTo: Ext.getBody(),
items: [image]
});
http://jsfiddle.net/alexrom7/33cP8/1/
This solution is not so pretty, but it might work.
I want the following layout (the chart count in the top right is dynamic):
I tried to take a border-layout for the main container. Chart1 is region: 'west' and the rest is in region: 'center'.
In the center, I got a vbox container, with 2 containers, one for the charts (top) and one is the grid (bottom)
The Problem is now, that these 2 containers want a fixed width, or else they get a zero width...
Also I want to have all the containers to be fluid, so I can resize everything without getting empty spaces.
I read about using flex: 1 if I want some containers in a vbox to to get a 100% width, but this didn't work. It just made the 2 containers in the vbox use the same height.
Any ideas?
How about something like this (quickly drawn in the architect):
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 600,
width: 1000,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [{
xtype: 'chart'
}]
}, {
xtype: 'container',
flex: 4,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
}]
}]
});
me.callParent(arguments);
}
});
Although that way the Flex value of the second container has to account for the amount of charts you're displaying horizontally.
Have you tried table layout? It's quite easy to create such layout with it. Example:
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
style: 'border: 1px solid red',
layout: {
type: 'table',
columns: 5,
tdAttrs: {
style: 'padding: 20px; border: 1px solid blue;'
}
},
defaults: {
bodyStyle: 'border: 1px solid red'
},
items: [
{ xtype: 'panel', html: 'Chart1', rowspan: 2 },
{ xtype: 'panel', html: 'Chart2' },
{ xtype: 'panel', html: 'Chart3' },
{ xtype: 'panel', html: 'Chart4' },
{ xtype: 'panel', html: 'Chart5' },
{ xtype: 'panel', html: 'Grid', colspan: 4 }
]
});
});
Working sample: http://jsbin.com/ojijax/1/
To have dynamic layout IMO the best solution is to use hbox and vbox layouts.
For example you can wrap charts from 2 to n into one container, let's say chartPanel - this will have hbox layout. Then wrap chartPanel and grid into another container - panel with vbox layout. Then again wrap chart1 with panel with hbox layout. Then you must set align: stretch for each box layout, and proper flex to divide screen equaly.
Working sample: http://jsfiddle.net/75T7h/
I think you are loading chart2, 3, 4 , 5 in a for loop using panel.add option of extjs (better way).
If so then keep a count of these panels (here 4) and for each panel while assigning width you give like
width:(1/countOfchrtLIst2345) * grid.getWidth(),
So whatever count comes it will divide available width between all these horizontal panels within your top vbox and allocates.
In your example it assigns
(1/4) * 200
(thinking grid has width of 200)