ExtJS 4, CheckboxGroup. Table layout

Question

I'm using ExtJS 4.1 MVC. In view I created checkboxGroup and in controller I add items (checkboxes) to id dynamically. But I need them to display in special way. I'm thinking about Templates (XTemplates).

Do I need to add tpl to checkboxGroup or to every checkbox item? I have no idea how does it look like. Please, help!

Please write an example template for checkbox

var checkboxes = Ext.getCmp("myCheckboxGroup");
myStore.each(function(item){
    var name = item.get("name"); 
    checkboxes.add({
        boxLabel: name,
        name: fieldName,
        // tpl ???
    });
},this);

Answer 1

I found a better approach - for CheckboxGroup make a Table Layout. It looks like this:

View:

xtype: "checkboxgroup",
layout: {
    type: "table",
    columns: 3
},
defaults : {
    padding : "0 10 0 0",
    width : 233,
    cellCls : 'verticalAlignTop',   // <=====
    border : false,         // <=====
},
width: 700,
items: []

In controller I dynamically add items:

var checkboxes = Ext.getCmp("myCheckboxGroup");
myStore.each(function(item){
    var name = item.get("name"); 
    checkboxes.add({
        xtype: "checkbox",
        boxLabel: name,
        name: fieldName,
    });
},this);

And to make a vertical align I added cellCls : 'verticalAlignTop' and in style.css add:

.verticalAlignTop { vertical-align:top; }

Works great for me: