Sencha Inc. | HTML5 Apps

Intro to the List Component

Published Jan 27, 2011 | Drew Neil | Screencast | Easy
Last Updated Jan 12, 2012

This Screencast is most relevant to Sencha Touch, 1.x.

Duration: 10:48

This screencast describes the basics of the List component in Sencha Touch.
Share this post:
Leave a reply

Written by Drew Neil

15 Comments

Danny

3 years ago

I’ve checked out the GIT project for this, but have found that it does not work as demonstrated. Clicking on a list item does nothing, ie. the onItemDisclosure function does not appear to be called. If I call it from the console I get the desired effect. Is this a known issue? I have tried with both Safari 5.0.4 and Chrome 12.

Martial

3 years ago

I’d love to meet some of the contacts on that list. Namely Pussy Galore and Holly Goodhead…

Salim

3 years ago

Hi! When i press an item on my list, the backround of this specific item change to appear as selected, when i press on a button item (onItemDisclosure link), it takes me to the required page with the correct information. What i noticed is, no matter what is the element i’ve selected, when i press on another item button of my list and then come back to the list the selected element is still the first pressed and not the one i’ve just seen the description. My question is, how to make the last pressed list element appear as selected when i come back to the front page by clicking the back button?

gardenofwine

3 years ago

add an ‘itemtap’ to a ‘listeners’ key in the Ext.List parameter object (see below)

ListDemo.listPanel = new Ext.List({
.
.
listeners:{
  itemtap: function( that, index, item, e) {
  var record = that.store.getAt(index);
      }
    },
.
.
}

(taken from here:
http://stackoverflow.com/questions/6318382/sencha-touch-itemtap
)

David Hancock

3 years ago

Lest anybody think the list is inappropriate, the two names mentioned are from Ian Fleming James Bond novels.

John Doe

3 years ago

error when you click on a Contact.

Uncaught TypeError: Cannot read property ‘isComponent’ of undefined
sencha-touch.js:6

Martialen

3 years ago

David, the names definitely kept me engaged in the screencast. I think they’re very very appropriate and wish you had left the source a mystery for those who didn’t already know. : D

Boris

3 years ago

Love Pussy Galore entry in a list ! smile

Gayathri.B.S

3 years ago

In store is there any possibility to have data as object for list?

Kartik

3 years ago

I am getting 1 error which is already posted by “John Doe” 2 weeks ago from now

error when you click on a Contact detailed icon.

Uncaught TypeError: Cannot read property ‘isComponent’ of undefined
sencha-touch.js:6

Herbert DBA

3 years ago

There is no styles.css in version 1.1.0.

Is there an alternative file that I should be using?

Thanks.

Herb

Herbert DBA

3 years ago

Sorry - I see it on github

Philip Murphy

3 years ago

In the demo, Drew mentions that the group marker sticks at the top of the screen as you scroll downwards. This does not appear to work for Android. Is that because this is an iPhone-like behaviour, or is this a defect? BTW, it works correctly if I bring up the app in my Chrome browser. If it is a defect will it be fixed for Sencha 2?

Philip Murphy

3 years ago

I should really read the documentation first - just found this in the Ext.List documentation: http://dev.sencha.com/deploy/touch/docs/source/List.html#cfg-Ext.List-grouped

/**
    * @cfg {Boolean} pinHeaders
    * Whether or not to pin headers on top of item groups while scrolling for an iPhone native list experience.
    * Defaults to false on Android and Blackberry (for performance reasons)
    * Defaults to true on other devices.
    */
  pinHeaders: Ext.is.iOS || Ext.is.Desktop

As the source code comment states that this is to do with performance, I guess that this will not be a problem in the upcoming release (as performance is one of the main issues addressed). Adding the following to the Ext.List in index.js will allow you to see this behaviour: pinHeaders: true - BTW, I’m on Android Gingerbread and at least for this simple demo they perform well.

Kaan

3 years ago

Leave a comment:

Commenting is not available in this channel entry.