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

[chrismobile]

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

[mitchellsimoens]

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

[chrismobile]

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.

[chrismobile]

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!

[mitchellsimoens]

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:

        layout : 'card'

Replace that line with this:

        layout     : {
            type      : 'card',
            animation : {
                type : 'slide'
            }
        },

The animation Object is a config where you can define the duration, directions and such.

[ron_stahl]

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

[robl]

Thank you Mitchell!!! This was sorely needed.

[UbuntuPenguin]

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.

[mitchellsimoens]

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:

Ext.Loader.setConfig({
    enabled : true,
    paths   : {
        Override : 'overrides'
    }
});

Hope this helps.

[arunc]

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...