使用extjs设计数独

Question

我对extjs很新.

我正在尝试使用extjs设计数独游戏.直到现在我已经做了以下事情:

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

我的问题是,由于边框,块有一些空间,甚至这看起来类似于简单的HTML设计(div,可能是因为使用CSS).请帮忙..

jsfiddle的设计看起来不同.

编辑:我想尽可能避免使用CSS(也是javascript风格).

Answer 1

请阅读边框 API .如果不定义任何样式,则无法使用简单容器.

对于默认情况下没有边框的组件,设置此选项不会使边框本身显示.您还需要指定边框颜色和样式

但你应该使用表格布局,我认为让事情变得更容易.

这是你使用表格布局的例子(快速和脏的变体,但它应该显示技巧)

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