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
Related
I have a problem to integrate map in this view:
Ext.define('Sample.view.MainMenu', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar','Ext.Video'],
alias: 'widget.mainmenuview',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to sencha' ,items: [
{
xtype: 'button',
text: 'Log Off',
itemId: 'logOffButton',
align: 'right'
}
]
},
html: [
"Hello to dawini plateforme"
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
], listeners: [{
delegate: '#logOffButton',
event: 'tap',
fn: 'onLogOffButtonTap'
}]
},onLogOffButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
Can someone help me how to integrate map in this view and think you very much.
I am a developer with SIMpalm (www.simpalm.com), and I think you should try map type in your Sencha component within the Items. Others attribute also can be configured like height, current location etc. And also you need to configure google map api in your Index.html page like, .
Example : items: [
{
xtype: 'map',
height: 200,
useCurrentLocation: true
}
]
Here you can find how to include map in Sencha Touch. Though it is focused on infobubble but it is also showing the map integration. Let me know if you have any difficulty implementing this.
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'} ,
]
}]
}
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
I want to dynamically add a (right aligned) button to the active navigation view depending on view Im showing. Is there any proper way to do it? I found many half good examples online, but didnt get them to work. Here is what I tried:
Ext.define('Sencha.view.user.Login', {
extend:'Ext.navigation.View',
//fullscreen: true,
xtype: 'loginview',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],
config: {
title: 'Log in',
iconCls: 'use',
cls: 'kidsbackground',
scrollable: false,
navigationBar: {
items: [
]
},
items:[
{
xtype: 'loginform'
}
]
},
addRightButton:function(button){
var navigationBar = this.config.navigationBar;
console.log("navigationBar: "+navigationBar);
var rightButton = Ext.Button.create({
xtype: 'button',
ui: 'action',
iconCls: 'action',
iconMask: true,
align: 'right' });
console.log("rightButton: "+rightButton);
//navigationBar.addItem(rightButton);
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
}),
Ext.create("Ext.Button", {
text: "Button2",
align: "right"
})
]
};
this.setNavigationBar(oNavigationbar);
/*this.setNavigationBar({
items: [
{
id: 'rightButton',
xtype: 'button',
text: 'yes!'
//placeHolder: 'Search...',
//align: 'right'
}
]
});*/
console.log("wow, no crash, really ?");
}
});
When I run the above code I get strange errors, one of this is this (see attachment):
You can try this code (in Chrome Developer Tools' console) on the Sencha Touch 2 Navigation View example :
Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add({
xtype:'button',
text:'Right',
align:'right'
});
It basically get the navigationview, then the navigation bar of this view and finally add the button to it.
This is the proper way to add a button to the navigation bar.
Hope this helps
different way
var navigationView = Ext.create('Ext.NavigationView',
{
useTitleForBackButtonText: false,
scrollable: false,
layout:
{
type: 'card',
animation: null
},
navigationBar:
{
items:
[
{
xtype: 'togglefield',
name: 'smsmode',
align: 'right',
value: 0,
disabled: true
},
{
text: '',
iconCls: 'delete',
align: 'right',
ui: 'back',
listeners:
{
tap: function()
{
navigator.app.exitApp();
}
}
}
]
}
});
I want to create a custom toolbar using sencha touch. Using Ext.Toolbar, i am able to create a decent screen titlebar. But my requirement is to place my company brand image logo in the center of the title bar not the simple text as provided by the code below.
{
xtype : 'toolbar',
docked: 'top',
title: 'My Toolbar'
}
can anyone help me how to do this ?
Try this
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'image',
width:218,
height:44,
src:'http://cdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png'
}
]
}
You can add the image in your toolbar by using the title attribute. Here is some modified code from one of my apps doing just this. Also, by defining a custom class you can assign a custom xtype and reuse the main toolbar... Either way the code should have what you are looking for:
Ext.define('myApp.view.Maintoolbar', {
extend: 'Ext.Toolbar',
xtype: 'maintoolbar',
requires: [
//any necessary requirements
],
config: {
docked: 'top',
title: '<div style="text-align:center;"><img src="images/logoSmall.png" width="185" height="36" alt="Company Name"></div>',
padding: '5 5 5 5',
items: [{
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
//left: true,
text: 'Menu',
action: 'openmenu'
},{
xtype: 'spacer'
},{
xtype: 'button',
iconCls: 'arrow_down',
iconMask: true,
ui: 'normal',
align: 'right',
text: 'Logout',
action: 'logout'
}]
},
initialize: function() {
this.callParent();
}
});