2012-02-28 9 views
0

現在、Sencha Touch Carouselと連携しており、問題が発生しています。 3枚以上のカード/画像を表示する簡単な方法はありませんでした(デフォルトオプション)。コードは次のようになります。カードの量を変更する(Sencha Touch Carousel)

var gallery = new Ext.Carousel({ 
cls: 'galleryimage', 
xtype: 'carousel', 
height: '60px', 
width: '65px', 
items: [{ 
    html: '<img src="static/images/gallery/ex2.jpg" />', 
    cls: 'image', 
}, 
{ 
    html: '<img src="static/images/gallery/ex2_2.jpg" />', 
    cls: 'image', 
}, 
{ 
    html: '<img src="static/images/gallery/ex2_3.jpg" />', 
    cls: 'image', 
}, 
{ 
    html: '<img src="static/images/gallery/ex2_4.jpg" />', 
    cls: 'image', 
}, 
{ 
    html: '<img src="static/images/gallery/ex2_5.jpg" />', 
    cls: 'image', 
}] 

});

私は多くの人がそれをしたいと思っているので、それが明確に文書化されていないのはかなり気になります。他の.scssファイルを変更することなく、本当に簡単な方法を持っている人がいることを願っています。

/* EDIT */

を追加しましたそれにこのコード:

ここ
var gallerypanel = new Ext.Panel({ 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     defaults: { 
      flex: 1 
     }, 
     items: [gallery] 
    }); 

答えて

0

4枚のカードで、あなたが、実施例を行く:

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady: function() { 
     // Create a Carousel of Items 
     var carousel1 = new Ext.Carousel({ 
      defaults: { 
       cls: 'card' 
      }, 
      items: [ 
      { 
       title: 'Tab 1', 
       html: '1' 
      }, 
      { 
       title: 'Tab 2', 
       html: '2' 
      }, 
      { 
       title: 'Tab 3', 
       html: '3' 
      }, 
      { 
       title: 'Tab 4', 
       html: '4' 
      }] 
     }); 


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

はそれが

+0

を役に立てば幸いコードに「新しいExt.Panel」ブロックを追加しましたが、それはまったく役に立ちませんでした。以前のように3枚の写真があります。これはあなたのコードに似ていますが、フルスクリーン以外はtrueです。 – hardcoder

+0

この問題について進歩しましたか? –

関連する問題