使用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適用於border。沒有定義任何樣式，不可能使用簡單的容器。

對於在默認情況下沒有邊框組件，設置這不會使 邊框單獨出現。您還需要指定邊框顏色和款式

但是，你應該使用表格佈局，我想對你使事情更加容易。

下面是使用您例如表佈局（快速和骯髒的變異，但它應該顯示的伎倆）

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