this is my code:
Code:
{ xtype: 'tabpanel',
docked: 'top',
height: 752,
width: '100%',
activeItem: 1,
items: [
{
xtype: 'container',
title: 'MyCar',
items: [
{
xtype: 'container',
maxWidth: '100%',
width: '100%',
items: [
{
xtype: 'image',
docked: 'top',
height: 407,
html: '',
id: 'imgCar',
padding: '0 0 0 510',
style: 'margin: 0px auto; width: 50%;background-size: auto;',
src: 'http://localhost/car.jpg'
}
]
},
{
xtype: 'dataview',
height: 297,
html: ' <table id="tableConsumptions"> <tr> <td id="consumptionsCol">val</td></tr> </table>',
width: '100%',
itemTpl: [
''
]
}
]
},
{
I have an image container, and I would like to adapt the image dimension to the screen dimension, scaling it.
How is it possible?
Thanks in advance.
You can try using this function to fetch the height and width of the Viewport.
Ext.viewport.getWindowHeight( );
Ext.viewport.getWindowWidth( );
for those who might stumbled on this...
most important thing is the parent container of the image component need to be "fit" (card might also do) and we set the background-size styling of the image component to 100% (for width and height)
{
xtype: 'tabpanel',
docked: 'top',
height: 752,
width: '100%',
activeItem: 1,
items: [
{
xtype: 'container',
title: 'MyCar',
items: [
{
xtype: 'container',
layout: 'fit', //supposedly when we want our image to be the same size as its container without specifying width and height, we use this and set the background-size style of the image to 100% (for both width and height)
maxWidth: '100%',
width: '100%',
items: [
{
xtype: 'image',
docked: 'top',
height: 407,
html: '',
id: 'imgCar',
style: 'background-size: 100% 100% !important;', //the most important key is backgeound-size styling for the image as it will be set as background of a div (unless we use mode: 'img' config)
src: 'http://localhost/car.jpg'
}
]
},
{
xtype: 'dataview',
height: 297,
html: ' <table id="tableConsumptions"> <tr> <td id="consumptionsCol">val</td></tr> </table>',
width: '100%',
itemTpl: [
''
]
}
]
}
]
}
Related
The filefield xtype has property to hide textfield and show only button with config: buttonOnly: true.
However, although the textfield is not shown, it occupies space, and the width of that component is not the same as width of the button. So, when more buttons should be aligned in hbox layout, they are not stretched properly (Panel1).
Is it possible to somehow show only the button of filefield so that it appears as if it was a 'normal' button (Panel2)?
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel1',
items: [{
xtype: 'container',
padding: '10px 0 20px 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
defaults: {
margin: '0 5 0 0',
width: 150
},
items: [{
xtype: 'filefield',
name: 'upload',
buttonOnly: true,
buttonText: 'Upload photo',
flex: 1,
}, {
xtype: 'button',
name: 'savephoto',
text: 'Save photo',
flex: 1,
}, {
xtype: 'button',
name: 'remove',
text: 'Remove photo',
flex: 1,
}]
}, ]
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel2',
items: [{
xtype: 'container',
padding: '10px 0 20px 0',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
defaults: {
margin: '0 5 0 0',
width: 150
},
items: [{
xtype: 'button',
name: 'upload',
text: 'Upload photo',
flex: 1,
}, {
xtype: 'button',
name: 'savephoto',
text: 'Save photo',
flex: 1,
}, {
xtype: 'button',
name: 'remove',
text: 'Remove photo',
flex: 1,
}]
}, ]
});
}
});
You can use the 'buttonConfig' property:
{
xtype: 'filefield',
name: 'upload',
buttonOnly: true,
buttonText: 'Upload photo',
buttonConfig: {
width: '100%'
},
flex: 1,
}
I have used the ExtJS properties of cls, bodyCls, componentCls but not getting the result.
For an example:
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyPadding: 10,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});
Now CSS:
.form {
background-color:orange !important;
}
I wanted to get background color orange but I am not getting the result what I want.
ANY HELP WOULD BE GREAT APPRECIATED
You need to apply class like below (need to apply background to the body of form):
.form .x-panel-body-default {
background-color:orange !important;
}
Working Fiddle
Hope this will help/guide you.
You can add css like this to Panel config,
Like bodyStyle: 'background: orange !important', in your panel
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
cls: 'form',
bodyStyle: 'background: orange !important',
bodyPadding: 10,
defaultType: 'textfield',
We are trying to develop a progress bar in which we have to align a text on top of button. We tried using different layouts but its not coming. Can some suggest a way to do it using CSS if possible. Attaching the example here.
CSS should solve your problem, this is a bit hard-coded and won't work as a generic solution but you can start from here:
First let's create a panel with progress bars and a button between them:
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
height: 100,
layout: {
type: 'hbox',
align: 'middle'
},
defaults: {
margin: 2
},
items: [{
xtype: 'progressbar',
style: {
borderRadius: '5px'
},
height: 10,
width: 200,
text: ' ',
value: 1
}, {
xtype: 'container',
cls: 'btnWrapper',
items: [{
xtype: 'button',
height: 30,
cls: 'fa fa-check',
style: {
color: 'white'
}
}]
}, {
xtype: 'progressbar',
style: {
borderRadius: '5px'
},
height: 10,
text: ' ',
width: 200
}]
});
And here is the CSS to take care of the rest:
<style>
.btnWrapper:before {
content: 'BASICS';
font-weight: bold;
position: absolute;
top: -20px;
left: -10px;
width: 100%;
color: orange;
text-align: center;
}
.btnWrapper .x-btn {
border-radius: 30px;
}
</style>
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/21n5
In my extjs6 grid I have column headers that don't fit in the space. How do I do a word wrap in the column header only? This is what I have tried and is not working.
xtype: 'grid',
title: 'Daily Performance',
itemId: 'performanceAccountDailyGridID',
bind: {
store: '{myDailyPerformanceAccountStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
height: 400,
width: 800,
columns: [
{
header: 'Filedate',
dataIndex: 'filedate',
flex: 1
},
css
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
You CSS selector should be nested till .x-column-header-text which contains the column header text.Just giving white-space: normal is sufficient.
So your CSS should be:
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
Working Example:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'region'],
data: [{
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Arizona'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alaska'
}, {
name: 'xyz',
email: 'xyz#xyz.com',
region: 'Alabama'
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
width: 400,
cls: 'custom-gridPerformance',
renderTo: Ext.getBody(),
columns: [{
text: 'Name of zoro of life style',
dataIndex: 'name',
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
}, {
text: 'State',
dataIndex: 'region',
}],
});
.custom-gridPerformance .x-column-header-inner .x-column-header-text {
white-space: normal;
}
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
Here is the output I require!
Here is how I try to achieve this:
win = Ext.create('Ext.window.Window', {
height: 650,
width: 500,
layout: 'fit',
border: false,
bodyPadding: 10,
modal:true,
itemId:'serviceCallWindow',
header: {
cls: 'n-service-call-window-header',
height: 80,
items:[{
xtype: 'component',
floating: true,
autoShow: true,
shadow: false,
focusOnToFront:false,
defaultAlign: 't',
autoEl: {
tag: 'img',
src: NG.serverMapPath('~/resources/images/support/support_icon.png')
},
componentCls: 'n-service-call-support-icon'
}]
},
items: [{
xtype: 'servicecall',
border: false,
bodyPadding: 10
}]
});
The challenge is to get the service call icon between the window header and body.
How can I achieve this?
This is achievable through manipulating CSS and the various layouts. You would perhaps also need to get rid of the header and actually make your own "close" button which would fire the windows close method.
such as below:
Ext.application({
name: 'Fiddle',
launch: function() {
win = Ext.create('Ext.window.Window', {
height: 300,
width: 500,
border: false,
bodyPadding: 10,
header: false,
modal: true,
layout: 'vbox',
itemId: 'serviceCallWindow',
items: [{
xtype: 'container',
/*layout: {
type: 'hbox',
pack: 'center'
},*/
width: '100%',
items: [{
xtype: 'image',
cls: 'testLogo',
style: {
margin: '0 auto',
width: '50px',
display: 'block'
},
src: 'http://placehold.it/50x50'
}, {
xtype: 'button',
cls: 'testClose',
style: {
top: 0,
right: 0,
position: 'absolute'
},
icon: 'http://placehold.it/20x20',
listeners: {
click: function() {
win.close();
}
}
}],
}, {
xtype: 'container',
border: false,
bodyPadding: 10,
html: 'this is the content of another container'
}]
});
win.show();
}
});
Demo: https://fiddle.sencha.com/#fiddle/g6t