List filling

[bjornravers]

Hi everybody I'm new to sencha, but I need to make a project for my internship. I'm stuck at a part and I'm hoping one of you can help me. I know how to fill a list and how to go to the detail page of a list item.

The problem:
I need to fill a list, but the list needs to be filled with 2 different itemTlp's. What I need is 3 items then a switch to another item a "bigger" item which has a diffrent css and <div> structure.

ex.
------LIST TITLE------
- Normal item 1
- Normal item 2
- Normal item 3
- BIG ITEM 1
- Normal item 4
- Normal item 5
- Normal item 6
- BIG ITEM 2

I know I'm not good at explaining things . But I hope you get the picture.
I hope someone can help me with this.
Thanks in advance!

[enno]

---

[enno]

Us an XTemplate with the if clause
http://docs.sencha.com/touch/2-1/#!/api/Ext.XTemplate

Have you looked at the Dataview?
http://docs.sencha.com/touch/2-1/#!/guide/dataview

[bjornravers]

Thanks for the reply, I'll look into it.

Now I have the store in a different file, and my page is a list right now should I make it a dataview or?
sorry as I said I'm totally new to sencha (also the store is still dummy info for testing).

Ext.define('lists.view.PlacesList', {
    extend: 'Ext.List',
    xtype: 'placeslist',
       requires: [
		'lists.store.Places',
    ],
		
    config: {
		//fullscreen: true,
		store: 'Places',
		
		title: 'HiShanghai',
        itemTpl: '<img src="resources/icons/Icon.png" width="50px" height="50px"> {firstName} {lastName}'
	
        //grouped: true,	
    }
});

[enno]

An XTemplate is simpler for the first time you can easily make an if statement.

itemTpl: Ext.create("Ext.XTemplate", {
// code here
}),
store....

The docs currently not loading on my Browser so this short sample. The best is look at the docs and write the XTemplate.

[bjornravers]

Thanks for the help!

So far I got this code. I have feat element in my store which can be true or false. But I dont know how the access the element.

// JavaScript Document
Ext.define('lists.view.PlacesList', {
    extend: 'Ext.List',
    xtype: 'placeslist',
       requires: [
		'lists.store.Places',
    ],
		
    config: {
		//fullscreen: true,
		
		
		store: 'Places',
		
		title: 'HiShanghai',
//	   itemTpl : new Ext.XTemplate(
//        '<tpl if="{feat} == true">',
//            '<img class="imglist" src="resources/icons/Icon.png" width="50" height="50"><h4>{firstName} {lastName}</h4> random random qkjdqzmz qnzdzmqkzd qndzefeenqm qsdnq zldkzqzmdnqmsdnqzdz  zmizdnqzmdkztrbm trjn',
//        '</tpl>',
//		'<tpl else>',
//        '<img class="imglist" src="resources/icons/Icon.png" width="120" height="120"><h4>{firstName} {lastName}</h4> random random qkjdqzmz qnzdzmqkzd qndzefeenqm qsdnq zldkzqzmdnqmsdnqzdz  zmizdnqzmdkztrbm trjn</tpl>',
//		
//        {
//           
//        }
//    )	
    }
});