面板的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水平滚动使其消失

回答

相关问题