3

我对 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 样式）。

4

1 回答 1

5

请阅读边界的 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
});
于 2013-02-04T10:21:49.100 回答