1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    70
    Vote Rating
    -2
    Trinad can only hope to improve

      0  

    Default Dynamic check boxes in a 3 column lyout

    Dynamic check boxes in a 3 column lyout


    Hi,

    I have a requirement to display all the check boxes in to a form/page in a 3 column layout.

    I am trying to render all the check boxes in to a Xtemplate div in a 3 column layout also My component extends Ext Box component ( all the check boxes are dynamic data comes from the server,3 column layout has to be adjusted automatically),any Idea how to do this ?

    Thanks,
    Trinad.

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Trinad, this is interesting timing. I just finished writing about this.


    Have you tried the checkbox group?
    Code:
    var checkboxes = {
    	xtype      : 'checkboxgroup',
    	fieldLabel : "Which do you own",
    	anchor     : '100%',
    	defaults : {
    		bodyStyle      :   'background-color: #DFE8F6;',
    	},
    	columns    : 2, // change the number here
    	items      : [
    		{
    			boxLabel   : 'Cat',
    			inputValue : 'cat'
    		},
    		{
    			boxLabel   : 'Dog',
    			inputValue : 'dog'
    		},
    		{
    			boxLabel   : 'Fish',
    			inputValue  : 'fish'
    		},
    		{
    			boxLabel   : 'Bird',
    			inputValue : 'bird'
    		}
    	]
    }
    
    var fp = {
    	xtype      : 'form',
    	labelWidth : 110,
    	items      : checkboxes,
    	frame      : true
    }
    		
    new Ext.Window({
    	title   : '',
    	layout  : 'fit',
    	height  : 90,
    	width   : 320,
    	borde   : false,
    	items   : fp
    }).show();

Thread Participants: 1