1. #1
    Touch Premium Member
    Join Date
    Jan 2011
    Posts
    55
    Answers
    3
    Vote Rating
    1
    maddhippy is on a distinguished road

      0  

    Default Answered: Correct phonegap MVC method

    Answered: Correct phonegap MVC method


    Hi, guys. I've been banging my head on getting ST2 and phonegap to play nicely. First of all, what is supposed to be the correct way to implement and dynamic loading with phonegap? Are you supposed to package all of your js files with jsb3 and include that on the page? Or can Loader load them by file structure like it can on the desktop.

    I've got an mvc app loading dynamically with chrome, but when I go over to an android emulator I get
    Error in success callback: Network Status 1: Result of Expression 'Ext.requires[undefined]' is not a function.
    This sounds like the mvc files aren't downloaded.

    Here's an example of how I am loading:
    Code:
    function launch(){
    console.log('launch');
    Ext.Loader.setConfig({ 
    enabled: true,
    paths: {
    'DMS': 'app'
    }
    });	Ext.requires('DMS.main.controller.Main');
    Ext.application({
        name: 'DMS',
        viewport:{
        	autoMaximize: false
        },
        controllers: ['DMS.main.controller.Main'],
        launch:function(){
        	console.log('app launch');
        }
    });
    }
    launch is called on the deviceready event. The controller has alerts at init and launch that don't appear, and all I get a is a blank viewport, any ideas?

  2. fyi--
    It ended up being something entirely different....
    I was using mvc maybe differently than it was intended. I wanted to compartmentalize parts of my app, so I used naming like dms.main,dms.otherPart, dms.someOtherPart and created the file structure the same way. I then declared the mvc parts in my app with full paths like
    app.js
    controllers:['dms.otherPart.controller.Main'] (file in dms/otherPart/controller/Main.js)

    Main.js
    views: ['dms.otherPart.view.Menu']. (file in dms/otherPart/view/Menu.js)

    This seemed to work fine on the desktop, but not on the phones. After trying just about everything, I used the sdk tool to package it up and noticed that it erred out in Chrome looking for files in the wrong directory.
    it was looking in dms/otherPart/view/dms/OtherPart/view/Menu.js. So Loader must have prefixed the declared view name with the controllers name.
    Once I declared the view relative to the current controller, or as just ['Menu'], it worked fine . I'm guessing that there was a file not found error but I wasn't able to see it on the Android emulator, and that was bombing the load.

    So, moral of the story, it seems that if you declare a view, Loader is always going to add the prefix of the controller to that view, even if you are using full path names.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There is no Ext.requires, it's Ext.require. You don't need it, the controllers array on the Ext.application should load the controller file for you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Touch Premium Member
    Join Date
    Jan 2011
    Posts
    55
    Answers
    3
    Vote Rating
    1
    maddhippy is on a distinguished road

      0  

    Default


    Thanks for the response!

    I did realize that after a few minutes. That did remove that error, but still leaves me with a blank viewport in both ios and android.

    So am I doing this MVC/loader/phonegap thing correctly?

    I load phonegap.1.3.js, then sencha-touch-debug.js and app.js.
    I have the extjs folder inside the www directory in my phonegap app.
    I have an event listener on deviceready which calls launch which creates the app.
    ST2 loads my app, sees the controller declared, then goes to that directory and loads it. It does the same for views and models declared in the controller.

    No errors in weinre but it shows only the viewport rendered with nothing in it and none of my console logs in the controller's launch or init show up. Is there something else special you are supposed to do to use phonegap?

    Thanks again for your help, M, I'll buy you beer if you're ever in town.

    cheers,
    J

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm assuming because Ext.application's launch method gets fired when the document body gets fired which is usually before the deviceready event is fired from PhoneGap. So if you launch function is fired on deviceready and then you execute Ext.application, the Ext.application's launch method won't fire because the document body has already reported it's ready.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User blakdronzer's Avatar
    Join Date
    Jan 2011
    Location
    Mumbai, India
    Posts
    27
    Answers
    3
    Vote Rating
    0
    blakdronzer is on a distinguished road

      0  

    Default


    Well what i may suggest in this case is that u connect the android phone with the pc .. and connect it with adp and do a adp logcat to see all the logs that may be down there in the console.. or a better option will be to have the eclipse set with adp env.., connect the phone and there u can check the DDMS. In case there is any error or anything in console, it will pop it up.

    As for your other concern that u can view the app in the google chrome and not in the android phone is possibly something to do with the CSS too.. i have had faced the same problem that @times i too used to get blank viewport. Thats where i experimented out with removing / changing bits and pieces of CSS and found that the CSS was the issue .. it was fixed by one of my colleague and it seems to run / work smoothly than after.

    Hope the suggestion provided helps u.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The approach can be very similar to the one discussed here:

    http://www.sencha.com/learn/a-sencha...with-phonegap/
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Touch Premium Member
    Join Date
    Jan 2011
    Posts
    55
    Answers
    3
    Vote Rating
    1
    maddhippy is on a distinguished road

      0  

    Default


    Yeah, I've followed that tut. It's using Ext.extend (ST1) instead of Ext.define(ST2) and doesn't address Loader at all, presumably because it's ST1.

    I think I've narrowed in on what's going on. I was adding a toolbar by Ext.Viewport.add({xtype: 'toolbar'}). If I didn't have Ext.require('*'), then it wouldn't add it, and would bomb out.

    I'm guessing I need to add a view inside of Ext.Viewport, then add my previous views inside of that. I'm still a little curious as to why this would act this way inside of iOS but not in chrome.
    -J

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Like I said... the approach is the same. In the launch method of Ext.application you check to see if the deviceready event has fired. If not... don't do anything. If it has, continue on.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #9
    Touch Premium Member
    Join Date
    Jan 2011
    Posts
    55
    Answers
    3
    Vote Rating
    1
    maddhippy is on a distinguished road

      0  

    Default


    fyi--
    It ended up being something entirely different....
    I was using mvc maybe differently than it was intended. I wanted to compartmentalize parts of my app, so I used naming like dms.main,dms.otherPart, dms.someOtherPart and created the file structure the same way. I then declared the mvc parts in my app with full paths like
    app.js
    controllers:['dms.otherPart.controller.Main'] (file in dms/otherPart/controller/Main.js)

    Main.js
    views: ['dms.otherPart.view.Menu']. (file in dms/otherPart/view/Menu.js)

    This seemed to work fine on the desktop, but not on the phones. After trying just about everything, I used the sdk tool to package it up and noticed that it erred out in Chrome looking for files in the wrong directory.
    it was looking in dms/otherPart/view/dms/OtherPart/view/Menu.js. So Loader must have prefixed the declared view name with the controllers name.
    Once I declared the view relative to the current controller, or as just ['Menu'], it worked fine . I'm guessing that there was a file not found error but I wasn't able to see it on the Android emulator, and that was bombing the load.

    So, moral of the story, it seems that if you declare a view, Loader is always going to add the prefix of the controller to that view, even if you are using full path names.