Skip to main content

Learning Dojo: Laying Out the Form

Let's take tab for example:


<script>
dojo.require("dojo.parser" );
dojo.require("dijit.layout.ContentPane" );
dojo.require("dijit.layout.TabContainer" );
</script>
</head>

The two components we need, again, are as follows:

  • A dijit.layout.ContentPane, which holds one "tabful" of data. Each ContentPane has a lable that appears on the tab. 
  • A dijit.layout.TabContainer, which holds a group of ContentPanes.



<div dojoType="dijit.layout.ContentPane" title="Personal Data">
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" size="30" /><br/>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" size="30" /><br/>
<label for="middle_initial">Middle Initial:</label>
<input type="text" name="middle_initial" id="middle_initial" size="1" /><br/>
</div>
Then repeat this for all the tabs.
for example:

Phone:</label>
<input type="text" name="work_phone" id="work_phone" size="30" /><br/>
<label for="cell_phone">Cell Phone:</label>
<input type="text" name="cell_phone" id="cell_phone" size="30" /><br/>
</div>


Wrap up these panes in a <div> with dijit.layout.TabContainer: 
<div class="formContainer" dojoType="dijit.layout.TabContainer"
style="width:600px;height:600px" >
...
</div>
Notice the height style on the TabContainer. That’s required, and if you
leave it off, the tabs will not appear at all. (Consider yourself warned!)


Something Wrong?
Things happen.

• Make sure your dojoType= attributes are correct. Case matters
here.
• Double-check the <body> tag to make sure it has class="tundra".






Comments

Post a Comment

Popular posts from this blog

Stretch a row if data overflows in jasper reports

It is very common that some columns of the report need to stretch to show all the content in that column. But  if you just specify the property " stretch with overflow' to that column(we called text field in jasper report world) , it will just stretch that column and won't change other columns, so the row could be ridiculous. Haven't find the solution from internet yet. So I just review the properties in iReport one by one and find two useful properties(the bold  highlighted in example below) which resolve the problems.   example: <band height="20" splitType="Stretch" > <textField isStretchWithOverflow="true" pa...
4 comments
Read more

Live - solving the jasper report out of memory and high cpu usage problems

I still can not find the solution. So I summary all the things and tell my boss about it. If any one knows the solution, please let me know. Symptom: 1.        The JVM became Out of memory when creating big consumption report 2.        Those JRTemplateElement-instances is still there occupied even if I logged out the system Reason:         1. There is a large number of JRTemplateElement-instances cached in the memory 2.     The clearobjects() method in ReportThread class has not been triggered when logging out Action I tried:      About the Virtualizer: 1.     Replacing the JRSwapFileVirtualizer with JRFileVirtualizer 2.     Not use any FileVirtualizer for c...
1 comment
Read more

JasperReports - Configuration Reference

Data Source / Query Executer net.sf.jasperreports.csv.column.names.{arbitrary_name} net.sf.jasperreports.csv.date.pattern net.sf.jasperreports.csv.encoding net.sf.jasperreports.csv.field.delimiter net.sf.jasperreports.csv.locale.code net.sf.jasperreports.csv.number.pattern net.sf.jasperreports.csv.record.delimiter net.sf.jasperreports.csv.source net.sf.jasperreports.csv.timezone.id net.sf.jasperreports.ejbql.query.hint.{hint} net.sf.jasperreports.ejbql.query.page.size net.sf.jasperreports.hql.clear.cache net.sf.jasperreports.hql.field.mapping.descriptions net.sf.jasperreports.hql.query.list.page.size net.sf.jasperreports.hql.query.run.type net.sf.jasperreports.jdbc.concurrency net.sf.jasperreports.jdbc.fetch.size net.sf.jasperreports.jdbc.holdability net.sf.jasperreports.jdbc.max.field.size net.sf.jasperreports.jdbc.result.set.type net.sf.jasperreports.query.chunk.token.separators net.sf.jasperreports.query.executer.factory.{language} net.sf.jasperreports.xpath....
Post a Comment
Read more