Sencha Touch 2でdataview.listを表示させるにはどうすればよいですか？

Question

A Sencha Touch初心者はこちらです。それは、私はゆっくりと最後の日かそこらで頭を抱えていたと言いました。私を狂ってしまう一つのことは、フォームパネルとリストが奇妙なレイアウトの理由で表示されないことです。なぜ私はうまくいかない。たとえば私は、次の検索ビューを持っている：

Ext.define('NC.view.Search', { 
    extend: 'Ext.dataview.List', 
    xtype: 'searchpage', 
    id: 'search-form', 

    config: { 
    title: 'Search', 
    layout: 'vbox', 
    itemTpl: '<div class="name">{name}</div>', 
    store: 'Recipes', 

    items: [ 
     { 
     xtype: 'toolbar', 
     docked: 'top', 

     items: [ 
      { xtype: 'spacer' }, 
      { 
      xtype: 'searchfield', 
      placeHolder: 'Search...' 
      }, 
      { xtype: 'spacer' } 
     ] 
     } 
    ] 
    } 
}) 

これは、タブパネルに座っている：これはドッキング検索バーまでトップで、素敵なレンダリングタブパネルで、その結果どのような

Ext.define('NC.view.Recipes', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'recipetabpanel', 

    config: { 
    title: 'Recipes', 
    tabBarPosition: 'bottom', 
    activeItem: 0, 

    items: [ 
     { 
     title: 'Recipes', 
     iconCls: 'bookmarks', 
     items: [ 
      { 
      xtype: 'searchpage' 
      } 
     ] 
     }, 
     { 
     title: 'Settings', 
     iconCls: 'settings', 
     html: 'Settings screen' 
     } 
    ] 
    } 
}) 

、リストアイテムは表示されません。リストパネルにいくつかの寸法を追加すると、

width: '100%', 
height: '200px', 

私のデータストアのリストアイテムが表示されます。しかし、それが消えてしまうので、私は100％に高さを置くことができません（CSSフォールト私の推測）。

したがって、リストを表示させ、検索バーとタブの間の領域を下にするには、レイアウトの階層や仕様が必要ですか？ありがとう！

Answer 1

リストとデータビューではデフォルトレイアウトが使用されるため、独自のvboxレイアウトを指定する必要はありません。リストからその設定を削除すると、その設定はうまくいくはずです。

編集：

[OK]を、私はあなたのアプリケーションを詳しく見てました。あなたはここにそれを見ることができます：http://www.senchafiddle.com/#zlT62（プレスはを実行します）。

問題は、タブパネルのレシピ項目（Recipes.js、15行目）にlayout: fitを含めていないという問題でした。

あなたが追加している新しいアイテムのサイズにストレッチを知っているように、フィットレイアウトが必要です。

しかし、追加しているアイテムの根本的な問題は、過度のネストです。あなたのコードを見てみましょう：

{ 
    title: 'Recipes', 
    iconCls: 'bookmarks', 
    layout: 'fit', 
    items: [ 
     { 
      xtype: 'searchpage' 
     } 
    ] 
} 

ここで何が起こっていることは、これは（title、iconClsなどで）新しいExt.Containerを作成し、作成したsearchpageコンポーネントを追加し、そのコンテナ内です。ここでは、外側のコンテナ（title）は、デフォルトでタブパネルの設定がlayout: 'card'であるため、コンテナのサイズ（タブパネル）に自動的に拡大されます。ここでの問題は、を別のコンポーネント（searchpage）と追加したコンテナ（titleのコンテナ）にレイアウト（コンテナ、タブパネルのみ）がないためですリスト（searchpage）はアイテムのサイズにストレッチすることを知らない。

これは、searchpageコンポーネントをタブパネルの子として挿入し、titleとiconClsとすることができるため、これはオーバーネストと呼ばれます。あなたははにやるべきことはこれです：

{ 
    title: 'Recipes', 
    iconCls: 'bookmarks', 
    xtype: 'searchpage' 
} 

あなたが見ることができるように、私はちょうど構成ブロックにXTYPEを移動していて、私たちが追加されている項目があるので、我々は、全項目の設定を削除することができます実際のsearchpageです。

そしてここでのコードへのリンクですが、固定：http://www.senchafiddle.com/#qXaQm

がうまくいけば、これは理にかなっています。レイアウトはSencha Touchでピックアップするのが難しい場合があります。また、Sencha Touch 2のドキュメントで、まだ読んでいない場合は、layout guideを読むことをお勧めします。とても役に立ちます。

Answer 2

Ext Listコンポーネントにはレイアウトは必要ありません。また、リストコンポーネントはコンテナではなく、独自の子を持つことのできないデータのビューです。したがって、そこにアイテムを追加することはできません。

だから、

1. は項目
2. を削除レイアウト
3. を削除するには、このリストに追加しているパネルのツールバーを追加します。
4. レイアウトを追加します。上記のパネルに 'フィット'

一覧：

Ext.define('NC.view.Search', { 
    extend: 'Ext.dataview.List', 
    xtype: 'searchpage', 
    id: 'search-form', 
    config: { 
    title: 'Search', 
    layout: 'vbox', 
    itemTpl: '<div class="name">{name}</div>', 
    store: 'Recipes' 
    } 
}); 

タブパネル：

Ext.define('NC.view.Recipes', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'recipetabpanel', 

    config: { 
    title: 'Recipes', 
    tabBarPosition: 'bottom', 
    activeItem: 0,  
    items: [{ 
     title: 'Recipes', 
     iconCls: 'bookmarks', 
     layout : 'fit', 
     items: [{ 
      xtype: 'toolbar', 
      docked: 'top', 
      items: [{ xtype: 'spacer' }, { 
       xtype: 'searchfield', 
       placeHolder: 'Search...' 
     }, 
     { xtype: 'spacer' } 
    ] 
    }, 
      { 
      xtype: 'searchpage' 
      } 
     ] 
     }, 
     { 
     title: 'Settings', 
     iconCls: 'settings', 
     html: 'Settings screen' 
     } 
    ] 
    } 
})