I would have thought this would be quite simple. alas it seems nothing about ExtJS is simple.
I need to split the center region of a border layout and have both the top and bottom panels fill the center region when the page resizes.
As it stands, I can only figure out how to set absolute sizes for the panels.
Here's the code generated using ExtJS Gui Builder
/* This file is created or modified with
* Ext.ux.guid.plugin.GuiDesigner (v2.1.0)
*/
{
layout: "border",
items: [{
region: "center",
title: "map",
items: [{
xtype: "panel",
title: "Panel",
autoHeight: true,
split: true,
height: 100
}, {
xtype: "panel",
title: "Panel",
autoHeight: true,
split: true,
height: 300
}]
}, {
region: "north",
split: true,
height: 100
}, {
region: "west",
width: 300,
split: true,
collapsible: true,
title: "Gazetter Explorer"
}]
}
First off, autoheight means that the container will collapse to the size of the content and its dimensions will be managed by the browser (not by Ext). This is almost never what you want in an app UI.
Your center region should have some type of layout specified. You could "split" it by giving it layout: 'border' and giving it a center and a north/south panel. However, to mimic an "auto height" type of layout, you'd probably want to go with a vbox layout (Ext 3.x) with two child panels that each stretch to take up 50% (or whatever you want) of the space.
Related
I have a layout of type 'border' and in the 'center' panel I have a MapPanel.
I want to display a modeless popup with the code below.
It works fine, I can drag and resize.
But on resizing, if I drag with mouse outside the popup area (and inside MapPanel area) then I loose control of this action (the dotted line representing popup border disappear). But if I insist in dragging moving outside MapPanel area to 'west' or 'south' panel, then I will get again control of this action (dotted lines appear). I think that MapPanel will get mouse control when it is hovering on it. This behavior let resizing popup still possible but a bit tedious.
If I disable MapPanel on showing popup, resize works well, but that's not what I want. I want to display a modeless popup.
Any idea on any workaround?...
var mapPanel = Ext.ComponentQuery.query('viewMapPanel')[0];
Ext.create('GeoExt.window.Popup', {
map: mapPanel.map,
title: 'test',
frame: true,
border: false,
resizable: true,
draggable: true,
closable: true,
height: 400,
width: 200,
shadow: true,
shadowOffset: 20,
//modal:true
}).show();
Never used GeoExt. But I have used: http://code.betancourt.us/ext-map/ with the xtype: 'gmappanel' with success. You can just use a regular Ext.window and do layout: 'fit', items: {map} and it doesn't have these kinds of issues.
I think you could probably do the same thing instead of using GeoExt just use Ext.create('Ext.window.Window', { and have it pop up a regular window you can choose a layout for and then put your mapPanel in items.
var map = Ext.create('Ext.window.Window', {
title: 'I love Maps',
collapsible: true,
animCollapse: true,
maximizable: true,
width: 950,
height: 600,
minWidth: 200,
minHeight: 200,
layout: 'fit',
items: [{mapPanel}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Close',
xtype: 'button'
}]
}]
});
map.show();
I assume you handed over a custom OpenLayers map to the GeoExt map panel instead of using the default. Set property "fallThrough" of that map to true, to allow bubbling up events.
var map = new OpenLayers.Map({
fallThrough: true
});
I have used split: true and it worked until I had the following situation:
centerContent = new Ext.Panel
({
layout: 'border',
split:true,
stateful:true,
border:false,
items:
[
{
region:'center',
margins:'0 0 0 0',
autoScroll:true,
split: true,
items:
[
{
region: 'north',
height: 250,
minSize: 150,
frame:false,
border:false,
layout:'fit',
items: blah
},
{
title:'Graph',
region:'south',
margins:'0 0 0 0',
collapsible: true,
split:true,
frame:false,
border:false,
height: 500,
minSize: 250,
layout:'fit',
items: anotherBlah
}
]
}
]
});
I tried to put split: true everywhere, but still no result. To illustrate the result of this code, I have attached a picture:
The north region has no title, but it renders to the item: blah. South region has title 'Graph' as you can see from the picture. I want to be able to split/drag down south region from north whenever necessary. But that "split tool" will not show up.
Do you know what am I missing?
You can't have border layout and auto scroll in the same container. The reason is that the border layout will fit its children component to the available space, and so they will never overflow.
So, in order to achieve what you want, you need an inner container with a fixed height (so that it overflows its parent) in a container with autoScroll. Then you apply the border layout to that inner container.
Example (jsFiddle):
Ext.widget('container', {
renderTo: Ext.getBody()
// the 300px container contains a 500px child: it will scroll
,width: 300
,height: 300
,autoScroll: true
,items: [{
xtype: 'container'
,height: 500
// the 500px container has border layout
,layout: 'border'
,items: [{
// you are required to have a center region, so use center and south
title: 'Center'
,region: 'center'
,height: 200
},{
title: 'South'
,region: 'south'
,split: true
,height: 300
}]
}]
});
So we've "updgraded" to ExtJS 4.0.2a.
I'm trying to create a simple window with a fieldset that has three inputs, and hides on close (as I've done with 4.0.1).
addModWindow = Ext.create('Ext.Window',{
title: 'Title',
frame: true,
width: 500,
height: 200,
closable: true,
closeAction: 'hide',
layout: {
type: 'fit',
align: 'center'
},
defaults: {
bodyPadding: 4
},
resizable: false,
items: [{
xtype: 'fieldset',
labelWidth: 75,
title: 'Rule Values',
collapsible: false,
defaults: {
anchor: '100%'
},
width: 490,
items: [typeComboBox,ruleTextBox,notesTextArea]
}]
});
typeComboBox, ruleTextBox, notesTextArea are defined just above this block and don't seem to have any issues (as I've removed the items and still have this same problem).
When the window is shown, the window body and close box render correctly, but the window's header is now transparent and has minimal styling (font-family). I've attached the screen caps from FF4, IE8, and Chrome.
Has anyone else seen this problem and found how to get rid of the transparency? In IE8 when you move the window, you can see the correct styling of the window header, which leads me to think that the css classes aren't getting applied correctly.
In FF4:
In IE8:
IE8 Move:
In Chrome:
in my west region panel there is smth. like the task panel here:
http://dev.sencha.com/deploy/dev/examples/tasks/tasks.html
the data is loaded from 2 different 's containing only with links
the first "task" group is always expanded to all the height of the document, though there are much less data there.
here is the code:
new Ext.Panel({
region: 'west',
title: 'דוחות',
id: 'w',
header: false,
width: 190,
split: true,
layout: 'fit',
collapseMode: 'mini',
//minWidth: 100,
baseCls:'x-plain',
margins: '0 1 0 0',
items: [ new Ext.Panel({
id:'wp',
frame:true,
title: 'דוחות לעובדים',
collapsible:true,
contentEl: 'workerRep',
//titleCollapse: true
}),
new Ext.Panel({
frame:true,
id:'mp'
title: 'דוחות למכונות',
collapsible:true,
contentEl:'machRep',
layout: 'fit',
//titleCollapse: true
})
]
What could be the problem?
Ext.layout.FitLayout ( which is what layout: 'fit' stands for) is for situations when you anly have one item in a container, because it tries to 'fit' this one component to the full size of the container.
From manual:
This is a base class for layouts that contain a single item that automatically expands to fill the layout's container.
If you have more than one item in container use different layout like Ext.layout.ContainerLayout (default one), Ext.layout.VBoxLayout or perhaps Ext.layout.TableLayout.
found the answer, the problem was here:
baseCls:'x-plain',
Each of my 3 Extjs gridpanels do not expand horizontally within a tabPanel.
The each grid's properties:
id: grid_id,
ds: ds,
cm: cm,
loadMask: true,
view: grouping_view,
plugins: [expander, filters],
stateId: which + '-grid-stateId',
stateful: true,
stateEvents: ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'],
selModel: checkbox,
// height: 400,
width: GRID_WIDTH,
defaults: {autoHeight: true},
autoHeight: true,
collapsible: false,
animCollapse: false,
layout: 'fit',
TabPanel's properties:
id: 'tab_panel',
renderTo: 'tabs',
activeTab: 0,
enableTabScroll: true,
defaults: {autoScroll:true, authHeight:true},
plugins: new Ext.ux.TabCloseMenu(),
width: GRID_WIDTH + 2,
autoHeight: true,
items: [ // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them
owned_grid,
managed_grid,
subscribed_grid
],
Layout is not a valid property for a GridPanel.
Try using:
viewConfig: { forceFit: true }
instead
I was searching the forums for a way to make my grid resize automatically but could not find the solution, nothing worked... and then I read the Ext Js GridPanel documentation: "
A grid requires a width in which to
scroll its columns, and a height in
which to scroll its rows. These
dimensions can either be set
explicitly through the height and
width configuration options or
implicitly set by using the grid as a
child item of a Container which will
have a layout manager provide the
sizing of its child items (for example
the Container of the Grid may specify
layout:'fit')."
..so I just set not the grid's layout, but the layout of the grids's PARENT to whatever value I want (in my case the parent container holds other things than only the grid, so I set layout : 'anchor', and then by setting the the anchor : '100% 100%' I make the grid expand as much as it can be).
and now I HAVE IT WORKING :D yayyyy!
It's the layout of the container that you have to set, ie:
var tp = new Ext.TabPanel({
items: [{
title: 'First tab',
layout: 'fit',
items: new Ext.GridPanel({ title: "Grid panel" })
},{
title: 'Second tab'
}]
});
Fit layouts mean that there is only one item in the container and it should expand to take all available space. Remove all explicit references to width, autoWidth, etc.