-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Please see this picture of Chrome and IE 6
In Chrome the right listbox is displayed correctly and the in IE6 the listbox does not.
This was working fine in v5.05 in IE6.
The listbox has a ListitemRenderer.
Hi Simon,
Here is some code:
test.zul
<zk> <window id="win" apply="test.TestController" width="100%" height="100%" > <borderlayout> <north title="Search Criteria:" collapsible="true"> <grid id="grid" width="300px"> <rows> <row> <label>First:</label> <textbox id="first" value="@{fixed.firstName}" /> </row> <row> <label>Second:</label> <textbox id="Second" value="@{fixed.lastName}" /> </row> <row> <checkbox id="married" label="Married" disabled="true" checked="@{fixed.married}" /> </row> </rows> </grid> </north> <center title="Results:" > <borderlayout> <west size="41%" flex="true" splittable="true"> <listbox id="list" model="@{customers}" mold="paging" pagingPosition="bottom" pageSize="20" sizedByContent="true" vflex="true" width="800px" height="100%" style="overflow:auto;position:relative" span="true"> <listhead> <listheader label="First" /> <listheader label="Second" /> <listheader label="Check" /> </listhead> <listitem self="@{each=item}" value="@{item}" > <listcell label="@{item.firstName}" /> <listcell label="@{item.lastName}" /> <listcell label="@{item.married}" /> </listitem> </listbox> </west> <center border="none" flex="true"> <listbox id="list1" model="@{customers}" width="100%" height="100%" style="overflow:auto;position:relative" sizedByContent="false" span="true"> <listhead> <listheader label="First" /> <listheader label="Second" /> <listheader label="Check" /> </listhead> <listitem self="@{each=item}" value="@{item}" > <listcell label="@{item.firstName}" /> <listcell label="@{item.lastName}" /> <listcell label="@{item.married}" /> </listitem> </listbox> </center> </borderlayout> </center> <south height="25px"> </south> </borderlayout> </window> </zk>
TestController.java
package test; import java.util.ArrayList; import java.util.Collection; import java.util.List; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.util.GenericForwardComposer; import org.zkoss.zkplus.databind.AnnotateDataBinder; import org.zkoss.zkplus.databind.Binding; import org.zkoss.zul.Listbox; public class TestController extends GenericForwardComposer { private List customers = new ArrayList(); private Person fixed; private AnnotateDataBinder binder; private Listbox list; public TestController( ) {} @Override public void doAfterCompose( Component win ) throws Exception { super.doAfterCompose(win); // create binder binder = new AnnotateDataBinder(win); // create data for listbox for (int i = 0; i < 100; i++) { boolean married = false; java.util.Random rn = new java.util.Random(); int r = rn.nextInt(10); if (r > 5) married = true; customers.add(new Person(randomstring(4, 6), randomstring(4, 6), married)); } // create a person fixed = new Person(); // bind the data binder.bindBean("customers", customers); binder.bindBean("fixed", fixed); binder.loadAll(); } public void onSelect$list( Event event ) { Person selected = (Person)list.getSelectedItem().getValue(); fixed.setFirstName(selected.getFirstName()); fixed.setLastName(selected.getLastName()); fixed.setMarried(selected.isMarried()); loadBeans("fixed"); } public void loadBeans( String... beans ) { Collection allBindings = binder.getAllBindings(); List<Component> comps = new ArrayList<Component>(); for (Object o : allBindings) { Binding b = (Binding)o; for (String bean : beans) { if (b.getExpression().startsWith(bean + ".") || b.getExpression().equals(bean)) { comps.add(b.getComponent()); break; } } } for (Component c : comps) { binder.loadComponent(c); } } public static String randomstring( int lo, int hi ) { int n = rand(lo, hi); byte b[] = new byte; for (int i = 0; i < n; i++) b<i > = (byte)rand('a', 'z'); return new String(b, 0); } private static int rand( int lo, int hi ) { java.util.Random rn = new java.util.Random(); int n = hi - lo + 1; int i = rn.nextInt(n); if (i < 0) i = -i; return lo + i; } }
Person.java
package test; public class Person { private String firstName = ""; private String lastName = ""; private boolean married = true; public Person( ) { } public Person( String firstName, String lastName, boolean married ) { this.firstName = firstName; this.lastName = lastName; this.married = married; } public boolean isMarried( ) { return married; } public void setMarried( boolean married ) { this.married = married; } public String getFirstName( ) { return firstName; } public void setFirstName( String firstName ) { this.firstName = firstName; } public void setLastName( String lastName ) { this.lastName = lastName; } public String getLastName( ) { return lastName; } // getter and setters public void setFullName( String f ) { // do nothing } public String getFullName( ) { return firstName + " " + lastName; } }
This code doesnt produce the error exactly how it happens on our system, but its close enough - in IE6 when the screen is displayed resize the splitter and the left listbox will mess up.
It seems to be a bug in 5.0.6. I have posted it here.
Meanwhile, you can try to put a Div between the West region and the listbox:
<borderlayout> <west size="40%" flex="true" splittable="true"> <div hflex="1"> <listbox vflex="1" hflex="1"> <listhead> <listheader label="First" /> </listhead> <listitem> <listcell label="1" /> </listitem> <listitem> <listcell label="2" /> </listitem> <listitem> <listcell label="3" /> </listitem> </listbox> </div> </west> <center> <div> Div Content </div> </center> </borderlayout>
Simon
Asked: 2011-02-27 17:06:50 +0800
Seen: 547 times
Last updated: Mar 07 '11