使用extjs设计数独 [英] Design sudoku using extjs

问题描述

我对extjs非常陌生.

I am very new to extjs.

我正在尝试使用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
    });
});

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

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..

在 jsfiddle 中，设计看起来有所不同. >

我想尽可能避免使用CSS(也使用JavaScript样式).

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

推荐答案

请阅读

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

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

这篇关于使用extjs设计数独的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！