1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    26
    Vote Rating
    0
    redmagic is on a distinguished road

      0  

    Default Answered: Looking for help with building a grid/table layout

    Answered: Looking for help with building a grid/table layout


    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

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

    Code:
    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:

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Floating divs will work. What have you tried?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


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

    Code:
    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:

    Code:
    .item {
        width: 100px;
        height: 100px;
        float: left;
        background: blue;
        border: 1px solid red;
    }
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    26
    Vote Rating
    0
    redmagic is on a distinguished road

      0  

    Default


    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

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Answers
    1
    Vote Rating
    0
    urbanmb is on a distinguished road

      0  

    Default


    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!

  7. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Quote Originally Posted by urbanmb View Post
    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  8. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Answers
    1
    Vote Rating
    0
    urbanmb is on a distinguished road

      0  

    Default


    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

  9. #8
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  10. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Answers
    1
    Vote Rating
    0
    urbanmb is on a distinguished road

      0  

    Default


    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?

  11. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    26
    Vote Rating
    0
    redmagic is on a distinguished road

      0  

    Default


    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:

    Code:
    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?