Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Dynamic Checkbox Layout ISSUE

  1. #1

    Default Dynamic Checkbox Layout ISSUE

    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
    })]
    }))
    };

  2. #2

  3. #3

    Default I am not getting your point

    Ryan
    I am not getting your point

  4. #4
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281

    Default Not tested - But will get you in the right direction

    Code:
    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
     
     
    
              } 
         }
    }
    

    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    dlbjr.consulti[email protected]

    Owner of:
    Attractive Graphics - "custom screen printing"
    [email protected]

  5. #5

    Default Not Worked

    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

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Are you looking for something like:
    Code:
    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();

  7. #7

    Default I m looking for somthing like this

    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
    Last edited by abhayarora; 25 Feb 2009 at 11:29 PM. Reason: additional information

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The items config option of Ext.Collection needs to be an array and not a MixedCollection (however the items property is indeed a MixedCollection).
    Code:
    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);
    }

  9. #9

    Default How to get ID of selected checkbox?

    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 ?

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Use:
    Code:
    var cbox = multiCountryPanel.panel.findById(countryData.id);
    or simply:
    Code:
    var cbox = Ext.getCmp(countryData.id);

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •