I am using Sencha Touch 2.2.1 . I want to display list items with icons, for that I am using itemTpl config property of the list. The image is rendered as icon but the list item is not getting aligned properly- it appears starting from much below. I want the text to get started from the top- it must be aligned horizontally with the image. I also tried changing 'margin' property but it didn't seem to work.
Please find my code below:
Ext.define('BBraunSencha.view.ListPanel',{
extend: 'Ext.Panel',
xtype: 'listpanel',
config:{
layout:{
type: 'vbox',
align: 'stretch'
},
items:[
{
xtype: 'label',
html: '<div style="margin-left: 20px;">List one</div>'
},{
xtype: 'list',
flex: 1,
ui:'round',
scrollable: true,
data:[
{ name: 'item1', price:'2000',in_stock : 'no'},
{ name: 'item2', price: '3000',in_stock :'yes'}
],
itemTpl: '<img src="images/Tulips.jpg" style="height: 50px;width: 50px;display:inline-block;margin-right:50px;"/>{name}'
}
]
} });
What can be the other way to achieve it?
Add a class to your css, then use that class for your itemTpl:
CSS file:
.tulip-icon {
background-image: url(images/Tulips.jpg);
background-size: 50px 50px;
background-repeat: no-repeat;
padding-left: 50px;
}
JS Code:
itemTpl: '<div class="tulip-icon">{name}</div>'
Add css:
.list-image{
height:20px;
width:20px;
float: left;
}
in js file:
itemTpl:'<div><img src="images/Tulips.jpg" class="list-image">{name}</div>'
Related
I would like to put favorite star icon at the upper right corner of the parent container. I created css with absolute position, but it doesn't work.
I created span field and used font-awesome (in this case fa fa-star, although it is not so important, because the same result is obtained for simple text).
Can anyone tell me how to place this star at the upper right corner of the parent container?
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 300,
style:'border:1px black solid',
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
margin: 5
},
items: [{
xtype: 'image',
height: 128,
width: 128,
src: 'https://www.disneyclips.com/images/images/roojumping2.gif'
}, {
xtype: 'component',
html: 'Hello'
},
{
html: '<span class="fa fa-star topright"></span>',
},
]
});
}
})
app.css
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 28px;
}
index.html
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
This is a simple way to do it, just put that listener on the child component:
listeners:{
afterRender: function (a){
var floatBox = document.createElement('div');
//classic doesn't have fontAwesome, use a image instead
floatBox.innerHTML = '<img class="fa fa-star topright" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/16x16/star.png" ></img>';
a.ownerCt.el.dom.appendChild(floatBox) ;
}
}
That way, when the child component is rendered it put a float box on the parent component, you could put that listener on the main panel instead and just test for conditions to show, just remove the ownerCt part.
Classic 7.3.1 Material
I am not sure how to get the font awesome icons in the non-material themes.
Here is a fiddle using the classic toolkit.
You can drag the main container and the icon moves with the container.
You can style the button however you want and it has a tool-tip.
If you plan on allowing resize of the container then you will have to implement the resize event handler and call setPosition on the button.
Classic Toolkit fiddle
This puts a button in the top left corner of the browser.
let body = Ext.getBody();
let button = Ext.widget('button', {
text: 'Favorite',
iconCls: 'x-fa fa-star',
ui: 'round',
floating: true,
renderTo: body,
style: 'position: absolute; top: 20px; right: 20px;'
});
Fiddle floating button
I'm redesigning a frontend for a uni project written with ExtJS 6.
right now I'm wondering how to properly add an image to a container that fits the size:
I tried a displayfield using value: "img=.../>" but I can't seem to make the image fit properly - it's just way to big. The same goes for "html: img=.../>".
also adressing id: 'TopMenu' with #TopMenu{} in css seems to have no effect whatsoever regardless of the options I try to change :(
I suspect ExtJS defaults have higher priority than my own settings or I'm simply not adressing the container right.
Ext.define('textImager.view.menu.TopMenu', {
extend: 'Ext.panel.Panel',
// id für css: #TopMenu
id: 'TopMenu',
xtype: 'TopMenu',
layout: 'hbox',
items: [
// goethe logo
{
flex: 1,
id: 'GoetheLogo'
},
// Website titel
{
flex: 8,
id: 'Titel',
html: 'TextImager'
},
// dropdown menu
{
flex: 1,
id: 'DropdownMenu',
xtype: 'button',
html: 'menu',
menu: [
{xtype: 'button',
html: 'test1'}]
},
]
});
the current css:
#TopMenu-body{}
#GoetheLogo-body{
background-image:url(../resources/images/menu/TT_logo_transparent.png);
background-position: right center;
background-size: contain;
background-repeat: no-repeat;
background: rgba(123,123, 123, 0.8);
}
#Titel{}
#DropdownMenu{}
simply resizing would be a bad workaround and I also have to adjust the background which currently is not working either.
I would greatly appreciate some insight on how to properly adress the containers with css.
I've found a solution - it might not be the best, but I'm quite happy with the result:
// TT logo mit Link zur Website
{
flex: 1,
xtype: 'button',
height: '100%',
//TODO: add link
html: '<div class="TT_logo"><img src="./resources/images/menu/TT_logo_transparent.png"></div>'
},
css:
.TT_logo{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.TT_logo img{
max-width: 100%;
max-height: 100%;
}
I'm trying to format each record I retrieve from a server by using a class (carousel-squares) defined in a css file. I need that each record appears inside a thumbnail in my view.
However, when I use it inside a div in my itemTpl, nothing appears. Why itemTpl does not recognize the class? If i use the class outside (in cls:) it is recognized.
The code I have in my dataview is the following:
xtype: 'dataview',
store: {
autoLoad: true,
fields: ['Title', 'Description', 'State'],
proxy: {
type: 'ajax',
url: 'ws/idea/GetByState.php?title=&page=1',
reader: {
type: 'xml',
record: 'WebIdea',
rootProperty: 'GetByStateResult'
}
}
},
styleHtmlContent: true,
cls: 'carousel-squares',
itemTpl: '<div class="carousel-squares"><h3>{Title}</h3><p>{Description}</p></div>',
flex: 1
My css is the following:
.carousel-squares {
background-color: #fcfcfc;
border: 2px solid #99cb39;
width: 90%;
height: 30px;
margin: 20px 5px;
}
I am new to sencha touch.
How do we change the background color of a button to white? I have a button with two images in each corner. I want the button to be plain white.
I tried using css like this:
.quest {
background: url(../images/quest.jpg) no-repeat left,
url(../images/rightarrow.jpg) no-repeat right;
background-color: white;
border: none;
border-color:white;
padding-left: 50px;
text-align: left;
}
My button is here:
{
xtype: 'button',
text: '<div class="quest">Info</div>',
labelWidth: '100%',
name: '',
handler: function() {
}
}
My button has grey borders (Grey default button color in sencha) with white color in mid. How do i make it completely white? Please help.
I have even tried:
style: "background-color: white"
Using 'cls' attribute solved my problem.
{
xtype: 'button',
cls: 'btn',
text: '<div class="person">People</div>',
labelWidth: '100%',
},
In my app.css define
.btn
{
background-color: white !important;
background-image: none;
}
We have to redefine both background-color and background-image properties so that the default sencha-touch.css properties are overridden. Thank you Thiem Nguyen for your help.
This should render your desired button :)
config: {
ui: 'plain',
text: 'Your Text',
style: 'background-color:white;'
}
Just like Thiem Nguyen said, this will work
{
xtype:'button',
text:'text',
ui:'plain',
style:'background-color:white'
}
SALAM
I want to customize the html text, buttons and text fields with CSS sencha. how can I do?
if I have to put all the CSS code in a file apart, how can I connect each CSS code to a specific part. example:
I want to changed the font of the following text "it fits your needs ":
enter code here
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [
{
xtype: 'carousel',
id: 'car',
fullscreen: true,
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
items: [ {
html: '<div align="center" id="z">it fits your needs </br></br> <img src="images/logo.jpg" width="160" height="151""/></div>'
}]
}]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
how I can do?
thank you
you can define a class for each one like below in your html file
.Heading{
text-align: center;
-webkit-border-top-right-radius:0.5em;
-webkit-border-top-left-radius:0.5em;
font-weight: bold;
font-style: calibri;
padding:6px;
font-size:15px;
color: black;
background: -webkit-gradient(linear, left top, left bottom, from(lightgrey), to(lightgrey));
width: 100%;
height: 30px;
}
and you can use the class in your div tag by refering as
html: '<div class="Heading"></div>'