Im trying to create a carousel where, apart of the active item, the user can preview part of the next and previous items. I made a draw to illustrate it:
I tried things like padding or margin, but anything works.
Here's a carousel to play with: http://jsfiddle.net/XpG8v/
Ext.Viewport.add({
xtype: 'carousel',
height: 300,
width: 300,
items: [{
style: 'background-color: #00ffff;'
},{
style: 'background-color: #ff00ff;'
},{
style: 'background-color: #ffff00;'
}]
});
Thanks!
Simply set the 'itemLength' config to a fixed value, for example:
Ext.Viewport.add({
xtype: 'carousel',
itemLength: 200,
// ...
});
Related
I have panel with border layout:
var panel = new Ext.Panel({
width:'100%',
height:'100%',
layout:'border',
renderTo:'wrapper',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Header',
region: 'north',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0',
html: Ext.get("header-div").getHTML()
}
......
and I have a tree
var tree = Ext.create('Ext.tree.Panel', {
xtype: 'tree-xml',
id:'treegrid',
title: treeTitle,
width: '80%',
height: '80%',
renderTo: Ext.get("tree"),
....
My question is:how can I refernce tree in my panel, which means I want to append the tree into
'north' region of panel.
Thanks.
How to reference components in Extjs:
var treeReference = Ext.ComponentQuery.query ('tree-xml [title=treeTitle])[0]; // basically you are saying get me the first component you find that is a tree-xml and that its title is treeTitle
Check out the docs in sencha.
Be careful to refer to element 0 of the array (query method returns an array even if there is only 1 element matching).
Use methods add and remove from panels and containers to achieve desired functionality.
Best regards.
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
How to have 2 lists in one single panel in sencha touch 2?
I can see the first list if i use
layout:'card'
I tried :
layout: {
type: 'vbox',
align: 'stretch'
}
Please let me know how can i have 2 lists inside the same panel.
You need to use the flex config on each of your list.
You can see and example below here : Sencha Fiddle
Hope it helps
create panel with vbox layout inside it create two panel with fit layout and put every list into respective panle
try this method
Hi #Akshatha you can try this into your Ext.Panel,
...
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'list',
width: '40%',
flex: 1,
styleHtmlContent: true,
...
},
{
xtype: 'list',
width: '60%',
flex: 0.5,
styleHtmlContent: true,
...
},
]
...
You can define the width of Panel and you have Ext.List.
I hope help you. :)
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.
I've tried adding style: float: right to the button but it isn't working.
myapp.cards.home.add({
xtype: 'button',
id: 'previmagebutton',
// text: 'p',
iconCls: 'arrow_left',
iconMask: true,
style: 'float: right'
});
myapp.cards.home = new Ext.Panel({
scroll: 'vertical',
id: "home-card",
layout:{
type:"vbox",
align:"center"
},
items: [header]
});
myapp.mainPanel = new Ext.Panel({
fullscreen: true,
layout: "card",
cardAnimation: 'slide',
items: [myapp.cards.home]
});
I have to use the add method if that is what's causing the problem. Many thanks.
In your myapp.cards.home object you have the layout set up to align:"center".
I've succeeded in creating a floating button by using
floating:true
config on the button. It is a private member, so I'm still looking for an official way.
This should work ::
layout : {
type : 'vbox',
align : 'left'
}
or you can add a spacer if its in the toolbar, or if you stretch the element, then add another hbox element on its side with a flex that occupies as much space that you don't need