ext4中的view显示图片，如何做到横向显示?

改掉这里
var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;float:left;" class="thumb-wrap">', //增加float:left;
          '<img src="{src}" title="{caption}"/>',
          '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
);

解决方案 »

  1.   


    <!DOCTYPE html><html>
      <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
         <link rel="stylesheet" type="text/css" href="public/ext-4.2.1.883/resources/css/ext-all.css"/>
         <script type="text/javascript" src="public/ext-4.2.1.883/ext-all.js"></script>
          
      </head>
     <body>
    <script type="text/javascript">
    Ext.onReady(function(){
        
    Ext.define('Image', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'src', type:'string' },
            { name:'caption', type:'string' }
        ]
    });Ext.create('Ext.data.Store', {
        id:'imagesStore',
        model: 'Image',
        data: [
           { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'图1' },
            { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'图2' },
            { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'图3' },
            { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'图4' }
        ]
    });var imageTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="margin-bottom: 10px;float:left;" class="thumb-wrap">', //增加float:left;
              '<img src="{src}" title="{caption}"/>',
              '<br/><span>{caption}</span>',
            '</div>',
        '</tpl>'
    );var imageView = Ext.create('Ext.view.View', {
        store: Ext.data.StoreManager.lookup('imagesStore'),
        tpl: imageTpl,
        overCls: "x-view-over",
        overItemCls: "x-view-over",    
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images available'
    });        var panel = Ext.create("Ext.panel.Panel", 
           {
               id: 'images-view',
               frame: true,
               width: 1024,
               //autoHeight: true,
       height:700,
               collapsible: true,
               layout: 'fit',//是不是这里fit布局不对?
               items: imageView
           });
           
           panel.render(Ext.getBody());});
    </script>
    </body>
    </html>
      

  2.   

    多谢，可以了，你多改了一个地方：
    可以了，对比了下，你多改了一个地方：
                       //autoHeight: true,
                   height:700,
    另外还有点不大理解的是：为何自动高度无效，非改成固定高度呢?
      

  3.   

    另外还有点不大理解的是：为何自动高度无效，非改成固定高度呢?
    自动计算的问题,你可以确定高度以后自动宽度
    height:300,
    autoWidth: true,
      

  4.   

    浮动布局容器要清楚浮动容器才会占位，要给view容器增加style清除容器的浮动        var imageTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="margin-bottom: 10px;float:left" class="thumb-wrap">',
              '<img src="{src}" title="{caption}"/>',
              '<br/><span>{caption}</span>',
            '</div>',
        '</tpl>'
    );        var imageView = Ext.create('Ext.view.View', {
                store: Ext.data.StoreManager.lookup('imagesStore'),
                tpl: imageTpl,
                overCls: "x-view-over",
                overItemCls: "x-view-over",
                itemSelector: 'div.thumb-wrap',
                emptyText: 'No images available', style: 'overflow:auto;zoom:1;'
            });
      

  5.   

    加上这个，style: 'overflow:auto;zoom:1;'
    确实高可以不用设置了，学习了，什么都不说了，赞一个，