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
Related
I have created one sencha touch application in my localserver.
In that application, there are one textfield, and three buttons.
The following is my app.js file
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
controllers: [
'CalcController'
],
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'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp.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();
}
}
);
}
});
The following is my Main.js file
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
//action:
handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
The following is my CalcController.js file
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
}
},
displayNum: function()
{
console.log("This click event works");
}
});
Now my question is as following:
When i press button named btnSeven it display digit 7 in textfield means handler function works.
Now i want click event code in CalcController.js file instead of writing handler function in Main.js file for that i created second button named btnEight and give action:'displayNum' so when that button clicked event goes to the CalcController.js file.
When i pressed button named btnEight then i want to display digit 8 in textfield with the help of writing code in CalcController.js file instead of writing hander function in Main.js file. So how to do this?
Instead of defining Id for component , define Item Id
In Controller you have to define references in config.
config: {
refs: {
'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here
},
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
}
}
},
and in displayNum function write code like this.
displayNum: function(btn)
{
var display = this.getIdDisplay();
display.setValue(btn.getText());
}
I solved above my question as the following method:
Now my Main.js file is as following:
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
action: 'clearDisplay',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
action: 'displayNum',
/*handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}*/
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
and CalcController.js file is as following:
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
'button[action=clearDisplay]' : {
tap: 'clearDisplay'
},
}
},
displayNum: function(button, e, eOpts)
{
var x = Ext.getCmp('idDisplay')._value + button._text;
Ext.getCmp('idDisplay').setValue(x);
},
clearDisplay: function(button, e, eOpts)
{
Ext.getCmp('idDisplay').setValue('');
}
});
Using this method i pass my button's properties in the controller file using the button's tap event.
I want to display splash screen in sencha. Here, I am dispalying splash in splash screen.html page few second(5 second) then direct to login page.So, How to solve this problem in sencha.
What i did:
Ext.Loader.setPath({
'Ext': 'touch/src'
});
Ext.application({
name: 'EditTest',
requires: [
'Ext.MessageBox', 'Ext.form.FieldSet','Ext.override'
],
views: [
'Profile'
],
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'
},
models: ["User"],
controllers: ["ProfileCon"],
views: ["Profile"],
//splash screen for
Ext.override(Ext.LoadMask, {
getTemplate: function() {
var prefix = Ext.baseCSSPrefix;
return [
{
reference: 'innerElement',
cls: prefix + 'mask-inner',
children: [
//the elements required for the CSS loading {#link #indicator}
{
html: '<a href="splash.html">'
},
{
reference: 'indicatorElement',
cls: prefix + 'loading-spinner-outer',
children: [
{
cls: prefix + 'loading-spinner',
children: [
{ tag: 'span', cls: prefix + 'loading-top' },
{ tag: 'span', cls: prefix + 'loading-right' },
{ tag: 'span', cls: prefix + 'loading-bottom' },
{ tag: 'span', cls: prefix + 'loading-left' }
]
}
]
},
//the element used to display the {#link #message}
{
reference: 'messageElement'
}
]
}
];
}
});
//splash creen
launch: function() {
// Destroy the #appLoadingIndicator element
// Initialize the main view
Ext.Viewport.add(Ext.create('EditTest.view.Profile'));*/
var loginview= {
xtype: 'loadmask',
message: 'My Message'
};
new Ext.util.DelayedTask(function () {
Ext.Viewport.setMasked(false);
Ext.Viewport.add({
//xclass: 'MyApp.view.Main'
Ext.Viewport.add([loginview]);
});
}).delay(5000);
},
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();
}
}
);
}
});
But, I am unable to create splash screen page.
It seems like you are vastly overcomplicating things here. This launch function should be all you need:
launch : function() {
Ext.create('Ext.Panel', {
fullscreen : true,
html : 'This is my main app'
});
var splash = Ext.create('Ext.Panel', {
fullscreen: true,
html: 'This is my Splash'
});
splash.show();
Ext.defer(function() { splash.destroy(); }, 5000);
}
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 :)
I started to use the Sencha Touch 2 MVC, but I can't overcome the problem below.
I have an Ext.application code:
Ext.application({
name: 'ProjectName',
appFolder: APP_URL + "app",
enableQuickTips: true,
extend: 'Ext.app.Controller',
phoneStartupScreen: 'LOGO.png',
controllers: ['Site'],
views: ['Viewport_login', 'Viewport_reg'],
layout: 'vbox',
launch: function() {
//bootstrap
Ext.create("Ext.Container", {
requires: [
],
items: [
Ext.create("ProjectName.view.Viewport_login", {}),
Ext.create("ProjectName.view.Viewport_reg", {})
]
});
return true;
}
});
view 'Viewport_login' code:
Ext.define('ProjectName.view.Viewport_login', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Login',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_login");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.login")
]
});
this.callParent();
}
});
View 'Viewpoer_reg' code:
Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Reg',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_reg");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.reg")
]
});
this.callParent();
}
});
view 'Header' code:
Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',
requires: [
'Ext.Img'
],
initialize: function() {
console.log("header inited");
},
config: {
cls: 'bg-holder',
items: [
Ext.create("Ext.Img", {
src: BASE_URL + 'assets/images/header3.png',
height: 35,
width: "100%",
style: "background-position: center 0px; "
})
]
}
});
And finally the 'Site' controller's code:
Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',
config: {
views: ['Viewport_login', 'Viewport_reg']
},
init: function() {
console.log('Init site controller');
// Start listening for events on views
this.control({
// example of listening to *all* button taps
'#login_button': {
tap: function () {
// HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
}
}
});
},
renderRegFOrm: function() {
},
onLaunch: function() {
console.log('onLaunch site controller');
},
});
First, I have a problem right now: The 'Header' does'nt appear if I load both views ('Viewport_login', 'Viewport_reg') in Container which created in Ext.application launch function. Can anyone help me, why?
Second, in the Controller code you can see the this.control(... section. How can I switch to other view in here?
From looking at your code, it appears that you only want one of login and register to appear at one time. I would recommend looking at the setActiveItem method for containers and switching views in this way.
I didn't understand your first question. Also, didn't understand why you have widget.login and widget.reg classes when you already have views called login and reg (can't you just use those?)
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'});