Sencha Touch - En la necesidad de una lista anidada ejemplo

Question

Necesito un simple ejemplo anidado de vista de lista. Algo a lo largo de las líneas de este ...

http://www.roosteronacid.com/mockup.png

Al hacer clic en un elemento, se hará la transición (diapositiva) a la siguiente vista/tarjeta que contiene otra lista, con un botón "atrás" en la parte superior -menú. Y así sucesivamente y así sucesivamente.

Las listas no necesariamente tienen tres niveles de profundidad. Me gustaría un ejemplo que incluya, por ejemplo, un elemento con tres subelementos y un elemento que lo lleve directamente a la vista "final".

Answer 1

Fui con un enfoque diferente, usando HTML sin procesar.

Answer 2

debe mirar los videos sencha touch en vimeo. aquí es uno que responda a su pregunta:

http://vimeo.com/20580117

Answer 3

Eso es muy fácil de hacer. Consulte la Lista anidada en el Kitchen Sink debajo de los ejemplos de la interfaz de usuario y haga clic en el botón "Fuente" para ver el código ...

Answer 4

Pruebe el siguiente código que le ayudará a comprender la funcionalidad básica de crear una lista anidada utilizando sencha touch.

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady: function() { 

    var data = { 
     text: 'Groceries', 
     items: [{ 
      text: 'Drinks', 
      items: [{ 
       text: 'Water', 
       items: [{ 
        text: 'Sparkling', 
        leaf: true 
       },{ 
        text: 'Still', 
        leaf: true 
      }] 
      }, { 
       text: 'Coffee', 
       leaf: true 
      }, { 
       text: 'Espresso', 
       leaf: true 
      }, { 
       text: 'Redbull', 
       leaf: true 
      }, { 
       text: 'Coke', 
       leaf: true 
      }, { 
       text: 'Diet Coke', 
       leaf: true 
      }] 
     },{ 
     text: 'Fruit', 
     items: [{ 
      text: 'Bananas', 
      leaf: true 
     },{ 
      text: 'Lemon', 
      leaf: true 
     }] 
     },{ 
      text: 'Snacks', 
      items: [{ 
       text: 'Nuts', 
       leaf: true 
     },{ 
      text: 'Pretzels', 
      leaf: true 
     },{ 
      text: 'Wasabi Peas', 
      leaf: true 
     }] 
    },{ 
     text: 'Empty Category', 
     items: [] 
    }] 
}; 

    Ext.regModel('ListItem', { 
     fields: [{name: 'text', type: 'string'}] 
    }); 

    var store = new Ext.data.TreeStore({ 
     model: 'ListItem', 
     root: data, 
     proxy: { 
      type: 'ajax', 
      reader: { 
       type: 'tree', 
       root: 'items' 
      } 
     } 
    }); 

    var leftNav = new Ext.NestedList({ 
     dock: 'left', 
     useTitleAsBackText: true, 
      title: '', 
      displayField: 'text', 
      width: '350', 
      store: store  
    }); 

    new Ext.Panel({ 
     fullscreen: true, 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     defaults: { 
      flex: 1 
     }, 
     dockedItems:[leftNav] 
    }); 
} 

})

siguiente enlace le ayudará a encontrar más información fácilmente http://dev.sencha.com/deploy/touch/docs/.

También busque ejemplos en el paquete descargable sencha touch.

Answer 5

Ignorando las cosas de PhoneGap al principio, this tutorial tiene casi todo lo que necesita.