I have created an app which launches a viewport on launch. This covers the entire screen. So i provided a width and height for it. The next requirement being the app being center aligned in the screen.
The code I have used is:
//<debug>
Ext.Loader.setConfig({disableCaching:false});
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'SEPA',
controllers: ["MainController"],
requires: [
'Ext.MessageBox'
],
controllers:['MainController'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
fullscreen: false,
//centered:true,
// margin: 100,
launch: function() {
Ext.Viewport.setWidth(320);
Ext.Viewport.setHeight(480);
//Ext.Viewport.setCentered(false);
// Ext.Viewport.setRight(2);
// Destroy the #appLoadingIndicator element
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
As you can see, the app is placed in the left most corner of the browser. How can i get it in the center of the screen?
Any help is appreciated.
Thanks in advance.
Add this to your css or scss file:
body {
position:absolute;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-240px;
}
Hope it helps :)
Related
I'm not sure splash screen and startup screen is same.
I build app for android use Phonegap.
I put code java when I build app android use phonegap:
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
// Set by <content src="index.html" /> in config.xml
super.loadUrl(Config.getStartUrl(),5000);
//super.loadUrl("file:///android_asset/www/index.html")
}
And Startup Screen I put code in app.js:
Ext.Loader.setPath({
'Ext': 'touch/src'
});
Ext.application({
name: 'Project-catalog',
requires: [
'Ext.MessageBox'
],
controllers: [
'Main' , 'searchCon'
],
models: [
'appsModel' , 'catModel'
],
stores: [
'appsStore' , 'catStore'
],
views: [
'Main' , 'Home' , 'Navigation' , 'showSearchCategory' , 'SearchQ'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
phoneStartupScreen:'resources/startup/640x920.png',
tabletStartupScreen: 'resources/startup/748x1024.png',
launch: function() {
// Destroy the #appLoadingIndicator element
// Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Project-catalog.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
When I build app in emulator splash screen have show.When splash screen destroy.App is have background color bluesky so show apps
I put code wrong or not ?
The splash screen is native stuff. Phonegap provides a bridge api to handle it via JS:
navigator.splashscreen.show();
navigator.splashscreen.hide();
You should probably call navigator.splashscreen.hide() in your Ext.application :: launch()
Take a look at:
http://docs.phonegap.com/en/2.9.0/cordova_splashscreen_splashscreen.md.html
hope it helps
I am creating a viewport in my app.js file. I need to create a panel inside this viewport. Any ideas on how that can be done?
//<debug>
Ext.Loader.setConfig({disableCaching:false});
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'SEPA',
controllers: ["MainController"],
requires: [
'Ext.MessageBox'
],
controllers:['MainController'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
fullscreen: false,
//centered:true,
// margin: 100,
launch: function() {
Ext.Viewport.setWidth(320);
Ext.Viewport.setHeight(480);
//Ext.Viewport.setCentered(false);
// Ext.Viewport.setRight(2);
// Destroy the #appLoadingIndicator element
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
Add this in the launch function
var panel = Ext.create('Ext.Panel', {
// fullscreen: true,
html: 'Hello from your first Sencha Touch App made by Sencha Fiddle.'
});
Ext.Viewport.add(panel);
Working example
I'm trying to import an external html file into Touch 2 and encountering errors. My view code is as follows:
Ext.define("GS.view.Demo", {
extend: 'Ext.container.Container',
xtype: 'container',
requires: [
'Ext.Component',
'Ext.ItemCollection',
'Ext.Mask',
'Ext.behavior.Scrollable',
'Ext.layout.Layout',
],
config: {
title: 'Demo',
iconCls: 'star',
items: [{
flex: 1,
margins: '0 2 0 0',
title: 'Load raw html',
styleHtmlContent: true,
bodyPadding: 5,
loader: {
autoLoad: true,
url: 'SHdemo.html'
}
}]
}
});
and apps.js:
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
controllers: ["Main"],
name: 'GS',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'Home', 'Contact', 'Blog', 'Demo'],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon#2x.png',
144: 'resources/icons/Icon~ipad#2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('GS.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
this code throws "The following classes are not declared even if their files have been loaded: 'Ext.container.Container'" and if I replace 'Ext.container.Container' with 'Ext.Container' in my view, I get "Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.demo". What's the proper procedure for importing external html files?
There is no need for xtype:'container'.
You should add an alias to your container like
extend: 'Ext.Container',
alias:'widget.demo'
And adding it to the viewport could look like this
Ext.Viewport.add({xtype:'demo'});
Why I am not getting a slide-effect when page is changing? here is my code
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout: 'card',
fullscreen: true,
items: [
{
html: "Splash Screen<img src='images/logo.png' />"
},
{
html: "Login Screen<img src='images/logo.png' />"
},
{
html: "About Screen"
},
{
html: "User Screen"
}
]
});
panel.setActiveItem(0);
setTimeout(function(){
panel.setActiveItem(1);
},3000);
After 3 seconds I am getting login screen but without any slide animation. I checked both in chrome and ipad-simulator.
setActiveItem() doesn't show animations in ST2. You need to replace it with
panel.animateActiveItem(1, {type:'slide', direction:'left'});
Try something like this inside your setTimeout:
panel.setActiveItem(1, {type:'slide', direction:'left'});
I believe you can also change your [layout: 'card'] line to something like this to achieve the same effect:
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
}
If you are using Sencha Touch 2.0.0 and new version than use this,
yourpanel.animateActiveItem(0, { type: 'slide', direction: 'right' })
Please go through this link for more information.
http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Container
I have two views. The User view has some text and a button. I want to use that button to switch to the second view. But i don't know how this works with sencha touch 2. When i press the button on the "UserView" (which is the first view), then i get the following error:
Uncaught Error: SYNTAX_ERR: DOM Exception 12
This is basically how my code looks right now:
app.js
Ext.Loader.setConfig({ enabled: true });
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'AM',
controllers: [
'Main'
]
});
}
});
The Main controller
Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
views : ['User'],
init: function() {
this.getUserView().create();
this.control ({
'#new': {
tap: function() {
alert('aaaa');
}
}
});
}
});
And the two views:
Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
fullscreen:true,
items: [{
xtype: 'button',
text: 'New',
id: 'new'
}
],
html: 'Testing<br />'
}
});
2nd view
Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
fullscreen: true,
html: 'w00t'
}
});
Here is your application written the way it should be. Here are a few notes about the changes I made:
You should call Ext.application instead of Ext.setup when creating your MVC application.
All root views should be defined inside your app.js.
You no longer need to use this.control() in your controllers. You can simply use the control configuration in the config block.
You should define all views in the views config of Ext.application.
Instead of creating the view in init, do it in launch. This is components should be added into the view.
app/view/User.js
Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'button',
text: 'New',
id: 'new'
}
],
html: 'Testing<br />'
}
});
app/view/New.js
Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
html: 'w00t'
}
});
app/controller/Main.js
Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'#new': {
// On the tap event, call onNewTap
tap: 'onNewTap'
}
}
},
launch: function() {
// When our controller is launched, create an instance of our User view and add it to the viewport
// which has a card layout
Ext.Viewport.add(Ext.create('AM.view.User'));
},
onNewTap: function() {
// When the user taps on the button, create a new reference of our New view, and set it as the active
// item of Ext.Viewport
Ext.Viewport.setActiveItem(Ext.create('AM.view.New'));
}
});
app.js
Ext.application({
name: 'AM',
// Include the only controller
controllers: ['Main'],
// Include all views
views: ['User', 'New'],
// Give the Ext.Viewport global instance a custom layout and animation
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
}
});
I also suggest you checkout the great guides over on the Sencha Touch API Docs, as well as checking out the Sencha Forums as they are very active and are a great source of information.