What i want to learn is when program loads it comes up with the nested list structure in a container at the left side and when user touches nested list section the program loads a new nested list structure at right side. Is second nested list structure belongs to first one or or is it a completely new one ?
I need to create similar structure , when program runs at least 10 different food categories must be listed on the left side of the program and when a user selects a category , user must see the all recipes which are related with that category at the right side of the program and then he/she can touch and see the details of that recipe.
Im not sure if kitchensink is a good sample. You could read about the Sencha MVC and how to build applications: http://docs.sencha.com/touch/2-0/#!/guide/apps_intro
About the structure you want to create: The left side acts like a main menu. When a user click s on a menu item it send an event to a controller that render the specific view into the central panel.
Then you have other controllers for the central views. But there is no relation between the main menu (left side panel) and the main views. What if later, you want to change the layout of the application and use other widget for the left side menu? Sure, you don’t want to rewrite it all.