I've got a fiddle of a base layout I'm trying to add responsive configurations to.
My goal is to use a border layout where the navigation can change between the western region and the northern region depending on the window size and the layout config can switch between vertical and horizontal so that when the region is west the buttons are grouped vertically and when the region is north the buttons are grouped horizontally.
I know that by default, the layout type cannot be changed at runtime, but I found this forum thread where a user points out that if you use the box layout type (the parent of vbox and hbox) you can update the vertical config to change the grouping at runtime.
The fiddle I linked above is my attempt at prototyping that concept out.
The problem I'm running into is that the responsiveConfig cannot find the setters for the particular properties that I'm trying to change, and it's not just for the vertical config. Config items that I know have setters and I have seen work before in the responsiveConfig are not working as well:
Ext.layout.container.Box definitely has a setPack method.
Am I mis-configured somehow?
I posted to the thread in sencha's forums where the technique I was trying was described. The poster who answered the question originally answered my post with an updated fiddle showing the correct implementation.
I've added the responsive box implementation as well as the region switching into my fiddle.
Here's the responsive sections needed:
plugins: 'responsive',
responsiveConfig:{
wide:{
layout:{
type: 'box',
vertical: true,
pack:'start'
},
region: 'west'
},
tall:{
layout:{
type: 'box',
vertical: false,
pack: 'center'
},
region: 'north'
}
I think the important part to know here (and what was tripping me up) is that you have to include the type: 'box' in the layout config for the responsiveConfig property because responsiveConfig is not firing each individual setter for the layout (type, vertical, and pack), it's firing the overall layout setter method. If you don't include the type config in the object you give the layout config, it uses the default type which is 'auto'.
This is why in the screenshot I included in the original post the error messages in the javascript console where referring to Ext.layout.container.Auto and not Ext.layout.container.Box. The error message was right, Ext.layout.container.Auto doesn't have a setPack method.
Changing layouts at runtime is not currently supported. There is a feature request for it here:
https://www.sencha.com/forum/showthread.php?294082
Fiddle with a workaround:
https://fiddle.sencha.com/#fiddle/dqj
The error is complaining about auto layout having no setter for pack.
This tells me the layout is indeed being set during runtime, according to the value specified in the responsive layout config. Since there is none defined, just the vertical and pack, config, the layout type is interpreted as auto. Small changes in your fiddle, defining the layout type as below:
responsiveConfig:{
wide:{
layout:{
type : 'vbox',
pack:'start'
},
bodyStyle:{'background-color': 'orange'}
},
tall:{
layout:{
type : 'hbox',
pack: 'center'
},
bodyStyle:{'background-color': 'purple'}
}
},
And your error was gone.
Related
I have two windows i.e Chat window and feedback window, I want to show them side by side on button click, for eg if chat is open and user clicks on feedback button then it must tile horizontally. Here's what i have tried so far
var tiledWindows = Ext.create({
xtype: 'container',
autoHeight: true,
autoWidth: true,
frame: true,
//layout: { type: 'hbox', align: 'stretch', pack: 'end' },
layout:'column',
items: [win, chatWindow]
});
the win and chatWindow both have their unique styles. Please help me go about it
Do you need two seperate Windows or would it be enough to have two Panels inside of a window?
In the first scenario you could just create a simple window and align
panels using hbox.
Here is a working sencha fiddle example: sencha fiddle
I also added code to "simulate" the ability to show/hide the feedback panel.
To do what you want you would need to know the position of one window so the other could be positioned next to it. Then use showAt method to position second window or use showAt method to position both windows.
showAt
What I have done in the past with a window that is already rendered is this:
let firstWin = Ext.create('window').show();
let secondWin = Ext.create('window');
secondWin.showAt(firstWin.getX() + firstWin.getWidth(), firstWin.getY());
Note that this code is not functional but should give you an idea of how you could solve your problem using showAt method.
I would like to disable label from Extjs pie chart.
If anyone has an example that would be greatly appreciated.
assuming that we are talking about Ext.chart.series.Pie, which inherits from Ext.chart.series.Series; the 4.x documentation for onCreateLabel(storeItem, item, i, display) states, that when display is set to false, the label will be not be displayed.
the 5.x documentation for Ext.chart.label.Label states, that there is a config hidden.
it's difficult to provide any code, while not even knowing which framework version it is. this question's op should provide more details and/or a fiddle, in order to allow proper answers. embedding ExtJS 5/6 GPL in a "code snippet" did not work out... however, here's a configuration which hides all the labels:
series: [{
type: 'pie',
label: {
display: false
}
}]
I have a custom field component based on Ext.form.field.Base. I got the big idea from this post. But what's bothering me with this solution is the fact, that it has a fixed height. What I would like to have instead is that the container grows in height as I add entries to the grid.
I have made an earlier attempt to make such a field but based on a Panel containing the grid and buttons. Putting this panel into a vbox layout and adding rows to the grid perfectly resized the container form panel. What did I miss to implement that the container would resize?
Here is a fiddle where you should easily see what I mean:
http://jsfiddle.net/amx9j/
I finally got it working!
See this fiddle here: http://jsfiddle.net/amx9j/3/
This configuration for the form worked:
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'anchor',
items: [{
//custom fields that change their height
}]
And in the custom field you have to use this.updateLayout() everytime you expect the height to change. In addition I had to implement the onResize method:
onResize: function(w, h) {
this.callParent(arguments);
this.grid.setWidth(w - this.getLabelWidth());
}
Important thing is, to NOT set the height of the grid ;-)
Thanks #Peter for taking the time to look into this!
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
I'm working on a project where I have a single GridPanel on a page. The panel can display any number of rows and I have the autoHeight property set, which causes the GridPanel to expand to fit the number of rows. I now want a horizontal scrollbar because on some resolutions not all columns get displayed (and I cannot reduce the number of columns).
If I set the autoHeight I have no horizontal scrollbar, if I do not set it and set a fixed height I have a horizontal scrollbar but the GridPanel obviously does not fit the number of rows....
Is there anything I can do to fix this? I can't seem to find a property that would achieve the result I need.
You will find that putting a parent container (Ext.panel.Panel or any container really) around your grid panel to be successful. If you hard code the height, width and layout (to 'fit') on the parent container, the child item (Ext.grid.Panel) will expand to fill the entire space available from it's parent container.
See pages 80 and 81 of Ext JS 4 Web Application Development Cookbook.
You can use the lazy instantiation notation for 'Ext.grid.Panel'. Meaning use 'grid' for your child container (item) xtype property.
Ext.create('Ext.panel.Panel', {
title: 'parent container',
width: 800,
height: 600,
layout: 'fit',
items: {
xtype: 'grid',
title: 'child container',
... define your grid here
},
renderTo: 'grand parent container'
});
My thought would be to set autoScroll: true on the panel.Panel that contained the grid.
This seems like an issue with your layout settings as opposed to the object properties.
Try setting the layout property of the parent container to 'fit'- can you also provide a code excerpt?
As Ergo said, this is more likely a layout problem - the GridPanel is probably higher than the panel containing it, high enough not to need a scrollbar but not fully visible, obviously. Put the GridPanel into a container with a proper layout, i.e. border layout, fit layout or card layout. Getting layout managers right is generally one of the hardest part of ExtJS-Fu.
adding
viewConfig = {
scroll:false,
style:{overflow: 'auto',overflowX: 'hidden'}
}
sometimes causes a bug with displaying 2 scrollbars. To prevent it in my case I added a listener. And then works fine.
this.on('scrollershow',function(scroller,orientation,eOpts){
if (orientation=='vertical'){
scroller.hide();
}
},this);