I have a Sencha Touch 2 project and everything works great in the web browser. No errors in the console, and everything looks good. Once I package it with Phonegap and run it on a mobile device, however, things don't work as well.
I am using ext.device.notification.show in two places in my application. At first, I was doing requires: 'Ext.device.*' and while it worked in web, the app wouldn't run on mobile and eclipse would give me the error message Uncaught TypeError: Cannot read property 'name' of undefined. I switched over to requires: Ext.device.Notification (exact spelling and capitalization) and now the app runs but when I click a button that should create a message box, I get the error Uncaught TypeError: Cannot call method 'confirm' of undefined. The problem is I have no method called confirm. In one case I have a method called confirmItem, but for the second button that should be invoking a message box I have no method remotely close to "confirm."
I'll post one of the controllers below (this one has the confirmItem method):
Ext.define('MyApp.controller.MainController',
{
extend: 'Ext.app.Controller',
requires: ['Ext.device.Notification'],
config:
{
refs:
{
mainView: 'mainview',
btnConfirm: 'mainview button[action=confirmItem]',
},
control:
{
'btnConfirm':
{
tap: 'confirmItem'
},
mainView:
{
onSignOffCommand: 'onSignOffCommand'
}
}
},
// Transitions
getSlideLeftTransition: function ()
{
return {
type: 'slide',
direction: 'left'
};
},
getSlideRightTransition: function ()
{
return {
type: 'slide',
direction: 'right'
};
},
onSignOffCommand: function ()
{
var me = this;
console.log('Signed out.');
loginView = this.getLoginView();
//MainView.setMasked(false);
Ext.Viewport.animateActiveItem(loginView, this.getSlideRightTransition());
},
confirmItem: function ()
{
Ext.device.Notification.show(
{
title: 'Confirm',
message: 'Would you like to Confirm?',
buttons: ['No', 'Yes'],
callback: function (button)
{
if (button == "Yes")
{
MyApp.app.getController('MainController')
.confirmPickup();
}
else
{
console.log('Nope.');
}
}
});
},
confirmPickup: function ()
{
var me = this;
var loginStore = Ext.getStore('LoginStore');
mainView = this.getMainView();
mainView.setMasked(
{
xtype: 'loadmask',
message: ' '
});
if (null != loginStore.getAt(0))
{
var user_id = loginStore.getAt(0).get('id');
var name = loginStore.getAt(0).get('name');
var winner = loginStore.getAt(0).get('winner');
}
if (winner === 1)
{
console.log('success');
}
else
{
console.log('fail');
}
}
});
I only assume this is a problem because whenever I push the button that should be calling confirmItem I get the error. Am I using Ext.device.Notification correctly, or Have I missed something needed to make it work in Phonegap?
I found the solution! Everything was fine from a Sencha Touch point of view in terms of using requires: Ext.device.Notification but some things were missing on the Phonegap side. Specifically, I needed to install the appropriate plugins.
Open a terminal and type: Phonegap local plugin list to see your currently installed plugins. I had none. I went ahead and installed:
org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.vibration
by using the following reference: http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html and selecting options from the menu on the left.
Related
I wrote a script to detect if there is a wifi connection or not. However, I noticed, that if the app starts when there is no wifi connection, the splashscreen will load and then i'll get a white screen. The console shows this error:
Failed to load resource: net::ERR_INTERNET_DISCONNECTED
this is my script for detecting the wifi and its placed in the '$ionicPlatform.ready':
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState)
{
connectionerror($ionicPopup)
})
//display error msg and close the app.
function connectionerror($ionicPopup,$scope)
{
var myPopup = $ionicPopup.show({
title: 'Network Error',
content: 'No internet connectivity detected. Please try again.',
buttons: [
{
text: '<b>Retry</b>',
type: 'button-positive',
onTap: function(e)
{
if (!$cordovaNetwork.isOnline())
{
e.preventDefault();
}
else
{
$state.reload();
}
}
}]
});
}
How do I fix it so that after the splashscreen, if there is no wifi, the message would show ?
The error happens when you are trying to load a resource from your pc probably. If you are running ionic serve or ionic serve live and you disconnect the wifi, the app will try to load a template form your pc using wifi and won't be able to do it.
To test that script you should build the app and run it on a device.
If that's working, the controller should be working differently. It should look more like this:
.controller('controller', function($scope, $rootScope, $state, $ionicPopup, $cordovaNetwork){
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState)
{
connectionerror()
})
//display error msg and close the app.
function connectionerror()
{
var myPopup = $ionicPopup.show({
title: 'Network Error',
content: 'No internet connectivity detected. Please try again.',
buttons: [
{
text: '<b>Retry</b>',
type: 'button-positive',
onTap: function(e)
{
if (!$cordovaNetwork.isOnline())
{
e.preventDefault();
}
else
{
//go to a state like index or home instead of reload. Reload resets the application and should be avioded in single page apps
$state.go('...');
}
}
}]
});
}
})
I have basic Ionic application which I have disabled the back button on the app, is there a reason why the back button still works on an android device?
I am currently testing with ionic view.
here's my code:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
}, 101);
})
According to ionic documentation
Your back button action will override each of the above actions
whose priority is less than the priority you provide.
And given that you want to completely disable the back button in all situations, and that the highest priority on actions in the referenced list is 500, you should provide a priority value more than 500, 600 for example. The code below should work when placed in $ionicPlatform.ready()
$ionicPlatform.registerBackButtonAction(function(e) {}, 600);
For anyone trying to sort this on Ionic 2:
http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13
and here's the actual post info:
In your app.ts, do the following to get the back button working as expected (mostly!):
initializeApp() {
this.platform.ready().then(() => {
this.registerBackButtonListener();
});
}
registerBackButtonListener() {
document.addEventListener('backbutton', () => {
var nav = this.getNav();
if (nav.canGoBack()) {
nav.pop();
}
else {
this.confirmExitApp(nav);
}
});
}
confirmExitApp(nav) {
let confirm = Alert.create({
title: 'Confirm Exit',
message: 'Really exit app?',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Exit',
handler: () => {
navigator.app.exitApp();
}
}
]
});
nav.present(confirm);
}
getNav() {
return this.app.getComponent('nav');
}
Note:
If you get errors about app not being a property of navigator:
1) Add a typings folder to your app root: e.g. app/typings
2) Add a file called: pluginshackyhacky.d.ts
3) Add for properties you need extended for TypeScript to compile.:
interface /*PhoneGapNavigator extends*/ Navigator {
app: any;
}
4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:
"files": [
"app/app.ts",
"app/typings/pluginshackyhacky.d.ts",
"app/typings/phonegap.d.ts"
]
You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.
Hope this helps anyone having this problem.
Cheers.
Here is solution for Ionic 2:
constructor(
public platform: Platform, //Platform controller
public app: App, //App controller
) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
//Registration of push in Android and Windows Phone
platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav();
if (nav.canGoBack()){ //Can we go back?
nav.pop();
}else{
this.platform.exitApp(); //Exit from app
}
});
});
}
Change the priority from 101 to 100 to override the default hardware back functionality. If you had a priority of 100 already overriding the functionality, you could override that override with a priority of 101, if that makes sense.
$ionicPlatform.registerBackButtonAction(function(e) {
// android hardware back button was hit
}, 100);
Here is a list of all the priorities for the existing back button hooks
http://ionicframework.com/docs/api/service/$ionicPlatform/
This is working fine in my browser but when I install the app on my phone and use it ... it looks fine UNTIL I force it to stop and reopen the app and then all my records are gone.
Im using 2.2 and Phonegap.... any help would be VERY appreciated. Here is my store:
Ext.define('MyApp.store.Presentations', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.Presentations',
sorter: 'title',
grouper: function (record) {
var upperCased = record.get('title')[0].toUpperCase();
return upperCased; //First letter of the title - how we GROUP these
},
autoLoad: true,
proxy: {
type: 'localstorage',
id: 'presentations'
}
}
});
I save like this:
var newPresentation = { title: prezTitle, content: '' };
Ext.getStore('Presentations').add(newPresentation);
var newRecord = Ext.getStore('Presentations').sync();
You can try by adding the following code to the DroidGap class :
super.appView.getSettings().setAllowFileAccess(true);
super.appView.getSettings().setDatabaseEnabled(true);
super.appView.getSettings().setDatabasePath("/data/data/" + appView.getContext().getPackageName() + "/databases/");
super.appView.getSettings().setDomStorageEnabled(true);
This lines have solved the same problem that i got
I am building an application for iOS and Android using Appaccelerator. It works perfectly fine on Android, but throws 'undefined' error every time I try to open it on iOS devices. The weird thing is, it doesnt show a proper error message.
First I thought it is a build issue, so I cleaned the project, and then rebuilt it, but it was not the case. I also manually deleted the build folder, and rebuild, but still no improvement.
Here is the code :
Rf.media.photo = {
key: 'photo',
title: 'Photo',
extension: 'jpg',
type: 'image/jpeg',
create: function(created) {
Ti.media.showCamera({
animated: false,
saveToPhotoGallery: false,
showControls: true,
success: function() {
var name = Rf.util.timestamp() + '.' + Rf.media.photo.extension;
Rf.write_to_new_file(name, media_item.media, function(file) {
created(file);
});
},
error:function(error)
{
// create alert
var a = Titanium.UI.createAlertDialog({title:'Camera'});
// set message
if (error.code == Titanium.Media.NO_CAMERA)
{
a.setMessage('Please run this test on device');
}
else
{
a.setMessage('Unexpected error: ' + error.code);
}
// show alert
a.show();
},
cancel:function()
{
},
});
}
};
I get this error message when people clikc on the "Photo" button.
[WARN] Exception in event callback. {
line = 1;
message = "'undefined' is not an object (evaluating 'Ti.Media.showCamera')";
name = TypeError;
sourceId = 52935904;
sourceURL = "file://localhost/var/mobile/Applications/F8398B04-78C4-4A45-BEE0-30EE4BFEBB00/App.app/photo.js";
Is there a way to "initialize" the Ti.Media.showCamera(); method, so it would not find itself 'undefined'?
Ti.media.showCamera({... should be Ti.Media.showCamera({...
Also, in the success callback, there are no arguments to receive the returned media data. You have media_item.media in your write_to_new_file() function, so your success callback should probably read: success: function(media_item) {...
Hello friends I am creating an app in sencha touch 2.0 in which i have added a search button to the toolbar.Now i want open a search field with transparent background like the below image.
While i run my project the logcat indicates me that error is in controller file.Below i am adding my controller class.
Ext.define('MyApp.controller.search',{
extend: 'Ext.app.Controller',
config: {
refs: {
groupList: "groupList"
},
control: {
groupList: {
searchField: "searchField"
}
}
},
searchField: function(){
// console.log("SearchField Tapped");
if ( ! this.searchView)
{
this.searchView = this.render({
xtype: 'searchView',
});
var cancelSearchBtn = this.searchView.query('#'+cancelSearchBtn)[0];
cancelSearchBtn.setHandler(function(){
this.searchView.hide();
}, this);
}
this.searchView.show({
type: 'slide',
direction: 'up',
duration: 500,
});
},
launch: function(){
alert('Hello search');
},
});
I am getting the following error in logcat:-
TypeError: Result of expression 'this.render' [undefined] is not a function. at
file:///android_asset/www/app/controller/SearchController.js:18
Help me to get rid of the problem.
Thanx in advance.
There is no render method inside the controller. You need to create an instance of that component and then add it to the container you want it visible in (normally called Main).