Can anybody tell How to display list item border in sencha touch .The below code i have implement default border is not coming for list
{
xtype:'list',
height: '80%',
store:'SearchStore',
itemTpl : '<img src="{country}" width="30" heigh="30"></img><span>{name} </span>',
}
I tried code. A few modifications you can do are:
{
xtype: 'list',
store: 'SearchStore',
itemTpl: [ // It works perfectly
'<div>',
' <img style="width:30px;height:60px;vertical-align:middle" src="{country}">',
' <span style="">{name}</span>',
'</div>'
].join('')
}
Your mistakes: (Though it may not create that problem)
height was heigh
Extra </img> tag was there.
Let me know if you face any issue. (And share the screenshot too)
Related
Sencha Touch 2 includes Ext.util.Droppable and Ext.util.Draggable classes. Does anyone have a simple example showing how basic drag and drop behavior works?
It seems any component can be made draggable with the 'draggable' config option. Here I create a simple Panel with a draggable image component:
Ext.create("Ext.Panel", {
fullscreen: true,
items: [
{
xtype: 'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
height: 64,
width: 64,
left: '10px',
top: '10px',
draggable: {
direction: 'both',
},
}
]
});
and that works fine: the component can now be dragged around inside the Panel.
But how do we now make a simple "drop target" using the Ext.util.Droppable class?
Consider the following item. When i fill the field with text. The text is vertically aligned to the middle. How do i ensure this is vertically aligned top. To be clear i do not mean "My Label" but the actual field value.
{
xtype:'displayfield',
name:'FromAddress',
height:100,
fieldLabel:'My Label'
},
It'd be nice if there was a fieldBodyStyle config, but fieldBodyCls will work here:
<style type="text/css">
.align-top { vertical-align:top; }
</style>
{
xtype: "displayfield",
name: "FromAddress",
height: 100,
fieldLabel: "My Label",
fieldBodyCls: "align-top"
}
setting labelAlign = 'top' works great too
I am new to sencha touch. I have a button with a compose icon. The icon appears in the right bottom corner of my button as per the given size of the button. Can anyone help me in aligning it? iconAlign attribute is not working for me.
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
action:'landedInfo'
}
You have to set the padding property to 0 because the width and height you provide are too small and therefore are messing with the 'center' value you provide for 'iconAlign':
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
padding:0,
action:'landedInfo'
}
One way to see it is to increase to width and height to, say 100x50, then you will get a centered icon without touching the padding property...
I admit this might be tricky to spot at first.
Hope this helps
Setting the margin in css helped me put the icon in the center:
.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{
margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
}
I tries this and works for me:
{
xtype: 'button',
ui: 'normal',
text:'LOGOUT',
iconMask: true,
iconCls: 'user',
iconAlign:'center',
padding:0,
cls: 'x-iconalign-top',
}
if you use icon-font, you can do it with css.
.x-button-icon {
/*Icon centering*/
position:absolute;
width:1em;//set width of icon relative(icon is font)
top:50%;
margin-top:-0.5em;//half of icon height shift back
left:50%;
margin-left:-0.5em;//half of icon width shift back
}
You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.
Im writing a Sencha touch app that I want to show a popup box that has three buttons. I put a function in a controller that is supposed to display the popup, which it kind of does. My problem is that there is no background or border for the popup, so you can see right through it. Here is an example for my controller
Ext.regController('LoginController', {
'login' : function(options) {
loginPopup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width : 250,
height : 250,
layout : {
align : "center",
pack : "center"
},
styleHtmlContent : true,
items : [Button1, Button2, Button3],
dockedItems : [
{
dock : 'top',
xtype : "toolbar",
title : 'Title'
}
]
loginPopup.show('pop');
All the items and dockeditems show up, but there is no background or border.
I would have posted a pic, but im apparently not reputable
Use sencha-touch.js and sencha-touch.css from same version of Sencha Touch. js and css files are different for every version of Sencha Touch. For development, import the whole Sencha release. See this. For prod keep only files that you require.
set background color for the overlay using the style property
style: 'background-color: color_of_your_choice'
So, I have a panel in Sencha Touch and I have an image which I want to display as a component in that panel. I have tried several things along the lines of:
logo = {
xtype: 'component',
autoEl: {
src: 'http://addressofmyimage.com/image.png',
tag: 'img',
style: { height: 100, width: 100 }
}
};
Then adding above component as an item in my panel. No image is displayed. All of my other components are displayed but not the image. Not even a broken-image-link icon. I can't figure this out...
I'd rather not just insert raw html, as I cannot format that as I wish.
Probably better off using a panel to display the image itself. Replace the above code with...
logo = {
xtype: 'panel',
html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};
You could override the Component's getElConfig method and return what you have in your autoEl object.
{
xtype: 'component',
getElConfig : function() {
return {tag: 'img',
src: 'http://addressofmyimage.com/image.png',
style: { height: 100, width: 100 },
id: this.id};
}
}
That method is used when the component is rendered to get the makeup of the underlying element.
You can use src.sencha.io API to resize image as you wish. Belowed example works for me.
{
xtype: 'image',
src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
height: 100
}
You can find documentation here.