This might be a general question in regards to ExtJS 4.2 tabpanel forms.
On the form I have multiple dropdown comboboxes, and they're grouped into fieldset items.
The issue I'm having is when I resize the browser window, the fieldsets only resize one way: when the browser is made wider.
So for example, if I expand the browser to make it a little wider, the fieldset resizes perfectly to fit within the browser. However if I make the browser smaller (width-wise), the fieldset remains the same, and scrollbars will appear.
I have the fieldset config values set to:
xtype: 'fieldset',
title: 'Group 1',
layout: 'anchor',
defaults: { anchor: '-20' },
....
I have the same form set up on a server running extJS 4.0 and I do not have this issue, the fieldset resizes fine when the browser size is changed in any way.
Is there a new config I missed in extJS 4.2?
Disregard my question, I figured it out. I had the main layout set to 'form', and I just needed to change it to 'anchor' as well.
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 am using the vbox layout.
I would like to make my components 'fill out' to the sides when I add them. I use the 'align' attribute with the value 'stretch' :
layout: {
type: 'vbox',
align: 'stretch'
},
..which works fine, but I would like this align/stretch behaviour to happen on just certain components. For example in the diagram below :
I would like to stretch out the text field, but have the button normal size.
Is this possible with vbox or hbox?
Unfortunately not. Nevertheless, seeing the picture you posted it seems to me that vbox is not the layout you want. VBox is good where you want to change items sizes vertically with their container or keep their ratio.
The above is good candidate for anchor layout (form's default) where you can set anchor individually on items. In this case you would set anchor:100% on the text field but not on button.
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);