Sudoku design using extjs
I am very new to extjs.
I am trying to create sudoku using extjs. So far 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
});
});
My problem is that because of the border, the blocks have some space and even this looks like a design with simple HTML (div, maybe due to the use of css). Please, help..
The design looks different in the jsfiddle .
EDIT: I want to avoid using CSS (javascript style) as much as possible.
source to share
Please read the API for border . It is not possible to use a simple container without defining a style.
For components that have no border by default, setting this option will not cause the border to appear on its own. You also need to specify the border color and style
But you have to use the table layout, I think that will make things easier for you.
Here is an example using a table layout (quick and dirty, but should show the trick)
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
});
source to share