View Full Version : List Item -> row panels stacking up on one another

25 Jul 2011, 4:21 AM
I have some code I am working on, trying to get the end product to look as if there was 2 columns. The app uses json feed to get the data and alter it so that the resulting information is displayed using a temporary panel called thisPanelx, which is added to a row panel.

for(var i=0;i<trafficAlertsLength;i++){ var thisPanelx = new Ext.Panel({ ... }); if((i%2)==0){ trafficAlertList.add( {id: 'row'+i, style: 'width:100%; background-color:#000000', layout: 'hbox'}); Ext.getCmp('row'+i).add(thisPanelx); trafficAlertList.doComponentLayout(); }else if((i%2)==1){ Ext.getCmp('row'+(i-1)).add(thisPanelx); trafficAlertList.doComponentLayout(); }else if((i+1)>trafficAlertsLength){ Ext.getCmp('row'+(i-1)).add( {xtype: 'panel', style: 'background: -webkit-gradient(linear, left top, left bottom, color-stop(0.6, #ffffff), color-stop(0.9, #b5bcc3));border-bottom: 1px solid #6b90a2'}); Ext.getCmp('row'+(i-1)).doComponentLayout(); }


trafficAlertList is the panel where the information is displayed as a list, a simple panel.
When I activate this code, the rows should contain 2 clusters of thisPanelx, which it does. Unfortunately, it doesnt become 3 rows containing 6 items total, but it merely stacks the 3 rows onbtop of one another so you end up with the last 2 items being shown in a neat looking row.
I would like to ask if anyone could tell me if there is something glaringly obviously wrong with what I am doing? as I understand it, the code should work, but it isnt.
I appreciate any help anyone could give me, but if I have not given enough information, please tell me. I have added all of the relevant code, so it should be enough.
Thank you yet again.