1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    33
    Answers
    4
    Vote Rating
    0
    jag2000 is on a distinguished road

      0  

    Question Answered: DataView with Components and two columns

    Answered: DataView with Components and two columns


    Hallo,

    today I have two questions. The 1st, is there any solution to show two columns in a dataview with components? And the 2nd question depends on the solution of qestion one. If I have two columns, how can I switch back to one column?

    Sounds strange? Here is what I want to build:

    I whant to have a list with items, but the items are small and so in every row should be two items (50% width). I also want to give my customers the positility to zoom in. So I want to watch for the pinch-event and then the items should become 100% width and this results in a list the one column and all items are in a own row.

    before pinch:
    ItemHeadlin 1
    Image 1
    Description 1
    ItemHeadline 2
    Image 2
    Description 2
    ItemHeadline 3
    Image 3
    Description 3
    ItemHeadline 4
    Image 4
    Description 4
    ... ...





    after pinch:
    ItemHeadline 1
    Image 1
    Description 1
    ItemHeadline 2
    Image 2
    Description 2
    ItemHeadline 3
    Image 3
    Description 3
    ...




    By the way, I whant dynamicaly load the items via ajax, so I do not know, how many items I have to display (thas why I am using a list and not several vboy and hbox layouts).

    In the future, perhaps, I want to implement a zoom out, so that there are tree items at one row (33% width).

    Is it posible to do this? I think the event handling is the smalest task for me, but I do not know how to implement this kind of layout.

  2. If you apply

    Code:
    display: inline-block;
    To the x-dataview-item element that will allow you to size those x-dataview-item elements and have them go side by side.

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


    If you apply

    Code:
    display: inline-block;
    To the x-dataview-item element that will allow you to size those x-dataview-item elements and have them go side by side.
    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 User
    Join Date
    Oct 2010
    Posts
    33
    Answers
    4
    Vote Rating
    0
    jag2000 is on a distinguished road

      0  

    Default So easy?

    So easy?


    Oh ok, I did not try it. I will check it the next days. Thanks for reply

  5. #4
    Sencha User Frank's Avatar
    Join Date
    Mar 2007
    Posts
    185
    Vote Rating
    1
    Frank is an unknown quantity at this point

      0  

    Default


    Thanks so much!
    And I found it's much better that using "display:inline-block;" rather than "float: left;", though the same result. I first looked "float: left;" from this thread:http://www.sencha.com/forum/showthre...s-and-DataView. Both work the same result, and I prefer using "display:inline-block;".
    Last edited by Frank; 31 Mar 2012 at 3:51 AM. Reason: spelling mistake
    Ext Every Day!
    ajaxjs.com

  6. #5
    Sencha User
    Join Date
    Oct 2007
    Posts
    23
    Vote Rating
    1
    bartvde is on a distinguished road

      0  

    Default but what about influencing ordering?

    but what about influencing ordering?


    Using Mitchell's advice I was able to create a multi-column list. But is there a way to influence the ordering?

    Right now, the ordering is:
    1 2 3
    4 5 6 etc.

    Can we do
    1 4 7
    2 5 8
    3 6 9
    etc.
    ?

  7. #6
    Sencha User evegraphic's Avatar
    Join Date
    Nov 2012
    Location
    France
    Posts
    22
    Answers
    1
    Vote Rating
    -1
    evegraphic is an unknown quantity at this point

      0  

    Default


    Hi,

    this trick doesn't work for me

    App created with Sencha Touch 2.1
    I use Ext.dataview.List, a data store and an itemTpl in the dataview config :

    Code:
    itemTpl: [
    	'<div class="item">',
    		'<p class="icon" style="background: url({image}) no-repeat;"></p>',
    		'<p class="title">{name}</p>',
    		'<p class="description">{description}</p>',
    	'</div>'
    ].join("")
    Then, my css (i want 3 columns)
    Code:
    .x-list-item {
    	display: inline-block;
    	width: 33%;
    }
    I still have my data in one column, in a classic list...
    What am I doing wrong ?

  8. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    aesposit is on a distinguished road

      0  

    Default


    AM
    @evegraphic and @mitchellsimoens
    I also have the same requirements.
    Can you provide a code snippet to achieve that ?

    Thanks a lot

  9. #8
    Sencha User evegraphic's Avatar
    Join Date
    Nov 2012
    Location
    France
    Posts
    22
    Answers
    1
    Vote Rating
    -1
    evegraphic is an unknown quantity at this point

      0  

    Default


    I found the solution.
    I didn't use the good class so that the css can work.

    It works if we use Ext.DataView instead of Ext.dataview.List

    Code:
    Ext.define("MyApp.view.List", {
         extend: 'Ext.DataView',
         xtype: 'mylist',
    
         config: {
              store : 'mystoreid',
              cls:'list',
              itemTpl: [
                   '<div class="item">',
                        '<p class="icon" style="background: url({image}) no-repeat;"></p>',
                        '<p class="title">{name}</p>',
                        '<p class="description">{description}</p>',
                   '</div>'
              ].join("")
         }
    });
    Css : it's important to style "x-dataview-item", not "item" div (in itemTpl)
    Code:
    .list .x-dataview-item {
         width: 33%;
         display: inline-block;
    }
    I have a list with 3 columns