I've got a Container with a header, content (Carousel) and a footer. The Container itself is therefor scrollable (vertical) to be able to scroll down to the footer. The Carousel can be swiped horizontally to change active item. I want to lock it to do only two thing:
If starting to move vertically, only scroll Container
If starting to move horizontally, only scroll Carousel
If you now grab the Carousel you are able to scroll both ways at the same time. Example code:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
scrollable: true,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
height: 200,
scrollable: false,
items: [
{
xtype: 'label',
html: 'x'
},
{
xtype: 'label',
html: 'y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
}
]
}
});
Using Sencha Touch 2.
You might need to block the over scrolling .This will help to prevent both vertical scrolling and carousel item change happening at the same time.Try this code inside your scrollable of container.
scrollable: {
directionLock: true,
direction: 'vertical',
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 3
},
outOfBoundRestrictFactor: 0
},
If starting to move horizontally, only scroll Carousel
Just add this to the config of your container :
config: {
scrollable: {
direction: 'vertical',
directionLock:true
}
}
I still haven't figured out how to lock the carousel when you scroll vertically. I'll let you know if I find out.
Try this one.It is working fine for me.
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
scrollable: {
direction: 'vertical'
},
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
height: 200,
direction: 'horizontal',
directionLock: true,
items: [
{
xtype: 'label',
html: 'x'
},
{
xtype: 'label',
html: 'y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y<br/>y'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
}
]
}
});
Related
I am trying to show a view as a "modal" within my application. The main application is a tab panel and when the user does a certain action, I want to popup a view ontop of this tabpanel. I know on native iOS you can do this by pushing a view as a modal but how do I do this in Sencha?
Any ideas?
You can do this:
Ext.define('MyApp.controller.MyController4', {
extend: 'Ext.app.Controller',
config: {
control: {
"button#mybutton": {
tap: 'onMybuttonTap'
}
}
},
onMybuttonTap: function(button, e, options) {
Ext.Viewport.add({xtype:'modalpanel'});
}
});
Views:
Ext.define('MyApp.view.ModaPanel', {
extend: 'Ext.Panel',
alias: 'widget.modalpanel',
config: {
centered: true,
height: 300,
html: 'Cool Story Bro....',
itemId: 'modalPanel',
width: 300,
hideOnMaskTap: true,
modal: true,
scrollable: true,
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Blah Blah'
}
]
}
});
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
items: [
{
xtype: 'container',
title: 'Tab 1',
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton10'
}
]
},
{
xtype: 'container',
title: 'Tab 2'
},
{
xtype: 'container',
title: 'Tab 3'
}
]
}
});
EDIT:
You are probably looking for an actionsheet if this is not exactly what you want. See the Sencha Touch Kitchensink for the different types of Overlays.
For some reason my form panel isn't showing. Can anyone help? I'm a newbie so sorry if this is obvious! It was build with Sencha Architect but I can't understand why no fields are showing in the form?...
Ext.define('MyApp.view.Login', {
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My Title'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Call'
},
{
xtype: 'button',
text: 'Email'
}
]
},
{
xtype: 'container',
flex: 1,
border: 2,
items: [
{
xtype: 'formpanel',
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
label: 'Field'
},
{
xtype: 'textfield',
label: 'Field'
}
]
}
]
}
]
}
]
}
});
To display formpanel (Ext.form.Panel) using Sencha Touch 2.3+ correctly inside other container you need to add scrollable: null property
{
xtype: 'formpanel',
scrollable: null,
items: [
...
]
}
See discussion here
Change the layout of your Login view from vbox to fit. Then set the layout of the container that contains your formpanel to fit also.
Check this link for more info about layouts in Sencha Touch.
What I'm trying to do here is to use a card layout within the panel of a carousel. But it seems impossible that it's not common to create a card layout and the carousel is actually one of the card-layout-like container. So I wonder if it can be achieved in Sencha Touch 2.
Here is my main view, a plain carousel container:
Ext.define("myapp.view.Main", {
extend: 'Ext.carousel.Carousel',
config: {
defaults: {
styleHtmlContent : true
},
activeItem: 0,
items: [
{
xtype: 'firstview'
},
{
xtype: 'secondview'
},
{
xtype: 'thirdview'
}
]
}
});
and here is my 'firstview', which extends the Ext.Panel as part of the carousel container:
Ext.define("myapp.view.Compose", {
extend: 'Ext.Panel',
xtype: 'firstview',
requires: [
'Ext.form.FieldSet',
'Ext.TitleBar',
'Ext.form.Text',
'Ext.Button'
],
config: {
styleHtmlContent: true,
scrollable: true,
layout: 'vbox',
items: [
{ // title bar
xtype: 'titlebar',
docked: 'top',
title: 'a Title here'
},
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{ // controll button set - to change view for composing different kinds of messages
xtype: 'segmentedbutton',
allowDepress: true,
allowMultiple: false,
items: [
{
text: 'subview-1',
pressed: true
},
{
text: 'subview-2'
},
{
text: 'subview-3'
}
]
}
]
},
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
config: {
height: '100%',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
}
]
}
});
as you can see, there is a card layout within this panel. But as a matter of fact nothing is not going to display.
Of course, I can find another way out to achieve some thing similar here, but I just want to know is it impossible to embed a card container into a card-layout-like container, for example, 'tabPanel' or 'carousel' in sencha touch 2?
Hey in the Compose widget replace the the part with id:'id_compose_card'
with this
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
flex: 1,
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
I just took out the parts inside the config object and put them outside. Im getting this feeling that u cant nest a config inside another config object for a class definition. A lot of people are having issue and this seems to be the problem. You might want to confirm this on their forum.
Then I also replaced the attribute
height: '100%',
with this
flex:1
This will tell the vbox layout to make your component fill the remaining space.
I'm not quite figuring out how to have a carousel between two other items, inside a container, with the carousel NOT having a set height but instead taking the space it requires depending on the size of the content of the active item. Example code:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'just need space for one line'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'need<br/>space<br/>for<br/>more<br/>lines'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
}
]
}
});
For me it just collapses into nothing (not taking any space at all) if height isn't specified. Using Sencha Touch 2.
You need to set a layout to your container. You can find an intro to layouts here
Basically, you add this in your config :
layout:'vbox',
The VBox layout positions items horizontally in the container.
Then, in your carousel, just add :
flex:1
to tell it to take as much space at it can.
Example here
Hope this helps
Hey #TragedyStruck first you have understand your screen where you display your web app. Ok here we go, I did version of your code. The component Ext.Viewport.getSize().height take the necessary space for your element. This works for elements NOT fullscreen, if you want fullscreen elements, so you need to programmatically to make a function.
Ext.define('myapp.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'mycontainer1',
config: {
scrollable: true,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
style: 'background-color: red',
height: Ext.Viewport.getSize().height,
renderTo: document.body,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'just need space for one line'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'need<br/>space<br/>for<br/>more<br/>lines'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'ghi'
}
]
}
]
}
});
I hope this helps. :)
I'm starting to play around with sencha touch 2 and ran into the following problem.
I'm trying to build a very simple application which has a listview and a tabpanel with a button :
I'm seeing the tabpanel with my button and nice title; but the listview refuses to show; i've tried adding 'layout: fit' but it's even worse.
What 'obvious' thing am I missing here ?
Main.js:
Ext.define('CurrencyFX.view.Main', {
extend: 'Ext.Panel',
requires: [
'CurrencyFX.view.Home',
'CurrencyFX.view.CurrencyList',
],
config: {
items: [
{ xtype: 'homecard' },
{ xtype: 'currencycard' },
]
}
});
Home.js:
Ext.define('CurrencyFX.view.Home', {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar'],
xtype: 'homecard',
config: {
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Currency FX',
items: [
{
text: 'Refresh',
align: 'right',
action: 'reloadQuotes'
}
]
}
]
}
});
CurrencyList.js:
Ext.define('CurrencyFX.view.CurrencyList', {
extend: 'Ext.List',
requires: ['CurrencyFX.store.Currencies'],
xtype: 'currencycard',
config: {
itemTpl: '{name} is at {value}',
store: 'Currencies',
}
})
Can you add a height to the currencycard? This provides a quick check:
items: [
{ xtype: 'homecard'},
{ xtype: 'currencycard', height: 500 }
]
Here's a layout that will fill the screen (note that I moved docked: 'top' to here!!):
Ext.define('CurrencyFX.view.Main', {
extend: 'Ext.Panel',
requires: [
'CurrencyFX.view.Home',
'CurrencyFX.view.CurrencyList'
],
config: {
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'homecard',
docked: 'top'
},
{ xtype: 'currencycard'}
]
}
});