Uncaught TypeError: Cannot read property 'connection' of undefined at file:///android_asset/www/app.js:1

Question

I don't know where the error is and how to remove it. I'm new to sencha touch and phonegap. here is my app.js file

// DO NOT DELETE - this directive is required for Sencha Cmd packages to work. //@require @packageOverrides

// Ext.Loader.setPath({ 'Ext': 'touch/src' }); //

Ext.application({
name: 'appointMeDr',

requires: [
'Ext.MessageBox','Ext.device.Connection','appointMeDr.SessionInfo',
'Ext.data.proxy.LocalStorage','Ext.data.proxy.LocalStorage'
],

views: [
'Main','homePage.Home','viewsTab.FindDrTab','viewsTab.SettingTab',
'profile.user_profile','userAppointment.PatientAppointment',
'doctorViews.MainDr','doctorViews.drAppointment.DrAppointment','doctorViews.doctorProfile.BlockPatient',
'doctorViews.tabViews.DrProfileTab',
'MyPicker','Utils',
'signUp.UserSignUp','signUp.SignUp',
'guardianView.GuardianPatient','guardianView.guardianProfile.GuardianProfile','guardianView.MainGuardian',    
'attendant.MainAttendant','attendant.tabViews.AttendantProfileTab','HealthyTips'

],
models:[
'SearchDr','fixedAppointment','Patient','Login','user','DoctorModel','AppointmentModel','Guardian','DoctorDetail',
'doctorAppointment','Attendant','HealthyTipModel'
],
stores:[
'SearchDocResults','AppointmentResults','Patients','Users','OfflineUser','Doctors','Guardians','DoctorDetailsStore',
'doctorAppointments','AttendantStore','BlockPatients','TimeSlots','HealthyTips'
],
controllers: [
'LoginController','MainController','DoctorController','UserSignUp','AppointmentController','AttendantController',
'GuardianController'

],

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();
Ext.Viewport.add(Ext.create('appointMeDr.view.homePage.Home'));
    // Initialize the main view
   // Ext.Viewport.add(Ext.create('appointMeDr.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();
            }
        }
    );
}

});

Answer 1

We don't know what you want to do, but I try something :

I think you call connection.type property before " deviceready " event.

From phonegap doc :

This is a very important event that every Cordova application should use.

Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.

The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.

So try this :

// Wait for PhoneGap to load
// 
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
    checkConnection();
}

function checkConnection() {
    var networkState = navigator.network.connection.type;
    ...
}

EDIT : now we have more information, I think this answer is useless for you :/

Answer 2

After 2 days of hard work i solved it by myself.Remove all warnings even if "",""(comma generates it) and thats it. Problem solved :) happy coding