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>',
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
});
In my project, I am trying to position a container as absolute. but if I do so, it is also effecting the neighbour items. I mean, after positioning the container, if I give some width and height to that particular container, it is effecting all the toolbar. (which I don't want to happen). This effect is happening even if I use layout: 'absolute or css position:absolute.
Here is my related code:
xtype: 'panel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 40,
items: [
{
//only this should be absolute positioned
xtype: 'container',
cls: 'logo', //tried with applying css styles !important
//even tried with layout: 'absolute'
},'-',
//the below elements should not move their position
//even if the above one has been applied positioning.
{
xtype: 'container'
},'->',
{
xtype: 'container'
}]
}],
Here my goal is to bring the container out of the toolbar because it should have greater height than the toolbar keeping other containers constant.
If the profile pic container has to be higher than the toolbar, it can't be a child of the toolbar container.
You could create a container with absolute layout below the toolbar, in that container you will have the profile pic and you can use a negative Y variable in order to move up the image, so it looks like is in the toolbar.
Just like this
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
items: [
{},
{ xtype: 'tbspacer', width: 50 }, // Moving the button to the right
{ text: 'Fake Name Button' }
]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width : 700,
renderTo: Ext.getBody(),
items: [toolbar]
});
var image = Ext.create('Ext.Img', {
x: 0,
y: -25,
maxWidth: 70,
src: 'https://twimg0-a.akamaihd.net/profile_images/1471554494/swel.png'
});
Ext.create('Ext.container.Container', {
layout: {
type: 'absolute'
},
renderTo: Ext.getBody(),
items: [image]
});
http://jsfiddle.net/alexrom7/33cP8/1/
This solution is not so pretty, but it might work.
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: