1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    nziehn is on a distinguished road

      0  

    Default Unanswered: Writing my own layouts

    Unanswered: Writing my own layouts


    Hey,
    I'm very new to web development, I'm coming from iOS. I would like to write a layout that is similar to the UICollectionViewController ( if anyone knows that ).

    It displays data arrays, but not in a single column like the Ext.List but with multiple items per row. In general every item can have a different size, but for now I would be fine having just one size for all.

    I would like to write the following code:

    Ext.create('My.Grid', {
    fullscreen: true,
    itemTpl: '{title}',
    data: [
    { title: 'Item 1' },
    { title: 'Item 2' },
    { title: 'Item 3' },
    { title: 'Item 4' }
    ]
    });

    And get something like this:

    example.jpg
    do you have any suggestion how I write the 'My.Grid' component (I'm not even sure whether component is the correct word here)?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    You can do this with simple CSS (you can clean this up, just what I came up with in 2 minutes):

    Code:
    Ext.Viewport.add({
        xtype : 'container',
        tpl   : '<tpl for="."><div class="item">{title}</div></tpl>',
        data  : [
            { title : 'Item 1' },
            { title : 'Item 2' },
            { title : 'Item 3' },
            { title : 'Item 4' }
        ]
    });
    Code:
    .item {
        background-color: #f00;
        width: 31%;
        margin: 1em;
        display: inline-block;
    }
    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.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    nziehn is on a distinguished road

      0  

    Default


    Hey, thx for the help.

    is there a way to get a javascript function call to draw each item?

    What I mean is: I provide a function, that is called for each element in 'data' that asks me to draw it ( specify a <div> object to hold it).

    I need this, since I have some conditional code.

    This should also work if an attached store changes.

    Thx!

Thread Participants: 1

Tags for this Thread