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,801
    Answers
    3467
    Vote Rating
    834
    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?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi