Design sudoku using extjs

Question

I am very new to extjs.

I am trying to design sudoku game using extjs. Till now I have done the following:

Ext.onReady(function() {

    var i = 0,
        items = [],
        childItems = [];

    for (i = 0; i < 9; ++i) {
        childItems.push({
            xtype: 'container',
            height: 50,

            style: {
                borderColor: '#000000',
                borderStyle: 'solid',
                borderWidth: '1px',
                width: '40px'
            }
        });
    }
    for (i = 0; i < 9; ++i) {
        items.push({
            xtype: 'container',
            height: 150,
            layout: {
                type: 'column'
            },
            style: {
                borderColor: '#000000',
                borderStyle: 'solid',
                borderWidth: '1px',
                width: '143px'
            },
            items: childItems
        });
    }
    Ext.create('Ext.container.Container', {
        layout: {
            type: 'column'
        },
        width: 450,
        renderTo: Ext.getBody(),
        border: 1,
        height: 450,
        style: {
            borderColor: '#000000',
            borderStyle: 'solid',
            borderWidth: '1px',
            marginLeft: 'auto',
            marginRight: 'auto',
            marginTop: '30px'
        },

        items: items
    });
});

My problem is that, because of border, the blocks are having some space and even this looks similar to the design with simple HTML (div's, may be because use of css). Please help..

The design looks different in jsfiddle.

EDIT: I want to avoid using CSS (javascript style also) as much as possible.

Answer 1

Please read the API for border. It is not possible to use a simple container without defining any style.

For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style

But you should use the table layout, I think that make thing easier for you.

Here is you example using the table layout (quick and dirty variant, but it should show the trick)

JSFiddle

for (i = 0; i < 9; ++i) {
    childItems.push({
        xtype: 'container',
        width: 50,
        height: 50,
        html: i + '',
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}
    });
}
for (i = 0; i < 9; ++i) {
    items.push({
        xtype: 'container',
        layout: {
            type: 'table',
            columns: 3
        },
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
        items: childItems
    });
}
Ext.create('Ext.container.Container', {
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    renderTo: Ext.getBody(),    
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px', margin: '30px'},
    items: items
});