Creating dojo mobile Views in code...this almost works...

I am building a mobile app using dojo and want to create my views in code (see snipit below).  My problem is that the views are all merging together instead of displaying separately.

Can anyone please guide me as to what I am missing.  I've tried to manually set one view as "hidden" but that seems to have to effect.  I am using IE 9.
//create main View

        var mainview = new dojox.mobile.View({ id: "mainview", selected: true }, dojo.body());

        var heading = new dojox.mobile.Heading({ label: "MarketWare" }).placeAt(mainview);
        var mainlist = new dojox.mobile.RoundRectList().placeAt(mainview);
        var listitem1 = new dojox.mobile.ListItem({ label: "Database", icon: "/Images/Database32.png", moveTo: "database" }).placeAt(mainlist);
        var listitem2 = new dojox.mobile.ListItem({ label: "List", icon: "/Images/List32.png", moveTo: "lists" }).placeAt(mainlist);
        var listitem3 = new dojox.mobile.ListItem({ label: "History", icon: "/Images/History32.png", moveTo: "history" }).placeAt(mainlist);

        //create database view
        var database = new dojox.mobile.View({ id: "database", selected: false }, dojo.body());

        var heading2 = new dojox.mobile.Heading({ label: "Database",back:"Main",moveTo:"mainview" }).placeAt(database);
        var mainlist2 = new dojox.mobile.RoundRectList().placeAt(database);
        var listitem21 = new dojox.mobile.ListItem({ label: "Company", moveTo: "company" }).placeAt(mainlist2);
        var listitem22 = new dojox.mobile.ListItem({ label: "Contact", moveTo: "contact" }).placeAt(mainlist2);
        var listitem23 = new dojox.mobile.ListItem({ label: "Issues",  moveTo: "issues" }).placeAt(mainlist2);

        mainview.startup();
        database.domNode.style.visibility = "hidden";

Open in new window

TwoViews.jpg
marketwareAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
replace : var mainview = new dojox.mobile.View({ id: "mainview", selected: true }, dojo.body());
by : var mainview = new dojox.mobile.View({ id: "mainview", selected: true };

and add :
dojo.body().appendChild(mainview.domNode);
just before :
mainview.startup();

do the same thing for all view (database)

test page : http://jsfiddle.net/kXHGj/
0
 
marketwareAuthor Commented:
Perfect!!!!!!!!!! Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.