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
});
Related
Displaying image in a window sounds a simple task but i have problem with it.
I want to show my image (with variable size) to show in a window (or panel) with size 300*400. Then, by clicking on image or maximizing window, user sees image in its original size.
Following code works for stretching image to 300*400 thumbnail in initial view, but when maximizing it also stretches to full screen.
var myImage = Ext.create('Ext.Img', {
src: imgSrc,
});
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
maxWidth: myImage.getWidth(),
maxHeight: myImage.getHeight(),
layout: "fit",
items: [myImage]
})
picWin.show();
Take a look at my example: https://fiddle.sencha.com/#view/editor&fiddle/26eo
Seems to work. I removed the set max width and height.
Finally, i came to a solution like this. First we need to use card layout. Then we define two containers for specified image, one for initial view and one for maximized view. At last, we need to change these cards when window is maximized and when restored.
Code is as follows:
// Two image for when maximizing and when in initial view
var myImage = Ext.create('Ext.container.Container', {
layout: 'fit',
items: [{
xtype: 'image',
src: imgSrc
}]
});
var myImage2 = Ext.create('Ext.container.Container', {
scrollable: true,
items: [{
xtype: 'image',
src: imgSrc
}]
});
picWin = Ext.create('Ext.window.Window', {
title: "my title",
width: 300,
height: 400,
maximizable: true,
layout: "card",
activeItem: 0,
items: [myImage,myImage2],
listeners: {
maximize: function(){
this.setActiveItem(1);
},
restore: function(){
this.setActiveItem(0);
},
}
})
picWin.show();
What if we changed the layout from 'fit' to 'hbox' instead? This seems to give you what you want - when the window is maximised, the image does not stretch. Center and vbox also seemed to work, so there are probably a few layouts you could use to make it work. But since you only have an image in the window, it probably doesn't matter.
picWin = Ext.create('Ext.window.Window', {
title: "My Picture",
width: 300,
height: 400,
maximizable: true,
layout: "hbox",
items: [myImage]
})
picWin.show();
}
I am trying to resize windows in ExtJS 6, and they resize fine, but I would like to resize them whilst maintaining the aspect ratio, but so far after an extensive google search and trying many options, I cannot seem to find a solution.
I have a simple window with two panels in with textfield in one and a button in the other to begin with whilst I figure this out - below is a sample of the code in which I am trying to apply this to.
Ext.define('SenchaApp.view.MainView', {
extend: 'Ext.window.Window',
autoShow: true,
height: 600,
width: 600,
constrainHeader: true,
title: 'Main View',
items:[{
xtype: 'panel',
height: 200,
width: 600,
items:[{
xtype: 'displayfield',
text: 'my button'
}]
},
{
xtype: 'panel',
height: 200,
width: 600,
items:[{
xtype: 'button',
text: 'my button'
}]
}
]
});
Use the resizable config in your window which can be a config object of Ext.resizer.Resizer. The Resizer class has a preserveRatio config for exactly what you want.
resizable: {
preserveRatio: true
}
Here's a fiddle to demonstrate:
https://fiddle.sencha.com/#fiddle/11rh
I have a vbox panel on the right side of my page:
{
xtype: 'panel',
region: 'east',
itemId: 'clipboard',
autoScroll: true,
width: 200,
layout: {type:'vbox',align: 'stretch',pack: 'start'},
collapsible: false,
split: true,
border: false,
}
When an event occurs, I need to add a new image with text beneath it to the 'clipboard' strip:
var clipboard = Ext.ComponentQuery.query('panel[itemId=clipboard]')[0];
clipboard.add(
{
xtype: 'panel',
layout: { type: 'vbox', align: 'center',pack: 'start'},
data: data,
margin: '5 0 5 0',
items: [{
xtype: 'image',
src: 'resources/images/clipboardItem.png',
height: 32,
width: 32
}, {
xtype: 'box',
html: 'This text needs to wrap around because it is too wide to fit in the clipboard strip.'
}]
});
The image is correctly centered over the text. The text should wrap around, so that it's not wider than the clipboard. However, its container is not shrinking to the width of the strip. The text length is determining the width of its immediate container.
What configuration changes do I need to make so that each item I add to the clipboard has a centered image, followed by a block of text that potentially wraps around within the bounds of the clipboard, and everything adjusts when the user changes the width of the clipboard?
http://jsfiddle.net/nxSmS/
Just add a width to the box...
xtype: 'box',
width: '100%',
html: '<p>This text is super long and will be too wide for the panel</p>',
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 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.