Sencha Touch - ネストされたリストの例を必要とする

Question

単純なネストされたリストビューの例が必要です。あなたがアイテムをクリックすると、あなたが一番上に「戻る」 - ボタンで、別のリストを含む次のビュー/カード（スライド）に移行します

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

本の線に沿って何か... -メニュー。そういうことなど。

リストには必ずしも3つのレベルの深さがあるわけではありません。たとえば、3つのサブアイテムを持つ1つのアイテムと、「最終的な」ビューに直接移動するアイテムが含まれています。

Answer 1

生のHTMLを使用して別の方法で行ってきました。

Answer 2

vimeoのSencha Touchビデオを調べる必要があります。

http://vimeo.com/20580117

Answer 3

行うことは本当に簡単です。ここにあなたの質問に答えるものです。ユーザーインターフェイスの例でKitchen Sinkの入れ子リストをチェックし、 "ソース"ボタンをクリックしてコードを参照してください。

Answer 4

以下のコードを試してみると、作成されたネストされたリストの基本機能を理解するのに役立ちます。あなたは簡単にhttp://dev.sencha.com/deploy/touch/docs/より多くの情報を見つけるのに役立ちますリンク後

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] 
    }); 
} 

}）

。

また、ダウンロードできるパッケージの例を探してください。

Answer 5

最初にPhoneGapを無視して、this tutorialにはほとんどのものが必要です。