How can I make a carousel scroll vertically on the page?
I don't mean it's items, I mean the whole carousel.
For example, this simple code is a carousel which won't scroll:
var carousel = new Ext.Carousel({
flex: 1,
indicator: false,
dockedItems: [Toolbar],
layout: 'card',
defaults: {
scroll: 'vertical'
},
items: [
{
html: 'Card 1'
},
{
html: 'Card 2'
},
{
html: 'Card 3'
}
]
});
Thanks.
You need to add in the direction attribute:
var carousel = new Ext.Carousel({
flex: 1,
indicator: false,
dockedItems: [Toolbar],
layout: 'card',
direction: 'vertical',
defaults: {
scroll: 'vertical'
},
items: [
{
html: 'Card 1'
},
{
html: 'Card 2'
},
{
html: 'Card 3'
}
]
});
Related
I have this code:
Ext.define('play.view.Quiz', {
extend: 'Ext.Container',
xtype: 'myquiz',
config: {
fullscreen: true,
layout: 'vbox',
title: 'My Quiz',
items: [
/* Questions */
{
xtype: 'my_questions'
},
]
}
});
and
Ext.define('play.view.Questions', {
extend: 'Ext.Carousel',
xtype: 'my_questions',
config: {
defaults: {
styleHtmlContent: true
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
}
});
The questions wont display, yet when i place the questions within the quiz items, they display.
Is it possible to reference a carousel xtype from a container?
Yes #Bohbo can you do something like this:
Ext.define('play.view.Questions', {
extend: 'Ext.Carousel',
xtype: 'my_questions',
config: {
defaults: {
styleHtmlContent: true,
layout: 'fit',
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
},
});
Note important element is layout:'fit'. I hope this helps. :)
I am using ExtJS portal code in my application
I want to make portlet in collapsed state at the time of loading the page. So I have done something like
items: [{
id: 'portlet-1',
title: 'Grid Portlet Texsds',
tools: this.getTools(),
height:200,
**collapsed:true,**
autoScroll :true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this),
'endDrag': Ext.bind(this.onPortletDrag, this),
'resize' :Ext.bind(this.onPortletResize, this)
}
}
I have made collapsed property to true. But because of this when I am trying to expand the portlet [after page load] I can see blank Grid.Plz. refer the attached image.
What is the problem ? do I need to do refresh or something ? because when I set collapsed to false I can see the grid.
Please suggest what is missing here.
This is a code for the getTools: function(){
{
type: 'Minimize',
handler: function(e,target,panelHeader,tool){
//panelHeader.ownerCt.toggleCollapse();
if (panelHeader.ownerCt.collapsed)
{
panelHeader.ownerCt.expand();
}
else {
panelHeader.ownerCt.collapse();
}
}
}
for the first time when the portlet get load it is in collapsed state, Now when I click on cross icon not [the "^" for expand icons ] I can see the Blank grid.
Hope this time I am able to explain well.
I took the Ext JS 4 example portal app and added your code (without the asterisks) to portlet-1. It is properly collapsed on load and expands to show the grid.
I don't think there is anything wrong with the code you've posted. Perhaps you've changed the layout or layout properties of the surrounding container and that is affecting your portlet.
Here is my complete portal.js:
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
//requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
collapsed: true,
height: 200,
autoscroll: true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
We're currently working with the Sencha Touch Carousel, and we got following problem. We haven't seen any easy way to show more than 3 cards / images (default option). The code looks like this
var gallery = new Ext.Carousel({
cls: 'galleryimage',
xtype: 'carousel',
height: '60px',
width: '65px',
items: [{
html: '<img src="static/images/gallery/ex2.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_2.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_3.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_4.jpg" />',
cls: 'image',
},
{
html: '<img src="static/images/gallery/ex2_5.jpg" />',
cls: 'image',
}]
});
It's pretty disturbing that it isn't clearly documentated, since I think alot of people want to do that. I hope there is anyone who has got a really easy way, without having to change other .scss files.
/* EDIT */
Added this code to it:
var gallerypanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [gallery]
});
Here you go, a working example with 4 cards :
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [
{
title: 'Tab 1',
html: '1'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
},
{
title: 'Tab 4',
html: '4'
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
});
}
});
Hope it helps
I've got some HTML content that is longer than a full page in height. At the end of this content, I'd like to include a horizontal carousel. Every attempt I make shows the HTML content, but I can't get the carousel to work properly.
Here's where I'm at code-wise...
Ext.create('Ext.Container', {
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'panel',
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
},
{
xtype: 'carousel',
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
}
]
});
Any help greatly appreciated.
I have expirience with Sencha 1.1. I have no idea if your syntax is for 1.1 or 2.
i played a little with your code, and here it goes.
Ext.setup({
onReady: function() {
var panel= new Ext.Panel({
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
});
var carousel = new Ext.Carousel({
flex:1,
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [panel, carousel]
});
}
});
The big thing that was missing to you is the flex:1 property. This is why it didin't appear in your screen. Its highly crucial.
I'm trying to make a small application with sencha-touch and I have a tabpanel with the layout card. when I click on tab Producten a card slides in but what I want is that in that card comes another tabpanel so people can choose between Men and Women with also a layout card.
I tried a lot of stuff and nothing seems to work.
var rootpanel;
var panel;
Ext.setup({
onReady: function() {
var Home = {
cls: 'home',
title: "Home",
html: "Homepagina"
}
var Producten = {
title: "Producten",
html: "Productenpagina",
items: [
panel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: 'true',
ui: 'plain',
layout: 'card',
items: [Men, Women]
})
]
}
var Men = {
title: "Men",
html: "men"
}
var Women = {
title: "Women",
html: "Women"
}
var Winkelwagen = {
cls: 'winkelwagen',
title: "Winkelwagen",
html: "Winkelwagenpagina"
}
rootpanel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: true,
ui: 'plain',
layout: 'card',
items: [Home, Producten, Winkelwagen]
})
}
})
try this codes :
Ext.regApplication({
name : 'MyApp',
launch : function(){
window.localStorage.clear();
new MyApp.MainTabPanel({
fullscreen : true
});
}
});
MyApp.MainTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',
html: '',
items: [
{ iconCls: 'time', title: 'Time', xtype: 'TimeTabPanel'},
{ iconCls: 'user', title: 'People', xtype: 'PeopleTabPanel' }
]
});
Ext.reg('MainTabPanel',MyApp.MainTabPanel);
MyApp.PeopleTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'user', title: 'Man' , html: 'MAN TAB'},
{ iconCls: 'user', title: 'Woman', html: 'WOMAN TAB' }
]
});
Ext.reg('PeopleTabPanel',MyApp.PeopleTabPanel);
MyApp.TimeTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'time', title: 'AM', html: 'AM TAB' },
{ iconCls: 'time', title: 'PM', html: 'PM TAB' }
]
});
Ext.reg('TimeTabPanel',MyApp.TimeTabPanel);