Related
I have a grid panel with a checkbox added in its header.
How can I stylize the checkbox?
Ext.define('MyApp.view.SalesTour', {
extend: 'Ext.grid.Panel',
controller: 'salestour',
title: 'List of SalesTour',
iconCls: 'x-fa fa-handshake-o',
store: 'MyApp.store.SalesTourStore',
columnLines: true,
header:
{
xtype: 'header',
titlePosition: 0,
defaults: {
margin: '0 10px'
},
items: [
{
xtype: 'checkbox',
//labelStyle: 'color: #FFFFFF',
//style: 'color: #FFFFFF',
boxLabel: 'Hide converted',
name: 'hideConverted',
inputValue: true,
checked: true
}],
listeners: {
beforerender: 'onBeforeHeaderRender'
}
},
columns: [
{
...
...
I tried using labelStyle and style properties unsuccessfully...
I would expect to see the checkbox and its label of white color.
Some suggestion, please? What can I do?
Thanks a lot!!!!
You could add css classes to the checkbox.
For Example
You could create a css class
.boxLabel-font-white {
color: white;
}
And add the class to the config boxLabelCls to color the boxLabel for the checkbox.
https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.Checkbox.html#cfg-boxLabelCls
There are many more cls-configs you could use:
https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.field.Checkbox.html
I hope that helps
I'm building an application using Ext.js, and I built a grid panel, and I'm loading data every 14 seconds. When the scrollbar appears on the panel, it appears an white space that I'm trying to remove but I don't know how, I already tried to overwrite the ID that contains the timeline and change the color, but it didn't work because Ext.js generated the CSS code again and every changes disappeared.
Demo
Is it possible to hide this white space?
My code:
Ext.define('ES.view.Layout.Menu.Menu', {
extend: 'Ext.grid.Panel',
alias: 'widget.timelineBar',
controller: 'menu',
viewModel: 'menu',
autoScroll: true,
title: 'Timeline',
bodyStyle: 'background: #2b5876;',
store: {
type: 'timeline'
},
columns: {
border: false,
defaults: {
hoverCls: ''
},
items: [{
text: locale.time,
flex: 1,
dataIndex: 'time',
align: 'center',
height: 60
},
{
text: locale.address,
dataIndex: 'address',
flex: 1,
align: 'center',
height: 60
listeners: {
click: 'onItemClick'
},
},
{
text: locale.dir,
dataIndex: 'dir',
flex: 1,
align: 'right',
height: 60
}
]
}
});
I am learning sencha touch and extjs using citybars sample app provided by sencha itself.
Here is the link
http://docs.sencha.com/architect/3/tutorials/first_mobile_application.html
This app is very good for learning purpose and now i want to create an demo app in which i have following things:
There is a mainview which contains, static/fixed header (name view1).
Main view contains another view, let say view2 which is variable or can be changed.
Question
How can i achieve this functionality in which view2 change dynamically?
I can guide you with what you want to achieve.
If you need a slide navigation then first try this.
I am providing you with an sample code which will give you some idea on your desired layout. Try this view:
Ext.define('Sample.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.dataview.List'
],
config: {
layout: 'hbox',
cls: 'main',
items: [{
xtype: 'list',
itemTpl: '{title}',
data: [{ title: 'Red', val: 'red' },
{ title: 'Blue', val: 'blue' },
{ title: 'Orange', val: 'orange' },
{ title: 'Purple', val: 'purple' }],
flex: 1,
listeners: {
itemtap: function(el, index, target, record, e) {
var me = this,
element = Ext.get(e.target),
main = element.parent('.main'), //assign the dom of 'Main' view to 'main'
newCls = record.get('val');
if(me.lastAddedCls) {
main.removeCls(me.lastAddedCls).addCls(newCls);
} else {
main.addCls(newCls);
}
me.lastAddedCls = newCls; // Keeps track of last added view so that it can be further removed
}
}
}, {
cls: 'viewTwo',
flex: 2
}]
}
});
Here suppose the first section is navigation panel and second section is you desired variable view 2.
You can now add some styling in a css file(say style.css)
.main.red {
background-color: red;
}
.main.blue {
background-color: blue;
}
.main.purple {
background-color: purple;
}
.main.orange {
background-color: orange;
}
NB: Don't forget to add this css file in bootstrap.json and app.json files.
I showed this example by changing the background color. You can try adding and removing views here.
Feel free to ask any query.
You could use a TabPanel with a docked top toolbar. The TabPanel bottom bar would then allow your users to navigate between the views in your app.
A very simple example which you could build on for your own use:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My title'
},
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
The items would just be your own views created in Architect:
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My title'
},
{
xtype: 'mylistview',
iconCls: 'home'
},
{
xtype: 'mymapview',
iconCls: 'map'
}
]
Read more here => http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.tab.Panel
I am new to extjs.I am designing a pop up window which basically populates some data from the server.I have used the layout as 'fit' and I am using labels for displaying the data.Here is my code
win = new Ext.window.Window({
title: 'Data point details',
layout: 'fit',
width: 'auto',
height: 500,
modal: false,
closeAction: 'destroy',
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
rows :10 ,
tdAttrs:
{
style:
{
margin: '160px',
valign: 'top' ,
padding: '8px' ,
'font-size' : '12px'
}
}
},
defaults: {
bodyPadding: 10 ,
},
items: [
{
xtype: 'label',
text: 'Element : ' ,
style:
{
'font-weight':'bold',
'labelAlign' : 'right',
}
},
{
xtype: 'label',
text: elementname
},
{
xtype: 'label',
text: 'Expression: ' ,
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: s.expressionName
},
{
xtype: 'label',
text: 'Profile: ' ,
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: s.profileName
},
{
xtype: 'label',
text: 'Time:',
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: Highcharts.dateFormat('%a, %b %e, %Y, %I:%M %p ', this.x)
},
{
xtype: 'label',
text: 'Value:',
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: yvalue ,
},
{
xtype: 'box',
style : {
padding: '0px',
height: '90px',
//background : 'white',
},
html: new Ext.XTemplate("<div style=\"height:150px;\">{value}")
.apply({value: me.htmldiv.innerHTML })
},
]
});
win.show();
I want the columns which appear on the left hand side to have their text on the right,but the text is always towards the left for all the cells it seems .Likw for example the label which has the text 'Element' appears to be on the left.I have used labelalign but it does not work.Kindly give suggestions
Just few suggestions until i get to the solution:
You have reduntant comas all over the place. Some older browsers will fail on such thing. Example:
{ 'font-weight':'bold',<<-- here }
win = new Ext.window.Window(... - this is global variable declaration - probably worst thing you can do in JavaScript and way to hell. Use var keyword to declare local variables like so: var win = new Ext.window.Window(...
labelAlign is the way to align label text to the right BUT a) you are applying it through style property (styles which Ext apply to HTML element created by component) and b) labelAlign is property of Labelable components and as strange as it might sound, Label itself is not Labelable. Just don't use Label like this, see below...
Duplicate layout property on Window
When you are asking for help and posting code as part of the question, edit your code so that it doesn't contain exteral dependencies - can be copied and run immediately. It took me nearly half a hour to make your sample working
As i said before, you are using Lable component in the way it is not suppose to be used. Labels are not created directly but by specifying label properties on components implementing Labelable mixin (Fields in most cases). It might sound complicated but is not, take a look at the code:
var wnd = new Ext.window.Window({
title: 'Data point details',
width: 400,
height: 200,
modal: false,
closeAction: 'destroy',
layout: {
type: 'anchor',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
labelAlign: 'right',
labelStyle: {
'font-weight': 'bold'
},
labelWidth: 100
},
items: [{
xtype: 'displayfield',
fieldLabel: 'Element',
value: 'elementname'
}, {
xtype: 'displayfield',
fieldLabel: 'Expression',
value: 's.expressionName' // s.expressionName
}, {
xtype: 'displayfield',
fieldLabel: 'Profile',
value: 's.profileName' // s.profileName
}, {
xtype: 'displayfield',
fieldLabel: 'Time',
value: 'time'
}, {
xtype: 'displayfield',
fieldLabel: 'Value',
value: 'yvalue' // yvalue
}]
});
wnd.show();
You can try it and play with it here. My final suggestion would be to take a look at the official ExtJS documentation and guides which are pretty good - here for example are samples on making forms...
Here is an approach to use css styles inline, not in a separate class. This could be useful if you get css values from your javascript constants:
this.myLabel = Ext.create('Ext.form.Label', {
text: 'My Label Name',
style: {
'text-align': this.defaults.myLabelAlign, // The javascript constant.
'font-size': this.defaults.myLabelStyle // The javascript constant.
}
});
I'm trying to put 3 buttons on top of an xtype:'img', but I'm getting nowhere and can't find much online about it.
How does this work?
EDIT:
i have an image and when you tap it i want it to display the same image but now there are 3 options you can choose from view download share i want the buttons to look like they pop up over the image
Ext.define('Crystal.view.apphb',{
extend: 'Ext.Panel',
xtype:'apphb',
id:'panel',
requires: [
'Ext.TitleBar',
],
config:{
layout: {
type: 'card',
animation: {
type: 'fade'},
},
items:[{
xtype:'img',
src:'resources/img/apphb.png',
listeners: {
tap: function() {
Ext.getCmp('panel').setActiveItem(1);
},
},
},
{
xtype:'img',
src:'resources/img/1.png',
listeners: {
tap: function() {
Ext.getCmp('panel').setActiveItem(-1);
}
},
}
]
}
});
What I understand from your question is simple. You want to show certain buttons in a pop up on tap of image. So you use overlays and put buttons inside it.
A working fiddle with demo is here. You can display anything in you want in this pop up.
The method .showBy() let you place pop up relative to certain element passed as parameter. Here's the code,
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
items:[
{
xtype:'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
height: 64,
width: 64,
listeners:{
tap:function( img,e,opts ){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width:160,
height:90,
items:[
{
xtype:'button',
text:'Download'
}
],
styleHtmlContent: true,
scrollable: true
});
overlay.showBy(img);
}
}
}
]
});
}
what about using img as the background for the container?
xtype: 'container',
style: 'background: url(http://wallpapers.free-review.net/wallpapers/36/New_Batman_movie.jpg) no-repeat;',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'container',
flex: 1
},
{
xtype: 'container',
height: 100,
defaults: {
margin: 5,
height: 80,
width: 100
},
items: [
{
xtype: 'button',
text: 'Like'
},
{
xtype: 'button',
text: 'Tweet'
}
]
}
]
}