View Full Version : Multi page site

24 Jan 2011, 12:30 PM
Hi, I'm sure this question has been asked before but I just haven't had any luck finding an example of this. I am creating a mobile website with ASP.Net MVC and would like to use Sencha Touch. However, I cannot figure out how I can have multiple pages. From the examples in the download it seems like you have to write the entire site on one page instead of having links and directing users.

For example, when someone comes to the site, the first page they should get is a login page. Once they click submit I would like the cool transition effects to occur and the user be taken to their "home" page on the site which is a different url? How do I accomplish this?

Thanks in advance.

24 Jan 2011, 1:26 PM
You can redirect to different pages. Making a web app usually means that people stay in one page. If you send someone to another page, and it has Sencha Touch, it has to be reloaded which is not optimal.

If you are using something like CodeIgniter and are using views to display different pages, then you will not really use views to display the app but more to display data, usually in JSON. Your data Store or Ajax calls would call the different controller/action.

24 Jan 2011, 1:33 PM
Thanks for the reply. Is there any way to do partial rendering of a new page?

I have looked at the iUI framework and that was originally setup to have a one page model as well, but the capablility was added so that other pages in the site could be loaded. For example, the framework setup code is on the first page as well as a login form. Then when you click login, the framework makes an async call and if the login succeeds it replaces the whole login form div with another div and its content from the next page. Since the user is still on the first page the framework does not have to reload and it can provide a nice transistion to the next page.

Can anything like that be done with Sencha Touch?

24 Jan 2011, 1:37 PM
You don't need to go to a different page. What you would do is remove components when login is successful and add new components

24 Jan 2011, 1:39 PM
Is it possible to load what components need to be removed and added from a different page?

24 Jan 2011, 1:40 PM
Just include the JS files you need

24 Jan 2011, 1:42 PM
Thanks for your replies Mitchell. Do you happen to know of an example site with this functionality or some other threads that show this?

24 Jan 2011, 1:44 PM
It's standard to do. The examples include JS files

24 Jan 2011, 1:53 PM
Sorry, I'm not being clear. What I want to do is have a panel with the login form components in it. Then when the user clicks submit, I want to return new javascript (not just JSON data) that says clear out the panel and add components x, y, and z to the page. Then when the user clicks on component x more javascript is returned that says clear out the panel again and load in compoents a and b and so forth. So my end goal is to not have the javascript for the entire application on one page and just make Ajax requests to get some data, but to have only the initial javascript to load the page and then get extra javascript to render components and data based on what the user does. Thanks

24 Jan 2011, 2:25 PM
say your app is on index.html, you include all JS files. when a user navigates to your index.html page, it loads Sencha Touch and displays the login form. When a user submits the form and it is successful, you remove the login form and then add whatever components you want.

24 Jan 2011, 2:29 PM
Okay, I think that answers my question then. I was wanting to avoid loading all the javascript for the entire application all at once as it will be quite large. Thanks for your help.