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;
}
Related
I have created a layout in sencha using vbox and hbox layout.But the issue is when I uses textfield and textareafield ,its size remain same even though the screen size varies.
I searched a lot on google and found many having the same issue.
Code below
Ext.define('GS.view.RequestNew', {
extend : 'Ext.form.Panel',
xtype: 'requestnew',
requires: [
'Ext.Label',
'Ext.Img',
'Ext.field.TextArea'
],
config: {
title : 'Test',
iconCls: 'favorites',
layout:'fit',
items: [
{
xtype: 'panel',
layout: 'vbox',
items: [
{
flex: 1,
layout: 'vbox',
items: [
{
flex: 9,
layout: 'vbox',
style: 'background-color: #A96D13;',
items : [{
flex: 1,
layout: 'vbox',
items:[{
flex: 1,
layout:'vbox',
items: [{
flex: 1,
layout:'vbox',
style:'background-color: #C48627;',
margin : '6px 6px 6px 6px',
items:[{
flex: 1,
layout:'vbox',
style:'background-color: #C48627;',
margin : '6px 6px 6px 6px',
items:[
{
flex: 1,
layout:'vbox',
items: [{
flex: 1,
layout:'vbox',
items:[
{
flex: 1,
xtype: 'label',
html: 'Source Location',
style: 'color:white;font-weight:bold;margin-top:21px;'
},
{
flex: 1,
layout:'hbox',
items:[
{
flex: 7,
layout: 'fit',
items : [{
xtype: 'textfield',
name: 'location',
height: 45,
maxRows: 10,
maxHeight: 10,
autoMaximize: true
}]
},
{
flex:1,
style:'background-color: #FEDE65;',
xtype: 'image',
src: 'http://abc/resources/images/img_dropdown_icon.png'
}
]
}
]
}]
}
]
}]
}]
}]
}]
}
]
}
]
}
]
} });
I'm having an issue while scrolling between items in the vertical carousel:
The blank division has the same height as the toolbar. Is there any way to avoid the blank line? This is my current code:
Ext.define('eltirabuzon.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.carousel.Carousel'
],
config: {
cls: 'cards',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
}
}
});
Ext.create('Ext.Carousel',{
fullscreen: true,
height: '100%',
direction: 'vertical',
directionLock: true,
indicator: false,
defaults: {
directionLock: true,
styleHtmlContent: true,
margin: 0,
padding: 0
},
items: [
{
xtype: 'toolbar',
dock: 'top',
ui: 'dark',
title: 'El Tirabuzon',
items: [{
xtype: 'button',
text: '',
docked: 'left',
ui: 'action',
cls: 'button-options'
}]
},
{
html: 'rtutorial',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://gastonbercun.com/wp-content/uploads/2011/08/steve-jobsNews.jpg)',
'background-size': 'cover'
}
},
{
html: 'noticia',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://blog.ciencianueva.com/wp-content/uploads/2011/10/steve-jobs-renuncia-a-apple.jpeg)',
'background-size': 'cover'
}
},
{
html: 'lista',
style: {
'color': '#FFF',
'background-color': '#BBB',
'background-image': 'url(http://www.biography.com/imported/images/Biography/Images/Galleries/Steve%20Jobs/steve-jobs-photo-NeXT-intro-07-sized.jpg)',
'background-size': 'cover'
}
},
{
html: 'resena',
style: {
'color': '#FFF',
'background-color': '#CCC',
'background-image': 'url(http://3.bp.blogspot.com/-HRJITwGr_Vk/TlYaxYFxoKI/AAAAAAAAAPI/3ofib-Z1VgI/s1600/ipadjobsjpg-1426c786c4434809.jpg)',
'background-size': 'cover'
}
}
]
});
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'
},
]
},
],
},
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'
}
}
}
});