This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding Dijits to a Content Pane
When you use a Dijit layout container, you place your Dijits in a content pane, where you can arrange them.
One way to arrange them is to use CSS positioning. Fundamentally, you can treat a content pane as a <div> element when placing other Dijits in it. You use relative positioning to position your Dijits with respect to the content pane.
The example contentpanetextbox.html shows how to add two text box Dijits to a content pane and arrange them.
To add Dijits to a content pane:
- Open your Web page in a text editor.
- Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.TextBox"); statements to your code.
Create a new <div> element with a border and set the <div> element's dojoType attribute to dijit.layout.ContentPane. Enclose two text box Dijits in the <div> element, using relative positioning to arrange them where you want in the content pane.
Script 4.2 shows what your page should look like after you make the additions.
Script 4.2. Adding Dijits to a content pane.
1 <html> 2 <head> 3 <title>Using Content Panes 4 with Other Dijits</title> 5 6 <link rel="stylesheet" 7 type="text/css" 8 href="http://o.aolcdn.com/ 9 dojo/1.1/dojo/ 10 resources/dojo.css" /> 11 12 <link rel="stylesheet" 13 type="text/css" 14 href="http://o.aolcdn.com/dojo/ 15 1.1/dijit/ 16 themes/tundra/tundra.css" /> 17 18 <script 19 djConfig="parseOnLoad:true" 20 type="text/javascript" 21 src="https://o.aolcdn.com/dojo/1.1/ 22 dojo/dojo.xd.js"> 23 </script> 24 25 <script type="text/javascript"> 26 dojo.require( 27 "dijit.layout.ContentPane"); 28 dojo.require( 29 "dijit.form.TextBox"); 30 </script> 31 </head> 32 33 <body class="tundra"> 34 <h1>Using Content Panes with Other 35 Dijits</h1> 36 <br> 37 <div dojoType= 38 "dijit.layout.ContentPane" 39 style="border: .2em dotted #900; 40 height : 200px; width : 200px"> 41 <input type="text" 42 dojoType="dijit.form.TextBox" 43 style="position:relative; top : 44 50px; left:50px"> 45 <input type="text" 46 dojoType="dijit.form.TextBox" 47 style="position:relative; top : 48 80px; left:30px"> 49 </div> 50 </body> 51 </html>
- Save your file.
- Navigate to your file in a browser. You should see two text boxes in a content pane with a dotted border (Figure 4.2).
Figure 4.2 A content pane with two text boxes.
- Type something in the text boxes to confirm that they're functional, as shown in Figure 4.2.
)
Now that you have content panes down, you can start using them in layout containers.