PDA

View Full Version : Ext.List or Ext.View of Flipping Items



Psharpe
23 Jul 2015, 7:06 AM
Hi,

Im new to Sencha and am wanting to try and create a list of Items loaded from a store (Got that bit working) that have a template (Got that partially working), so rather than showing in columns on a grid i want something like a list of Contact cards, 1 item with multiple fields.

Additionally I would like the cards to be able to flip and have some buttons on the reverse that perform actions. I have managed to get some of the way there which you can see by following the link below but have a couple of issues and questions with this.

https://jsfiddle.net/ma44531k/2/
(https://jsfiddle.net/ma44531k/2/)

Is this actually the right approach to this task? I have tried it with a Ext.List rather than a Ext.View as well.
How do I add functionality to the buttons if they are added via the HTML rather than ExtJs?
The template never expands to fill the row of the view or list, you can change the size via the CSS but that gets some straing results.

I hope im missing something obvious here, but any help would be greatly appreciated.

Thanks

mitchellsimoens
28 Jul 2015, 7:10 AM
First, you should try Sencha Fiddle (https://fiddle.sencha.com) instead of JSFiddle :)

Are you asking about modern or classic toolkit? I assume modern but not quite sure.

Next, Ext.dataview.List (for modern toolkit) is great for a vertical list of items. What you want is better suited for Ext.dataview.DataView (for modern tookit).

The same goes for classic toolkit, Ext.grid.Panel is great for a grid structure where Ext.view.View is better.

I'd just have some plain HTML and style them to my liking then on itemtap/itemclick event you can detect if the tap/click was within one of them using e.getTarget('.some selector')

Psharpe
28 Jul 2015, 11:20 PM
Hi mitchellsimoens, Thanks for the reply, I am using the modern toolkit your right.
I'd just have some plain HTML and style them to my liking then on itemtap/itemclick event you can detect if the tap/click was within one of them using e.getTarget('.some selector') I understand what your suggesting here what I dont understand is how i make that HTML section an item in a list of any of the types you suggested. My interpretation so far of the example and docs i have found refer to using the XTemplate and tpl or itemTpl properties to make the HTML the code for rendering the item. Where should the HTML for the item reside in order for the Ext.List or others to use it for the item rendering?

mitchellsimoens
29 Jul 2015, 4:57 AM
For Ext.dataview.List and Ext.dataview.DataView you'd use the itemTpl which will allow you to specify an XTemplate/String to specify the HTML structure of the individual list items. You'd then use CSS to style that HTML structure for the individual list items.