Sencha Touch “Ext.List” lists are nice and flexible but they have one fiddly problem. If you manually set the selected item in a list from a callback like so

card.on
        activeitemchange: (card, item, oldIndex)=>
          index = card.items.indexOf(item)
      
          # Change the list selection to reflect
          # the current card
          list.select(index)
      

where list is a currently defined Ext.List object then all works fine until you select an item that is not currently in the visible window. Grrrrrr it is not visible and there is no public API to help you keep it so.

For example my setup is a card layout on the right and a list on the left reflecting the current card.

Uploaded with Skitch!

To select a card you can either directly select an item from the list or proceed sequentially back and forth using the left and right arrow on top of the card…

Setting up a dencent workflow with sencha touch is not too complex especially if you pull out the ruby toolbelt. I’ll show you how to do it and add in coffeescript for a bonus…

I recently hit on the brilliant idea of using STI (single table inheritence), polymorphic classes, nested forms and has_one through models all at once just to prove how silly I am.

My use case is an asset manager backed by paperclip. I wanted all assets to go into a single S3 folder and be mananged by a single :assets table. Then I wanted any other model to be able to associate uploaded assets at any arity. Gumpf!