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:
Related
I'm unable to remove scrollbar in the textarea. Data for textarea is coming from a json file.
{
xtype: "fieldcontainer",
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 2,
items: [{
xtype: "textareafield",
name: "Message",
anchor: '100%',
grow:true,
scrollable: false,
value: widgetConfig.NOTES,
//width: "100%",
readOnly: true,
cls: "textareaStyles"
}]
}
scrollbar should be removed and the textarea height should auto increase
When you use grow:true in textareafield you have to adjust its height using growMin and growMax, in your case you are setting a height using flex:2
See a fiddle example
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 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 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>',
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.