Sencha Carousel (Edit) satake.sus4 Follow 2010-07-27 19:05:00 License: GPLv3 License Fork1 Fav3 View5167 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 49 lines HTML 0 lines CSS 22 lines Sencha Carousel (Edit) Sench Touch Beta 0.91 Ext.setup({ //onReadyコンフィグ onReady: function() { var cards = []; for (var i = 0;i < 10; i ++) { cards.push({ html:'<p style="font-size:'+ i +'em">' + i +'</p>', title:i }); } // Create a Carousel of Items //カルーセルアイテム作る var carousel1 = new Ext.Carousel({ defaults: { cls: 'card' }, items:cards }); new Ext.Panel({ fullscreen: true, dockedItems:{ xtype:'toolbar', dock:'top', title:'Carousel', items:[ { text:'Start', handler:function(){ carousel1.layout.setActiveItem(0); } }, new Ext.Spacer(), { text:'End', handler:function(){ carousel1.layout.setActiveItem(cards.length-1); } } ] }, defaults: { //子となるパネル(2つのCarouselのレイアウト設定) flex: 1 }, items: [carousel1] }); } }); Sencha Carousel (Edit) Sench Touch Beta 0.91 body { } .card { text-align: center; color: #204167; text-shadow: #3F80CA 0 1px 0; font-size: 72px; padding: 80px 40px; } .x-phone .card { padding: 15px; font-size: 36px; } .card p { line-height: 30px; } .x-phone .card p { line-height: 18px; } Ext.setup({ //onReadyコンフィグ onReady: function() { var cards = []; for (var i = 0;i < 10; i ++) { cards.push({ html:'<p style="font-size:'+ i +'em">' + i +'</p>', title:i }); } // Create a Carousel of Items //カルーセルアイテム作る var carousel1 = new Ext.Carousel({ defaults: { cls: 'card' }, items:cards }); new Ext.Panel({ fullscreen: true, dockedItems:{ xtype:'toolbar', dock:'top', title:'Carousel', items:[ { text:'Start', handler:function(){ carousel1.layout.setActiveItem(0); } }, new Ext.Spacer(), { text:'End', handler:function(){ carousel1.layout.setActiveItem(cards.length-1); } } ] }, defaults: { //子となるパネル(2つのCarouselのレイアウト設定) flex: 1 }, items: [carousel1] }); } }); body { } .card { text-align: center; color: #204167; text-shadow: #3F80CA 0 1px 0; font-size: 72px; padding: 80px 40px; } .x-phone .card { padding: 15px; font-size: 36px; } .card p { line-height: 30px; } .x-phone .card p { line-height: 18px; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/czlu/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/satake.sus4/czlu" title="Sencha Carousel (Edit)">Sencha Carousel (Edit) - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags extjs sencha senchatouch Tweet twitter Tags extjs sencha senchatouch Favorite by y3i12 mau: SenchaTouch HapHands: SenchaTouch Forked sort new page view favorite forked forked: Sencha Carousel (Edit).. hayato 00 313views 50/1/22 extjs sencha senchatouch forked: Sencha Carousel (Edit).. rumblefishbo.. 00 109views 50/1/22 extjs sencha senchatouch forked: Sencha Carousel (Edit).. niwatori27 01 550views 50/1/22 extjs sencha senchatouch forked from: Sencha Carousel (.. muconalabs 00 196views 50/1/22 extjs sencha senchatouch 1 2NEXT>>