1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      2  

    Default MVC Sample App

    MVC Sample App


    As there are a lot of questions in this forum about basic MVC stuff, I built a little sample app (using the WebStorm IDE) that should help to understand of few of the concepts:

    https://dl.dropboxusercontent.com/u/...2013-11-04.zip

    This is a full runable project made with ST2.3.0. and CMD4. Just expand it into your local web directory and launch it with 'localhost/testmvc'. It should be quite self explaining when you look at the code. Almost every view has a controller with the same name that does the logic.

    The app handles the following:
    - the main part of the app is a TabBar with 3 tabs
    - the Guests tab is a NavigationView with a list of guests
    - the list can be filtered
    - a tap on a item shows the detail (form)
    - it shows how you can handle buttons in a view or form
    - it shows how you can handle buttons on a navigation bar
    - the Settings tab is just a list with the countries
    - its controller shows how to load it with a programmatically built array of data
    - the country list is used for the selectfield in the guest detail form

    Open the devtools (F12) console to see some logging when you interact with it.

    Disclaimer: this is just one way of doings things. There may be other and even better ways (and there might be some bugs as well). But this is as most of my apps currently work.

    Comments and additional requirements/wishes welcome!

    04-11-2013 09-57-19.png04-11-2013 09-57-10.png04-11-2013 09-57-36.png

  2. #2
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    2
    TButton is on a distinguished road

      0  

    Default


    I really like the way you used "action" in config. Thanks for sharing.

  3. #3
    Sencha User
    Join Date
    Sep 2013
    Posts
    10
    Vote Rating
    1
    _stant_ is on a distinguished road

      0  

    Default


    Hi, thanks for sharing

    There is something I don't understand in your sample app; as you are not using routes, how do you switch from one controller to another ?

    Like in GuestList.js in the onGuestListItemTap, you push the detail view in the navigationview, but when is the GuestDetail controller loaded (and refs assigned etc...) ?

    thx

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    3
    Vote Rating
    0
    pravnviji is on a distinguished road

      0  

    Default


    Thanks for sharing. Really its help me to understand the flow of MVC.

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by _stant_ View Post
    There is something I don't understand in your sample app; as you are not using routes, how do you switch from one controller to another ? Like in GuestList.js in the onGuestListItemTap, you push the detail view in the navigationview, but when is the GuestDetail controller loaded (and refs assigned etc...) ?
    All controllers are loaded when the app is launched. Have a look at the controller section in app.js. Does that answer your question?

  6. #6
    Sencha User
    Join Date
    Sep 2013
    Posts
    10
    Vote Rating
    1
    _stant_ is on a distinguished road

      0  

    Default


    Yep, actually I figured this out in the meantime, I understand that it is a pertinent design in a desktop browser window, but damn, that seems like a very inefficient design for mobile app development.

    Anyway, I guess that's just a matter of taste, but it seems quite shocking for a native app developer.

    Thx again, your post was clearly helpful to me.

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    I have updated the sample with the latest version of the tools: Sencha Touch 2.3.0 and CMD4. See the first post in this thread for more details.

  8. #8
    Sencha User
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    stevwinata is on a distinguished road

      0  

    Default


    thanks for share this pattern, and please help me, how to pass value of a textfield to the controller ?

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by stevwinata View Post
    thanks for share this pattern, and please help me, how to pass value of a textfield to the controller ?
    sure - can you give a short description of the workflow you would like to realize?

  10. #10
    Sencha User
    Join Date
    Dec 2010
    Posts
    12
    Vote Rating
    0
    stevwinata is on a distinguished road

      0  

    Default


    Code:
    onGuestListSearch: function(element, e) {
            // do the search here - f.e. an AJAX call to your server, etc.
            var searchPattern =  this.getGuestListSearchField().getValue();
    }
    above code show me how to get value from a component.
    that's right?
    i tried on a textfield (any textfield in view) and give me error "cannot found method".
    if it can, how doing it right in your pattern?