Dynamic Checkbox Layout ISSUE

[abhayarora]

I need to show countries list in a Window the problem is it is remdering all in a column what i want is to break the column right after a certain no of countries and listed
prevoiusly i achived this by making a column layout and in confif using 3 columns in this way countries were listed in 3 columns but the problem is i want to show countries in alphabetical order in a COLUMN and then move to next column like
A D
B E
C f

Previously it gavce me layout as
A B C
D E F

can any 1 help ?
var showCountries=new Ext.Panel({
id:'CP',
layout: 'table',
height:300,
border : true,
layoutConfig: {columns: 1},
bodyStyle: 'padding:5px; 5px; 5px; 5px;',

});

for (var i = 0; i < countryArray.length; i++) {
var item = countryArray[i];
Ext.getCmp("MCP").insert(i, new Ext.Panel({
frame: false,
border: false,
width: '200',
layout: 'column',
layoutConfig: {
columns: 1
},
items: [
new Ext.form.Checkbox({
id:item.id,
boxLabel: item.countryName,
checked: false
})]
}))
};

[tryanDLS]

Please read http://extjs.com/learn/Ext_Forum_Help

[abhayarora]

Ryan
I am not getting your point

[dlbjr]

var item;
var counter = 0;
var columnCount = 3;
var rowCount = Math.round(countryArray.length / columnCount); 
if(countryArray.length % columnCount > 0){
     rowCount++;
}
 
for(var x = 0; x < rowCount; x+){
     for (var i = 0; i < columnCount; i++) {
          counter++;
          if(counter <= countryArray.length){
               item = countryArray[x * columnCount + i];

               //Do what ever
 
 

          } 
     }
}

[abhayarora]

Dear David
Thanks for your time
I tried your way to form the UI but this also didnt worked
In case we want to use your code how can we set the position of item ?the above code just gets the item at 00,01,02,03 and so on....
we already have data in a sequence we need just need to position the checkbox in verticle rather than horizontal having 3 columns

[Condor]

Are you looking for something like:

var panel = new Ext.Panel({
	layout: 'column',
	items: [{
		columnWidth: .5
	},{
		columnWidth: .5
	}]
});
for(var i = 0; i < countryArray.length; i++){
	var item = countryArray[i];
	var colIndex = Math.floor(panel.items.getCount() * i / countryArray.length);
	var column = panel.getComponent(colIndex);
	column.add({
		xtype: 'checkbox',
		id: item.id,
		boxLabel: item.countryName
	});
};
panel.doLayout();

[abhayarora]

As i said i need to align checkboxes .... so this is how i want thing to be .....

var items = new Ext.util.MixedCollection();
for (var i = 0; i < countryArray.length; i++) {
var item = countryArray[i];
var countryCheckbox=new Ext.form.Checkbox({
id:item.id,
boxLabel: item.countryName,
checked: item.enabled,
listeners: {check: fn:function here.... });
items.add(countryCheckbox);
}

Ext.getCmp("MCP").insert(0,new Ext.form.CheckboxGroup({
width: 520,

columns: 3,
vertical: true,
items: items
}));

Here in does not add items gives error
this.items[0] is undefined

Previously i was adding array of items insted of MIXED COLLECTION but it didnt took my checkbox listener so i hv to change it to mixed collection
thisItem = new Array();
thisItem["boxLabel"] = item.countryName;
thisItem["id"] = item.id;
thisItem["checked"]=item.enabled;
thisItem["listeners"]={check: {fn: countCountriesSelected(thisItem,thisItem.checked)}};
countryDataArray.push(thisItem);

This array was added but the check listener didnt worked it gave me error

[Condor]

The items config option of Ext.Collection needs to be an array and not a MixedCollection (however the items property is indeed a MixedCollection).

var items = [];
for (var i = 0; i < countryArray.length; i++) {
	var item = countryArray[i];
	var countryCheckbox=new Ext.form.Checkbox({
		id:item.id,
		boxLabel: item.countryName,
		checked: item.enabled,
		listeners: {
			check: function(){}
		}
	});
	items.push(countryCheckbox);
}

[abhayarora]

Dear Condor this thing worked thanks a lot
previously i was fetching the checkbox by this method
var cbox = multiCountryPanel.findById(countryData.id);
but now it gives error
how can i get the checked or unchecked checkbox in above ?

[Condor]

Use:

var cbox = multiCountryPanel.panel.findById(countryData.id);

or simply:

var cbox = Ext.getCmp(countryData.id);