I am trying to create a horizontal scroll list which can be swiped left or right (something like Tinder, but with the option to come back to a previous content)
This is what I am trying to create:
http://postimg.org/image/5jcurf1q1
This is what I have been able to get so far:
http://postimg.org/image/4o7h33w9h/
The problem is I am not able to make dataview item to stay within the boundaries of the mobile screen
What I have done till now to get this is:
Use a dataview
Set inline wrap to false
inline: {
wrap: false
}
Set scrollable to 'horizontal'
scrollable: 'horizontal'
Set the following layout:
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
},
CSS set for the dataview:
.dataview-base {
background-color: #cacacd;
}
CSS set for the dataview items:
.dataview-item {
border-right: 1px solid #000;
border-left: 1px solid #000;
border-top: 5px solid #59535E;
border-bottom: 5px solid #59535E;
padding:20px;
margin: 0px 20px 0px;
}
How can I achieve what I am trying to achieve ? I am pretty sure it has to do with the CSS of the dataview and the dataview items but I am not sure what ?
Any help would be highly appreciated.
Here is the complete Main.js view
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.DataView'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'dataview',
height: '100%',
styleHtmlContent: true,
inline: {
wrap: false
},
itemCls: 'dataview-item',
baseCls: 'dataview-base',
itemTpl: [
'<div class="arHeadline">',
' {Headline}',
'</div>',
'<div class="arbyline">',
' {Author}',
'</div>',
'<div class="arcontent">',
' {Content}',
'</div>'
],
store: 'Discovers',
scrollable: 'horizontal',
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
},
},
{
xtype: 'toolbar',
docked: 'top',
title: 'Summary'
}
]
}
});
Thank you
My suggestion is using carousel instead of dataview. You can also load data into it: Loading a Carousel from a Store in Sencha Touch 2?
Related
This is my container where I want to load text, this code is inside a modal (pop up) I need that my pop up take the text height that was loaded.
Ext.define('Base.view.Notes', {
extend: 'Ext.Container',
xtype: 'notes',
config: {
modal: true,
scrollable: null,
itemId: 'generalNotesContainer',
width: '90%',
height: '90%',
margin: '2em 5% 5% 5%',
maxHeight: "90%",
minHeight: "90%",
floating: true,
centered: true,
layout: 'vbox',
items: [
//other item
{
xtype: 'container',
itemId: 'generalNotesContent',
padding: "10",
scrollable: true,
flex: true,
html: ''
}
]
}
});
Use Ext.window.MessageBox and dont give any configs like height,width.It will handle dimensions as per its content.Currently you have used Container as parent,replace it by messagebox.
I got to resize the pop up doing this:
Ext.define('Base.controller.WorkOrders', {
config: {
refs: {
woView: 'woview',
generalNotesContent: 'container#generalNotesContent',
},
control:{
woView:{
activate: 'woViewActivate'
}
}
},
woViewActivate: function(){
this.loadNotes();
},
loadNotes: function(){
var gNotesView = Ext.widget('notes');
Ext.Viewport.add(gNotesView);
var html = "<div>My html</div>"
this.getGeneralNotesContent().setHtml(html);
var NotesHtml = this.getGeneralNotesContent();
this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight);
//if it is needed extra height we can do this
//var extraHeight= 70;
//this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight+ extraHeight);
gNotesView.show();
}
this is how how looks my screen
I m creating a form in layout.I want to align the title in centre. example: Registration.
Here is a simple code.
{
// xtype: 'panel' implied by default
title: 'Settings',
region:'east',
xtype: 'panel',
margins: '0 0 0 0',
width: 200,
collapsible: true,
split: true, // make collapsible
id: 'egion-container',
layout: 'fit'
}
i want that title "Settings" in center
you can simply wrap title inside a div tag and do whatever you want :
{
// xtype: 'panel' implied by default
title: '<div style="text-align:center;">Settings</div>',
region:'east',
xtype: 'panel',
margins: '0 0 0 0',
width: 200,
collapsible: true,
split: true, // make collapsible
id: 'egion-container',
layout: 'fit'
}
This is covered in the docs, there's a config called titleAlign.
I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?
I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }
The problem is due to the list need to have a high.
I hope it can automatically increase the height of the.
In 2.0.1 effect is what I need SenchaTouch2.0.1Demo
But now the project with 2.1.0
The effect is like this SenchaTouch2.1.0Demo
How can I use 2.1.0 achieve 2.0.1 effect
You have to set the flex property if you are using layout as vbox / hbox.
items: [{
title: 'tab1',
scrollable: true,
layout: 'vbox',
items: [{
flex:1,
xtype: 'label',
cls: 's-header',
style: 'padding: 1em; text-align: center;',
html: 'Header'
},{
flex:1,
xtype: 'list',
itemTpl: '{title}',
scrollable: false,
...
I wanted to ask for help cause I can't find any apropriate answers.
I'm developing an app which has 2 modules, one left and one right side that i can enable/disable with a toggle. Each side has a picture with a slider below. The slider has 4 steps which change the pictures. Now I want the pictures to have a fade animation onChange. I can't find an example that comes close enough to my problem.
Here is the code:
{
xtype: 'container',
name: 'rightContainer',
flex: 1,
padding: '2',
items: [
{
xtype: 'container',
id: 'containerr',
flex: 1,
html: '<img src="boerse_icon1.png" />',
margin: 25,
},
{
xtype: 'container',
flex: 1,
docked: 'bottom',
items: [
{
xtype: 'sliderfield',
id: 'sliderr',
disabled: true,
value: 0,
minValue: 0,
maxValue: 3,
margin: 25,
flex: 1,
listeners: {
change: function( me, Slider, thumb, newValue, oldValue, eOpts) {
if (newValue == 0) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon1.png" />');
}
if (newValue == 1) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon2.png" />');
}
if (newValue == 2) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon3.png" />');
}
if (newValue == 3) {
Ext.getCmp('containerr').setHtml('<img src="boerse_icon4.png" />');
}
}
}
}
]
}
]
}
this is just the right container. I'm running Sencha Touch framework 2.0
TIA
What you need to do is basically:
Create a panel with the following layout:
layout: {
type: 'card',
animation: {
type: 'fade',
duration: 2000
}
}
Then you create a slider with a listener on the change event:
listeners: {
change: function(me, Slider, thumb, newValue, oldValue, eOpts) {
panel.setActiveItem(newValue);
}
}
Fill the panel with items (images) and you are good to go.
Just for the sake of it I've put together a working Senchafiddle for you to experiment with:
Senchafiddle example
Hopefully this helps you!
May be this work.
{
xtype: 'container',
id: 'containerr',
showAnimation :'fadeIn',
flex: 1,
html: '<img src="boerse_icon1.png" />',
margin: 25,
},