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',
Related
I have created a tab panel using Extjs
Ext.define('tabPanel.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel',
requires: [
'tabPanel.view.MyTabPanelViewModel',
'Ext.Toolbar',
'Ext.Img'
],
viewModel: {
type: 'mytabpanel'
},
activeItem: 1,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: '',
layout: {
type: 'hbox',
align: 'start',
pack: 'center'
},
items: [
{
xtype: 'image',
height: 78,
width: 101,
src: 'https://www.gravatar.com/avatar/46c7c14743be3064db03681e16e55fd3?s=48&d=identicon&r=PG&f=1'
}
]
},
{
xtype: 'container',
title: 'Tab 1'
},
{
xtype: 'container',
title: 'Tab 2'
},
{
xtype: 'container',
title: 'Tab 3'
}
]
});
I was trying to make the panel header as my site header. I was tried to add a logo before the tab buttons. But the alignment was not working as expected. Is it possible to set the logo in the left and the tab buttons after the logo. Is it possible?
Don't know if this is the right way, or if this is the result you are expecting, but my solution is to use tabBar config in the tabpanel to add the logo, and after the component is created I add the other tabs that I want.
tabBar: {
items: [{
xtype: 'image',
height: 78,
width: 101,
src: 'https://www.gravatar.com/avatar/46c7c14743be3064db03681e16e55fd3?s=48&d=identicon&r=PG&f=1'
}]
},
listeners: {
beforerender: function (cmp) {
cmp.insert(1, [{
xtype: 'container',
title: 'Tab 1',
}, {
xtype: 'container',
title: 'Tab 2'
}, {
xtype: 'container',
title: 'Tab 3'
}])
}
}
I had to add the other panels after the component is created because, by default, the tabbar items are added after the tabpanel items, adding them after the component is created, the logo will be on the left of the other panels
Checkout the fiddle
I am trying to change the CSS of the "Filter" in tabulator. I want to change the size of the text and the colour, yet nothing is happening.
This is how I am displaying the columns:
{ title: 'Folder', field: 'title', width: '80%', formatter: '', align: 'left', headerFilter: 'input', headerFilterPlaceholder: 'Search Title', headerSort: false, sorter: '' },
{ title: 'Files', field: 'files', width: '20%', formatter: '', align: '', headerFilter: '', headerFilterPlaceholder: '1', headerSort: false, sorter: '' }
I have already tried the following CSS:
.tabulator-header-filter{
font-size:10px;
color: #F01;
}
.tabulator-placeholder{
font-size:10px;
color: #F01;
}
.tabulator{
font-size:10px;
color: #F01;
}
You have to use a specific CSS selector for a textbox's placeholder text.
.tabulator-header-filter input::placeholder {
font-size: 150%;
color: green;
}
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
So i have the panel here with several components:
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
//Query Builder
items: [
{ xtype: 'combobox', padding: 5, fieldLabel: 'Search In', store: states, displayField: 'field1' },
{ xtype: 'button', text: 'Add', itemId: 'add_criteria' },
{ xtype: 'combobox', padding: 5, region: 'east', fieldLabel: 'Criteria 2', itemId: 'combo2', hidden: true },
...
I have a controller set up that listens for the Add button to be clicked. What I want to do is add on a combobox (and maybe also a textfield as well?) each time the user clicks the button. The comboboxes will be added to the panel going down vertically.
Any ideas?
EDIT:
I updated it for ExtJS 4.2.
I've made you a working example. http://jsfiddle.net/cmvQt/
HTML:
<div id="panel"></div>
ExtJS:
Ext.require([
'Ext.panel.*',
'Ext.form.field.*'
]);
Ext.onReady(function(){
function addComboBox(){
panel.add({xtype: 'combobox'});
}
panel = Ext.create('Ext.panel.Panel',{
xtype: 'panel',
renderTo: 'panel',
padding: 5,
height: 500,
width: '35%',
items: [{
xtype: 'button',
text: 'Add',
handler: addComboBox
}]
});
});
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: [
''
]
}
]
}
]
}