DataView with Components and two columns

[jag2000]

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.

[mitchellsimoens]

If you apply

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.

[jag2000]

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

[Frank]

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;".

[bartvde]

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.
?

[evegraphic]

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 :

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)

.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 ?

[aesposit]

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

Thanks a lot

[evegraphic]

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

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)

.list .x-dataview-item {
     width: 33%;
     display: inline-block;
}

I have a list with 3 columns