面板的Sencha Touch 2水平滾動使其消失

我試圖在面板中顯示一些html（專輯），並且想要給它一個水平滾動。但它沒有顯示。它使我的面板消失。我花了幾個小時來修復它。請幫幫我。面板的Sencha Touch 2水平滾動使其消失

var panel = Ext.create('Ext.Panel', { 

     scrollable: { 
      direction: 'horizontal', 
      directionLock: true 
     }, 
     height:120, 
     html: '<h2>Photo Albums</h2><ul><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_40285.jpg" title="Cover Photos"></a><span>Cover Photos</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_40285.jpg" title="holilongnameofholitotesthere"></a><span>sample</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_251.jpg" title="Kerala"></a><span>Kerala</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_40285.jpg" title="Kerala"></a><span>Kerala</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_40285.jpg" title="Kerala"></a><span>444</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_40285.jpg" title="Kerala"></a><span>333</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_40285.jpg" title="Kerala"></a><span>222</span></li><li><a href="#" onclick=""><img src="http://assets.en.oreilly.com/1/eventprovider/1/[email protected]_102517.jpg" title="Kerala"></a><span>sample</span></li></ul>', 
     }); 
    // add the list as an item to the viewport 
    Ext.Viewport.add({ 
     layout: { 
      type: 'vbox', 
      pack: 'center' 
     }, 
     items: [panel 
     ] 
    });

來源

2012-09-08 Neha Jain

如果你正在嘗試創建一個水平列表，請參閱sencha中的水平列表示例 – blessenm

最簡單的方法是使用帶有一些額外CSS的Ext.List組件。

這裏是JavaScript（很簡單的列表數據）：

Ext.application({ 
    launch : function() { 
     Ext.Viewport.add({ 
      xtype: 'list', 
      data: [ 
       { name: 'one' }, 
       { name: 'two' }, 
       { name: 'three' }, 
       { name: 'four' }, 
       { name: 'five' } 
      ], 
      itemTpl: '{name}' 
     }); 
    } 
});

而且自定義CSS，這使得每一個項目內聯：

.x-list .x-list-inner { 
    width: auto; 
} 
.x-list-container { 
    white-space: nowrap; 
} 
.x-list-item { 
    display: inline-block; 
    width: 400px; 
}

你可以找到更多有關這個在這裏：http://www.sencha.com/forum/showthread.php?181298-Dataview-List-Horizontal-Scroll-Possible

來源

2012-09-11 22:27:44 rdougan

面板的Sencha Touch 2水平滾動使其消失

回答

相關問題