Hi how i create a carousel with a toolbar, Would like to have the option to tap to switch views and also swipe to to switch views, here is my code , When I run this the xtypes inside the toolbar are not showing up in a toolbar ?
Thanks
Ext.define("NF.view.tablet.MainH", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBar: {
hidden: true},
items: [
{
xtype : 'toolbar',
docked: 'top',
title: '',
layout:'hbox',
items:[
{xtype: 'home'} ,
{xtype:'tablet-placesContainer'},
{xtype:'tablet-About'},
{text: 'contact'},
{ xtype: 'contactpage'},
{xtype: 'home3'} ,
],
},
{
xtype:'carousel',
layout:'fit',
iconCls: 'home',
items:[
{xtype: 'home'} ,
{xtype:'tablet-placesContainer'},
{xtype:'tablet-About'},
{xtype: 'gallery'},
{ xtype: 'contactpage'},
{xtype: 'home3'} ,
]
}]
}
});
When I run this the toolbar info is not showing up.
I may be misunderstanding your question, but maybe your best bet is to
1) Make each toolbar item a simple button with html for the name of the carousel item
2) Give the carousel a name
3) just have a tap event for each toolbar item that sets the correct active item:
Ext.define("NF.view.tablet.MainH", {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
config: {
tabBar: {
hidden: true},
items: [
{
xtype : 'toolbar',
docked: 'top',
title: '',
layout:'hbox',
items:[
{xtype:'button',text: 'home', handler:function(){Ext.getCmp('carousel_name').setActiveItem(0)}} ,
{xtype:'button',text: 'places', handler:function(){Ext.getCmp('carousel_name').setActiveItem(1)}} ,
],
},
{
xtype:'carousel',
id:'carousel_name',
layout:'fit',
iconCls: 'home',
items:[
{xtype: 'home'} ,
{xtype:'tablet-placesContainer'},
{xtype:'tablet-About'},
{xtype: 'gallery'},
{ xtype: 'contactpage'},
{xtype: 'home3'} ,
]
}]
}
Related
i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it
here is my code
Ext.define('test.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Label'
],
config: {
items: [
{
docked: 'top',
title: 'Test',
ui: 'dark',
xtype: 'titlebar'
},
{
xtype:'panel',
style:'padding:10%',
items:[ {
xtype: 'label',
html: 'User Name/Mobile Number',
},
{
xtype: 'textfield',
},{
xtype: 'label',
html: 'Password'
},{
xtype: 'textfield',
},{
xtype:'button',
text:'Login'
}]
}
]
}
});
Use the margin property to get the space between fields:
{
xtype:'panel',
defaults: {
margin: '20 0'
},
items: [
{
xtype: 'label',
html: 'User Name/Mobile Number'
},
....
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.
I'm using Sencha Touch, at the moment I'm adding to the view some HTML code and underneath a button. I would like have the content of the HTML code together with the button to be in the centre of the screen.
Could you suggest me how to do it? thanks for your time
Ext.define('Project.view.SettingsSuccess', {
extend: 'Ext.Panel',
xtype: 'settingformsuccess',
config: {
title: 'Settings',
iconCls: 'info',
cls: 'settings-success',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Settings',
items: [
{
xtype: 'spacer'
},
{
text: 'Back',
ui: 'back'
}
]
},
{
html: [
'<p>You have successfully authorised.</p>'
].join("")
},
// Go to Dashboard Button
{
xtype:'button',
text: 'Visit your Home Page',
ui: 'normal'
}
]
}
});
Try that:
Pack the Html Content and the Button in a Container:
http://docs.sencha.com/ext-js/4-0/#/api/Ext.container.Container
Place the Container where you want, see the setPosition(..) Method:
http://docs.sencha.com/ext-js/4-0/source/Component3.html#Ext-Component-method-setPosition
i'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...
I have this simple tabBar inside a TabPanel:
MyApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
type: 'hbox',
align: 'stretch'
},
},
items: [
{ xtype: 'homecard', id: 'home'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'settingscard', id: 'settings'},
],
});
I'd like to be able to make 'elements' float left, center and right, adding bunch of spacer's isn't a 'really' good choice.
Any idea on how to achieve this ?
By default the spacer component will take up a flex of 1 unless a width is set. Which I think means to put a button on each side of the tabBar you should only need 1 spacer as long as you don't specify a width. However the tabBar must have a different default layout to the toolbar which works:
MyApp.views.Viewport = Ext.extend(Ext.Panel({
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
defaults: {
handler: function (btn, e) {
MyApp.views.Viewport.setActiveItem(Ext.getCmp(btn.value));
}
},
items: [{
text: 'homecard',
value: 'home'
}, {
xtype: 'spacer'
}, {
text: 'settingscard',
value: 'settings'
}],
layout: {
type: 'hbox',
align: 'center'
}
}],
items: [{
title: 'homecard',
id: 'home',
html: 'home'
}, {
title: 'settingscard',
id: 'settings',
html: 'settings'
}]
});
you might be able to overload the tabBar to display the same as a toolbar but i wouldn't hold my breath.
NB: stretch : Components are stretched vertically to fill the container.