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

borderの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 に答える