1. #1
    Sencha User chris_nl's Avatar
    Join Date
    Nov 2011
    Location
    Amstedam
    Posts
    34
    Answers
    1
    Vote Rating
    0
    chris_nl is on a distinguished road

      0  

    Question Answered: newby Question, what component to use (see enclosed a sketch)

    Answered: newby Question, what component to use (see enclosed a sketch)


    Hello, I am new to the Sencha touch framework. And I have been reading a lot of documentation.
    I finally got a Ext.dataview.List working, but I really don't know where to go from here (phase 1 to phase 2) in my Sketch. It will be a simple webapp for learning purpurse and to make my father in law happy.

    Could someone please help me out how to connect the ontap click to show the page content with a bar above it and a back button? I can't find it in the documention or a sample of how it is done.

    And am I using the right Sencha components in my sketch? Any tips are welcome!

    Kind regards, Chris.
    sketch2.jpg
    Attached Images

  2. Usually don't do this but since I have seen others asking for a simple MVC example using Sencha Touch 2 I have decided to create a simple MVC app based on your needs. This is using PR3 but later versions I will try to update this example. See attached zip file and of course change the path to your PR3 in index.html

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    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


    Usually don't do this but since I have seen others asking for a simple MVC example using Sencha Touch 2 I have decided to create a simple MVC app based on your needs. This is using PR3 but later versions I will try to update this example. See attached zip file and of course change the path to your PR3 in index.html
    Attached Files
    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
    Sencha User chris_nl's Avatar
    Join Date
    Nov 2011
    Location
    Amstedam
    Posts
    34
    Answers
    1
    Vote Rating
    0
    chris_nl is on a distinguished road

      0  

    Default Thanks :)

    Thanks :)


    Thank you for providing a Example Mitchel!
    I will look at it tomorrow and give it a try.
    Thanks in advance! I will reply on the form if I got it working
    Kind regards from Holland!
    Chris.

  5. #4
    Sencha User chris_nl's Avatar
    Join Date
    Nov 2011
    Location
    Amstedam
    Posts
    34
    Answers
    1
    Vote Rating
    0
    chris_nl is on a distinguished road

      0  

    Default


    Hello Mitchel, Thank you for your time and providing a excellent example!
    To be honest, I am not sure if I can fully understand of what happens as I am not familiar with
    the Sencha framework. I hope I can wrap my head around it in Time. But it's a good example to start
    learning it.

    Is there an option to make the content slide in like in the example of the nestedList? I tried searching for what property or settings that made the nestedList animate, but I could not find it. Is it because the content is a Panel?

    Did I also had to do something with the read-me file? Because I could not find the .js files in your description
    And I am working from a Windows platform, so it's different I guess.

    Thanks for your effort so far!

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    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 animations aren't 100% quite yet. You can use it but you may run into errors. If you open app/view/Viewport.js and on line 7 your should see this:

    Code:
            layout : 'card'
    Replace that line with this:

    Code:
            layout     : {
                type      : 'card',
                animation : {
                    type : 'slide'
                }
            },
    The animation Object is a config where you can define the duration, directions and such.
    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.

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    22
    Vote Rating
    0
    ron_stahl is on a distinguished road

      0  

    Default Sub-directories and MVC

    Sub-directories and MVC


    Mitchell,

    Thanks for the great example, it was a great help and much needed. One question I have is I would like to organize my views, controllers, stores, and models script files into sub-directories based on function. Is there something special we need to do so that the application can find all the script files in the correct sub-directories?

    Thanks
    Ron

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Thank you Mitchell!!! This was sorely needed.

  9. #8
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Answers
    7
    Vote Rating
    2
    UbuntuPenguin is on a distinguished road

      0  

    Default


    Thanks again Mitchell. Since the demise of Flex was announced by Adobe, there are alot of "Flexfugees" branching out into the JS world. APIs are nice, but it always helps to see how exactly an application should be put together, and how those pieces and parts interact.

  10. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    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


    Quote Originally Posted by ron_stahl View Post
    Mitchell,

    Thanks for the great example, it was a great help and much needed. One question I have is I would like to organize my views, controllers, stores, and models script files into sub-directories based on function. Is there something special we need to do so that the application can find all the script files in the correct sub-directories?

    Thanks
    Ron
    So using Ext.Loader, the filesystem has to match the class name (case sensitive)... Here are some class names and filesystem pairs...

    MyApp.view.users.List
    /app/view/users/List.js

    MyApp.controller.Main
    /app/view/controller/Main.js

    MyApp.util.Locale
    /app/util/Locale.js

    Override.app.Application
    /overrides/app/Application.js

    You can see a trend. This example is using MVC so the name config of the Ext.application call is 'MyApp' and the default path setup is MyApp is resolved to the 'app' directory. This is the default so the path is already setup for us. The 4th example uses the namespace root of 'Override' and we need to have it resolve to the 'overrides' directory. To do that, we need to setup a path for it:

    Code:
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            Override : 'overrides'
        }
    });
    Hope this helps.
    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.

  11. #10
    Sencha User
    Join Date
    Oct 2011
    Posts
    29
    Answers
    1
    Vote Rating
    0
    arunc is on a distinguished road

      0  

    Default


    That one was really help full.

    How can we add a manifest file for application caching in the above given mvc example.
    I tried it but it is showing some errors..!
    can any one help me to understand how this application can be made working when device is offline...