Design sudoku using extjs

Question

I am very new to 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
    });
});

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

The design looks different in jsfiddle.

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

"The design looks different in jsfiddle" (I don't know why). Anyway, here is the link http://jsfiddle.net/X6kQK/ — Mr_Green, Feb 04 '13 at 08:40

score 5 · Accepted Answer · answered Feb 04 '13 at 10:21

5

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

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

answered Feb 04 '13 at 10:21

sra

23,820
7
55
89

Thank you for helping.. Can I use `panel` instead of `container`? I am trying to create a element similar to `div` here. or else I should go with `container` itself. – Mr_Green Feb 04 '13 at 10:26
@Mr_Green Of course you can. But you should decide if you need a panel and that all depends on your planned size and how each field should behave. I would recommend you to go a lean way, meaning using lean classes and lean layouts. And there is nothing bad in the use of this small css line so that shouldn't bother you here. If all depends on data you can also use a template to render directly html and attach dom listeners (that would be the solution with the best performance but the most work. You would end up with a single class here that excpect some data to render) – sra Feb 04 '13 at 10:36
Thank you for explaining... I have a small doubt. In my project(sudoku), I am trying to change the color of all the panels whenever the user pressed on a particular panel. How to do that? I did try `listeners: { 'render': function(panel) { panel.body.on('click', function() { panel.body.setStyle('background','red') }); } }` but no use.. – Mr_Green Feb 04 '13 at 10:40
@Mr_Green Did you mean that just for each or really all? Anyway, that again depends on your design. I recommend you to set layout specific logic int the view and all other in a centralized instance like a controller. Now to your problem: you can use this `listeners: {afterrender: function(c) {c.el.on('click', function(e,t){new Ext.Element(t).setStyle( 'background-color', 'red' )})}}` But you should also read this [article](http://www.sencha.com/blog/event-delegation-in-sencha-touch/) – sra Feb 04 '13 at 11:14

Design sudoku using extjs

1 Answers1

Linked