Looking for help with building a grid/table layout

[redmagic]

Hi,

I'm starting a new project and would love to do it with Sencha Touch. However, I would not know where to start in building this layout (the grid part, specifically). After browsing all guides and documentation, I would like to go for a Container and fill this with floating div's using a Template.

Any thoughts on how to construct this layout would be most welcome.

Kind regards,

Arjen

Screen shot 2011-12-13 at 12.44.19.png

[mitchellsimoens]

Floating divs will work. What have you tried?

[rdougan]

You can just create a Ext.dataview.DataView which has a custom itemTpl.

Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
            xtype: 'dataview',
            itemTpl: '<div class="item">{name}</div>',
            store: {
                fields: ['name'],
                data: [
                    { name: 'one' },
                    { name: 'two' },
                    { name: 'three' },
                    { name: 'four' },
                    { name: 'five' }
                ]
            }
        });
    }
});

And then some custom CSS:

.item {
    width: 100px;
    height: 100px;
    float: left;
    background: blue;
    border: 1px solid red;
}

[redmagic]

Hi,

Thanks for your quick replies. I have not yet worked them into my code, but they have given me enough information to get going.

Kind regards,

Arjen

[urbanmb]

I would also like to know how to fill up the entire screen and separate the boxes equally if possible? and Maybe putting the boxes in a carousel?

Still new and this is what I am having trouble with!

[rdougan]

I would also like to know how to fill up the entire screen and separate the boxes equally if possible? and Maybe putting the boxes in a carousel?

Still new and this is what I am having trouble with!

That unfortunately would probably require a new layout. You couldn't do it with just CSS. Maybe using the flex box, but I'm guessing you'd run into some issues.

[urbanmb]

I am trying to mimic something similar to this app tutorial but it was written in ST 1.x I believe.

I would like to create the same basic layout for one of my tabs.

Any idea on how I can start building this?

http://www.netmagazine.com/files/tut...demo/demo.html

[rdougan]

If you know how many items you are going to have horizontally, you could just have a vbox layout with an hbox layout for each row.

[urbanmb]

I see!

could you give me a quick example?

and I have a random question I am setting up a new TabPanel and I was loading an iconCls of 'tv' but I dont get the tv icon i get just a big square? I also tried with 'video' but still the same response, I switch it over to 'search' or 'home' and it works! Any Ideas on why the TV icon is not working?

[redmagic]

Hi,

I've almost got this working, but am also running into height issues. I would like to style the divs with height and width set to 33% to make them fill up the 3x3 grid. The surrounding div 'x-dataview-item' is preventing the inner divs from expanding to 33%.

The code is now:

Ext.setup({
    onReady: function() {
        Ext.Viewport.add({
            xtype: 'dataview',
            fullscreen: true,
            layout: 'vbox',
            defaults: {
                flex:1
            },
            itemTpl: '<div class="item">{name}</div>',
            store: {
                fields: ['name'],
                data: [
                    { name: 'A' },
                    { name: 'B' },
                    { name: 'C' },
                    { name: 'E' },
                    { name: 'F' },
                    { name: 'G' },
                    { name: 'H' },
                    { name: 'I' },
                    { name: 'J' }
                ]
            }
        });
    }
});

It would work, I guess, if we could give the items generated by the template some layout and a flex property.

Arjen

On a side note, I am already amazed by your community level support. If I end up using ST2 in this project, how can I best support you?