I have EXTJS panel inside a viewport east region,
var viewport = new Ext.Viewport({
layout: 'border',
id:'mainviewport',
monitorResize:false,
items: [{
region: 'east',
xtype: 'panel',
id:'east-panel',
header : false,
headerAsText: false,
title: 'east panel',
collapsible: true,
split: true,
minSize: 305,
maxSize: east_panel_width,
margins: '53 0 0 0',
cmargins:'53 0 0 0',
collapsed: true,
autoScroll: true,
layout: 'fit',
html:'<div id="abc" style="height:100%;overflow-x: hidden; overflow-y: auto;"></div>'
}]
});
I dont want the title header so i gave the property header: false, headerAsText: false the title bar get hided, but i want the collapsible option for this. How can i get that collapsible function.
Is that possible to hide only the title text and the background css of that, without distrubing the collapsible panel extender option.
Thanks in advance.
Even with header: false, headerAsText: false you have an arrow in the middle of the splitter bar. It works as a collapsing control of the panel.
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 a Viewport with a Borderlayout. Between center and west there is a splitter. When I move the splitter to the right, it gets a new position, but it scrambles my whole layout:
Before moving it looks like this:
After moving (not while moving!), the splitter is "hidden" and only visible when I hover over the new position. Look at the right - there is a new unwanted margin:
When I move the splitter to the left (just a few pixels), the new layout is applied correctly!
In case you need code, here I have the panel with the border-layout. If you need more, I'll provide it immediately.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires: [ // ...
],
layout: {type: 'border'},
items: [{
region: 'north',
height: 50,
collapsible: false,
frameHeader: false,
html: 'Main'
},{
region: 'west',
xtype: 'panel',
title: 'west',
collapsible: true,
resizable: true,
frame: true,
border: false,
width: 250,
layout: 'fit',
tools: [ // ...
],
items: [{
xtype: 'workoutlist'
}]
},{
region: 'center',
title: 'center',
xtype: 'centerView'
}]
});
Thanks to #Evan Trimboli I've replaced resizable: true with split: true, which helped in another problem.
The real cause of the problem was in the centerView:
Ext.define('MyApp.view.CenterView', {
extend: 'Ext.tab.Panel',
alias: 'widget.centerView',
enableTabScroll: true,
layout: 'fit',
// constrain: true, <-- this configuration option caused the weird behaviour
autoShow: true,
// ...
});
I don't know how the option constrain: true came to this view (probably some silly copy and paste error). Without, it works like a charm.
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:
I have a FormPanel with several textfield items and a fieldset that contains a combobox and a button. The fieldset has a column layout in order to make the combobox and button display side-by-side. However, the fieldset's field label does not display, even though it is inside a FormPanel. When I make the fieldset's layout form, only the label separator appears. Why is this happening? Is there a better way to have a form with several textfields and then a combobox and button side-by-side?
Here's what I have:
this.searchPanel = new Ext.FormPanel({
border: false,
frame: true,
style: 'width:50%',
bodyStyle: 'padding:6px 10px 0px 10px',
items: [{
//Several textfields
},{
xtype: 'fieldset',
border: false,
autoHeight: true,
fieldLabel: 'Sort by',
labelStyle: 'font-weight: normal',
style: 'padding:0;margin-bottom:0',
layout: 'column',
items: [
{
xtype: 'combo',
name: 'sort',
style: 'width:100%',
columnWidth: .5,
hiddenName: 'sort',
store: //Commented out for brevity
mode: 'local',
editable: false,
forceSelection: true,
triggerAction: 'all'
},{
xtype: 'button',
style: 'margin-left: 10px',
columnWidth: .5
}
]
}
]
});
FieldSet's do not have a fieldLabel like other form components, instead they have a title like a panel.