PDA

View Full Version : Problem with image layout



jumpow
13 Jul 2013, 1:19 AM
I have to put Logo in right bottom corner of panel.How I can do it and what is wrong in this code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' type='text/css' href='extjs/resources/css/ext-all.css'>
<script type='text/javascript' src='extjs/ext-all-debug.js'></script>

<script type="text/javascript">
Ext.application(
{
name: 'IVR Statistic',
launch: function()
{
Ext.BLANK_IMAGE_URL='extjs/resources/s.gif';
var repParams = Ext.create('Ext.form.FieldSet',
{
title: 'Report&nbsp;parameters',
collapsible: false,
width: 400,
border: 1,
margins: '2 2 2 2',
items:
[
{
html: 'Parameters...<BR>Parameters...<BR>Parameters...<BR>Parameters...',
border: 0
}
]
});
var hbAB = Ext.create('Ext.panel.Panel',
{
width : '100%',
height: '100%',
layout: 'vbox',
align: 'right', //Does not work?
border: 1,
pack: 'end', //Does not work?
margins: '2 2 2 2',
items:
[
{ border: 1,
html: '<IMG SRC="images/Logo.JPG">', margins: '2 2 2 2'
}
]
});

var hbParams = Ext.create('Ext.panel.Panel',
{
width : '100%',
layout: 'hbox',
align: 'bottom',
border: 2,
items:
[
repParams,
hbAB
]
});

var portal = new Ext.Viewport(
{
layout: 'border',
autoScroll:true,
items:
[
{
id: 'JSCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
width: '100%',
items:
[
hbParams
]
}
]
});
}
});
</script>
</head>
<body></body>
</html>

44870

slemmon
14 Jul 2013, 8:57 PM
You might take a look at the vbox examples page for a reference on how to use the vbox layout syntax including the pack and end configs.

You might also look at the image component which you can use in a container as it will participate in the container's layout (I'd recommend always setting the image component's height and width during configuration):
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Img

bryanstrader
2 Aug 2013, 1:24 PM
Thank you this information was very hard to find.

My layout wasn't acting right, needed to be "kicked" (doLayout) in order to render properly.

All because one image component didn't have height and width set, this should be in the documentation someplace.

jumpow
5 Aug 2013, 5:09 AM
No, width/heigh does not help.
Does not help also replacing
{ html: '<IMG SRC="images/Logo.JPG" height="47" width="148">', margins: '2 2 2 2' }
with logo,
where
var logo = Ext.create('Ext.Img',
{
src: 'images/Logo.JPG',
height:47,
width:148
});
So, how I can set image to right side of screen?

slemmon
6 Aug 2013, 1:32 PM
Your layouts / configs could be improved.
Also, for the image (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Img) to participate in the layout it needs to be a component. The image component will do the trick here (with height and width defined explicitly).
See the below example:



var repParams = Ext.create('Ext.form.FieldSet', {
title: 'Report&nbsp;parameters',
collapsible: false,
width: 400,
border: 1,
margins: '2 2 2 2',
items: [{
html: 'Parameters...<BR>Parameters...<BR>Parameters...<BR>Parameters...',
border: 0
}]
});
var hbAB = Ext.create('Ext.panel.Panel', {
// height: '100%',
// width: '100%',
layout: {
type: 'vbox',
align: 'right',
pack: 'start'
},
flex: 1,
// align: 'right', //Does not work?
border: 1,
// pack: 'end', //Does not work?
margins: '2 2 2 2',
items: [{
xtype: 'image',
// src: 'images/Logo.JPG',
src: 'http://manuelreyes.net/images/icon-sencha-128.png',
height: 140,
width: 372,
border: 1,
margins: '2 2 2 2'
}]
});


var hbParams = Ext.create('Ext.panel.Panel', {
width: '100%',
layout: 'hbox',
align: 'bottom',
border: 2,
items: [
repParams,
hbAB
]
});


var portal = new Ext.Viewport({
layout: 'border',
autoScroll: true,
items: [{
id: 'JSCenter',
region: 'center',
layout: 'vbox',
margins: '2 2 0 0',
// width: '100%',
items: [
hbParams
]
}]
});