PDA

View Full Version : Dynamic Checkbox Layout ISSUE



abhayarora
23 Feb 2009, 11:11 PM
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
24 Feb 2009, 8:52 AM
Please read http://extjs.com/learn/Ext_Forum_Help

abhayarora
24 Feb 2009, 8:56 PM
Ryan
I am not getting your point

dlbjr
25 Feb 2009, 6:29 AM
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
25 Feb 2009, 10:30 PM
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
25 Feb 2009, 11:14 PM
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
25 Feb 2009, 11:25 PM
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
25 Feb 2009, 11:31 PM
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
25 Feb 2009, 11:38 PM
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
25 Feb 2009, 11:39 PM
Use:

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

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

abhayarora
25 Feb 2009, 11:40 PM
Thanks a lot you guys are grt thanks my problem is solved :)

abhayarora
26 Feb 2009, 10:27 PM
Thanks a lot it worked