How to adjust the image in sencha touch image panel? - extjs

Question

Can any one help me to display image totally in the image panel.50% of the screen should display image and another 50% has some menus. In the 50% image block , I am not getting image fully. Here is my snippet.
Ext.define('scheduler.view.Main', {
extend: Ext.Panel,
xtype: 'main',
config: {
fullScreen: true,
layout: 'vbox',
scrollable: true,
cls: 'mainLayout',
height: '100%',
items: [
{
cls: 'mainbackgpanl',
docked: 'top',
height: '50%'
},
{
xtype: 'spacer'
},
{
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'center'
},
items: [
{
xtype: 'button',
width: '50%',
layout: {
pack: 'center'
},
ui: 'normal',
text: '<div align="center"><img width="64px" height="64px" src="resources/images/calendar-icon.png" style="vertical-align: middle"><br /><p class="icon_text">Calendar</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onCalendarTap();
}
},
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/book-event.png" style="vertical-align: middle"><br /><p class="icon_text">Book Event</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBookEventTap();
}
}
]
},
{
xtype: 'spacer'
},
{
xtype: 'panel',
layout: 'hbox',
items: [
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
},
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}
]
},
{
xtype: 'spacer'
}
]
}
});
and here is my css
.mainbackgpanl > div{
background: url("http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg") center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:cover;
}
Thanks in Advance.

Answer 1

In trying to simplify your use case, I come up with this code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
layout: "fit",
items: [{
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}]
}]
});
}
});
Which apart from not loading the images (as I do not have them) it works fine, you can see a Sencha Fiddle HERE.
The main difference between my code and yours is that I have a parent panel with layout: 'fit' so that it takes up all the space available, then added the hbox layout in two child components below.
EDIT: If you are trying to make the images fill the containers so that they are both 50% width, you'll need to remove the height and width attributes width="64px" height="64px". ExtJs has an Image component which may be better to use in this case.

Answer 2

I think your code actually works fine if you were to change fullScreen to fullscreen have a look at the demo here
Ext.define('scheduler.view.Main', {
extend: Ext.Panel,
xtype: 'main',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
cls: 'mainLayout',
height: '100%',
items: [{
cls: 'mainbackgpanl',
docked: 'top',
height: '50%'
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'button',
width: '50%',
layout: {
pack: 'center'
},
ui: 'normal',
text: '<div align="center"><img width="64px" height="64px" src="resources/images/calendar-icon.png" style="vertical-align: middle"><br /><p class="icon_text">Calendar</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onCalendarTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/book-event.png" style="vertical-align: middle"><br /><p class="icon_text">Book Event</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBookEventTap();
}
}]
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}]
}, {
xtype: 'spacer'
}]
}
});
Have a look at the demo here https://fiddle.sencha.com/#fiddle/gu5