My carousel is rendering weird, it doesnt load items horizontally it loads them one above the other. It looks like this: http://postimage.org/image/3tisqjl9n/
Is it because i make a carousel inside of a formpanel ?
Here you can see my code:
config: {
title: 'More Info',
layout: 'fit',
items: [
{
xtype: 'formpanel',
id:"moreInfo",
items: [
{
id: 'moreContent',
tpl: [
'<div style="border-bottom 1px solid black">',
'<h2 style="margin-bottom:5px;text-transform:capitalize;font-weight:bold">Project: {project}</h2>',
'</div>'
].join(''),
},
{
xtype: 'carousel',
defaults: { cls: 'card'},
direction: 'horizontal',
layout: 'fit',
directionLock: true,
items:[
{
html: "<img src='image1'>",
},
{
html: "<img src='image2'>",
},
{
html: "<img src='image3'>",
},
{
html: "<img src='image4'>",
},
]
},
{
xtype: 'fieldset',
defaults: {
labelWidth: '35%'
},
title: 'Receipts',
items: [
{
xtype: 'button',
id: 'takePicture',
padding: '10px',
text: 'Taka a picture'
},
{
xtype: 'textfield',
label: 'Price',
name: 'price'
},
{
xtype: 'textfield',
label: 'Vendor',
name: 'vendor'
},
]
},
{
xtype: 'button',
id: 'receiptSave',
padding: '10px',
ui:'confirm',
text: 'Save'
},
]
},
],
},
Related
Please help! I'm new to sencha touch and i have a problem. Problem is in the SettingsThirdField, when i change selectfield in the SettingsSecondField item value then the SettingsThirdField item must also change ActiveItem. For Instance, when i select a German language then in the SettingsThirdField item must set a second item as ActiveItem.
Ext.define('MS.view.settings.Main', {
extend: 'Ext.Panel',
alias: 'widget.settings',
config: {
layout: 'vbox',
items: [
{
xtype: 'container',
id: 'SettingsFirstField',
html: '<h1>First Item</h1>'
},
{
xtype: 'fieldset',
id: 'SettingsSecondField',
items: [
{
xtype: 'selectfield',
label: 'Language',
labelWidth: '35%',
options: [
{text: 'French', value: 'first'},
{text: 'German', value: 'second'},
{text: 'English', value: 'third'}
]
}
]
},
{
xtype: 'container',
id: 'SettingsThirdField',
layout: 'card',
items: [
{
xtype: 'container',
html: '<h1>Selected French Language</h1>'
},
{
xtype: 'container',
html: '<h1>Selected German Language</h1>'
},
{
xtype: 'container',
html: '<h1>Selected English Language</h1>'
}
]
}
]
}
})
Thank you to everybody
Didnt test but it should work.
Just add a listener for change and select the right tab in the handler.
Ext.define('MS.view.settings.Main', {
extend: 'Ext.Panel',
alias: 'widget.settings',
config: {
layout: 'vbox',
items: [
{
xtype: 'container',
id: 'SettingsFirstField',
html: '<h1>First Item</h1>'
},
{
xtype: 'fieldset',
id: 'SettingsSecondField',
items: [
{
xtype: 'selectfield',
label: 'Language',
labelWidth: '35%',
options: [
{text: 'French', value: 'first'},
{text: 'German', value: 'second'},
{text: 'English', value: 'third'}
],
listeners: {
change: function (select, newValue, oldValue) {
if( newValue.data.value === 'French'){
Ext.ComponentQuery.query('#SettingsThirdField')[0].setCard('frCard');
}
}
}
}
]
},
{
xtype: 'panel',
id: 'SettingsThirdField',
layout: 'card',
items: [
{
xtype: 'container',
id:'frCard',
html: '<h1>Selected French Language</h1>'
},
{
xtype: 'container',
id:'deCard',
html: '<h1>Selected German Language</h1>'
},
{
xtype: 'container',
id:'enCard',
html: '<h1>Selected English Language</h1>'
}
]
}
]
}
})
I've got a TabBar nav with a segmentedbutton that also contains a card
layout. Everything works fine. However, I'm trying to get my
segmentedbutton centered on the screen. I don't want it to stretch. I've included the main views and placed all the code on
SenchaFiddle
Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',
config: {
layout: 'fit',
items: [
{
layout: 'vbox',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
Ext.getCmp('card-container').setActiveItem(0);
}
},
{
text: 'Option 2',
handler: function() {
Ext.Msg.alert("foo");
Ext.getCmp('card-container').setActiveItem(1);
}
},
{
text: 'Option 3',
handler: function() {
Ext.getCmp('card-container').setActiveItem(2);
}
}
]
},
{
xtype: 'container',
flex: 10,
id: 'card-container',
layout: {
type: 'card'
},
items: [
{
xtype: 'option-view1',
style: 'background-color: #fff'
},
{
html: 'bar',
style: 'background-color: #666'
},
{
html: 'baz',
style: 'background-color: #333'
}
]
}
]
}
]
}
});
Ext.define('SenchaFiddle.view.MainView', {
extend: 'Ext.tab.Panel',
xtype: 'test-view',
id: 'test-view',
config: {
tabBarPosition:'bottom',
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-in-out',
type: 'slide',
direction: 'left'
}
},
fullscreen: true,
items: [
{
title: 'Tab1',
iconCls: 'info',
xtype: 'panel',
layout: {
type: 'fit'
},
items: [
{
title: 'Title 1',
xtype: 'toolbar',
docked: 'top'
},
{
id: 'image-tab',
html: 'Loading foo...'
},
{
xtype: 'seg-view',
layout: 'fit'
}
]
},
{
title: 'Tab2',
iconCls: 'action',
items: [
{
title: 'Title 2',
xtype: 'toolbar',
docked: 'top'
},
{
id: 'news-tab',
html: 'Loading bar...'
}
]
}
]
}
});
Just can you use layout:{pack:'center'} try to put you after allowDepress: true and have fun! centered.
Just like this:
Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',
config: {
layout: 'fit',
items: [
{
layout: 'vbox',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
layout: {pack:'center'},
...
Smarter :)
What you can do is put your segmentedbutton in an hbox layout an surround with with spacers :
Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',
config: {
layout: 'fit',
items: [
{
layout: 'vbox',
items: [{
xtype:'container',
layout:'hbox',
items:[{xtype:'spacer'},
{
xtype: 'segmentedbutton',
allowDepress: true,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
Ext.getCmp('card-container').setActiveItem(0);
}
},
{
text: 'Option 2',
handler: function() {
Ext.getCmp('card-container').setActiveItem(1);
}
},
{
text: 'Option 3',
handler: function() {
Ext.getCmp('card-container').setActiveItem(2);
}
}
]
},{xtype:'spacer'}]},
{
xtype: 'container',
flex: 10,
id: 'card-container',
layout: {
type: 'card'
},
items: [
{
xtype: 'option-view1',
style: 'background-color: #fff'
},
{
html: 'bar',
style: 'background-color: #666'
},
{
html: 'baz',
style: 'background-color: #333'
}
]
}
]
}
]
}
});
Hope this helps
I want a rounded list view in Sencha Touch 2. For that, i used ui:round attribute. But it is not working. Now left side, it is coming rounded. But for right side, it is not coming properly. And i want the list inside that rounded border. Below is my code:
Here is my code:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
draggable: true,
styleHtmlContent: true,
title: 'Artist',
items: [
{
xtype: 'list',
height: 696,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{firstName}'
],
store: 'name',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
styleHtmlContent: true,
scrollable: true,
title: 'Albums',
items: [
{
xtype: 'list',
height: 730,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{albumlist}'
],
store: 'albumstore',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
styleHtmlContent: true,
title: 'Playlist',
items: [
{
xtype: 'list',
height: 700,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{playlist}'
],
store: 'playliststore',
onItemDisclosure: true
}
]
}
],
tabBar: {
docked: 'top',
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
}
}
});
Now it is coming in rounded list. But scrolling is not coming properly. It is not going till the end of the list.
You have included some redundant configs to your components.
I've only made changes to MyTabPanel.js (quite a lot).
This is the source code after editing, it works well for Artist List, and it's similar to apply to other components as well:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
layout: 'card',
//draggable: true,
styleHtmlContent: true,
title: 'Artist',
items: [
{
xtype: 'list',
//height: 696,
ui: 'round',
//width: 325,
//modal: true,
itemTpl: [
'{firstName}'
],
store: 'name',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
layout: 'card',
styleHtmlContent: true,
//scrollable: true,
title: 'Albums',
items: [
{
xtype: 'list',
height: 730,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{albumlist}'
],
store: 'albumstore',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
layout: 'card',
styleHtmlContent: true,
title: 'Playlist',
items: [
{
xtype: 'list',
//height: 700,
ui: 'round',
//width: 325,
//modal: true,
itemTpl: [
'{playlist}'
],
store: 'playliststore',
onItemDisclosure: true
}
]
}
],
tabBar: {
docked: 'top',
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
}
}
});
I am unable to display list in my view. It seems I am getting data back from my ajax call.
I am definitely missing something here. Please help. Thanks
Below are details:
data:
Stations.json
[
{
"id": "129",
"stop": "NY Station",
},
{
"id": "13",
"stop": "Newark Station",
}
]
model:
Ext.define('MyApp.model.Station', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'string'},
{name: 'stop', type: 'string'}
]
}
});
Store:
Ext.define('MyApp.store.Stations', {
extend : 'Ext.data.Store',
requires: ['MyApp.model.Station'],
id: 'stations',
xtype: 'stations',
config : {
model : 'MyApp.model.Station',
storeId: 'stationsStore',
autoLoad : true,
//sorters: 'stop',
proxy: {
type: 'ajax',
url: 'Stations.json'
}
});
View:
Ext.define('MyApp.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: 'vbox',
requires: [
'MyApp.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
iconCls: 'settings',
title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
xtype: 'list',
title: 'Stations',
store: 'stationsStore',
styleHtmlContent: true,
itemTpl: '<div><strong>{stop}</strong> {id}</div>'
},
]
},
initialize: function() {
/*
Ext.Ajax.request({
scope : this,
url: 'StationLocator.json',
callback : function(options, success, response){
var json = Ext.decode(response.responseText);
alert(response.responseText); //this works
alert(json[0].stop); //this works
}
});
*/
}//initialize
});
I put it in a TabPanel. Will this help? It looks like this:
Here's my view:
Ext.define('MyApp.view.MyService', {
extend: 'Ext.tab.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: {
pack: 'center'
},
requires: [
'MyApp.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
tabBarPosition:'bottom',
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-in-out',
type: 'slide',
direction: 'left'
}
},
fullscreen: true,
title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
xtype: 'list',
title: 'Stations',
store: 'stationsStore',
// height: 600,
// width: 400,
// style: 'background-color: #c9c9c9;',
styleHtmlContent: true,
itemTpl: '{stop} {id}'
}
]
}
});
Here's a version that puts the list in a regular panel:
Ext.define('MyApp.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
fullscreen: true,
layout: {
pack: 'center'
},
requires: [
'MyApp.store.Stations',
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],
config: {
fullscreen: true,
layout: 'fit', // Specifying fit is important. Won't see list without it
title: 'My Service',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'My Service'
},
{
xtype: 'list',
store: 'stationsStore',
styleHtmlContent: true,
itemTpl: '{stop} {id}'
}
]
}
});
Just wondering if anyone can let me know how I can get these three buttons to centered and evenly spaced within the container?
Ext.define('rpc.view.home.indexView', {
extend: 'Ext.Panel',
alias: 'widget.homeView',
config: {
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'center'
},
defaults: {
xtype: 'button',
margin: '10 10 0 10'
},
items: [{
text: 'Videos',
cls: 'x-button-quicknav'
}, {
text: 'Events',
cls: 'x-button-quicknav'
}, {
text: 'Sites',
cls: 'x-button-quicknav'
}]
}]
},
initialize: function () {
console.log('rpc.view.home.index ~ initialize');
}
});
Nailed it
JS
xtype: 'container',
layout: {
type: 'hbox',
pack: 'center'
},
defaults: {
xtype: 'button',
ui: 'plain',
style: 'margin-top: 5px;'
},
items: [{
text: 'Videos',
cls: 'x-button-rpc',
flex: 1
}, {
xtype: 'container',
cls: 'x-button-rpc-spacer'
}, {
text: 'Events',
cls: 'x-button-rpc',
flex: 1
}, {
xtype: 'container',
cls: 'x-button-rpc-spacer'
}, {
text: 'Sites',
cls: 'x-button-rpc',
flex: 1
}]
CSS
.x-button-rpc{
border-radius: 5px;
border:1px solid #c4c4c4 !important;
background-color: White !important;
}
.x-button-rpc-spacer{
display: inline-block;
width: 5px;
}