If you use the Extjs Dataview Example, you will notice it is does not tell you how to do horizontal scrollbars. Nor does the documentation mention this. This actually requires some trickery as this is not currently supported.

After reading the thread “DataView help needed” and hacking, I came up with the following modification to the ExtJs Dataview example that does horizontal scrolling. Note, the height must be fixed and the width is set in code.

Ext.onReady(function(){

var xd = Ext.data;

var store = new Ext.data.JsonStore({
  url: 'get-images.php',
  root: 'images',
  fields: ['name', 'url', {name:'size', type: 'float'},
                   {name:'lastmod', type:'date', dateFormat:'timestamp'}]
  });
  store.load();

  var tpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="thumb-wrap" id="{name}">',
    '<div class="thumb"><img src="{url}" title="{name}"></div>',
    '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
  );

var panel = new Ext.Panel({
  id:'images-view',
  frame:true,
  width:535,
  autoHeight:true,
  autoScroll:true,
  collapsible:true,
  layout:'fit',
  title:'Simple DataView (0 items selected)',

  items: new Ext.DataView({
  id: 'my-data-view',
  store: store,
  tpl: tpl,
  width:2000,
  height:155,
  multiSelect: true,
  overClass:'x-view-over',
  itemSelector:'div.thumb-wrap',
  emptyText: 'No images to display',

  plugins: [
    new Ext.DataView.DragSelector(),
    new Ext.DataView.LabelEditor({dataIndex: 'name'})
  ],

  prepareData: function(data){
    data.shortName = Ext.util.Format.ellipsis(data.name, 15);
    data.sizeString = Ext.util.Format.fileSize(data.size);
    data.dateString = data.lastmod.format("m/d/Y g:i a");
    return data;
  },

  listeners: {
    selectionchange: {
    fn: function(dv,nodes){
      var l = nodes.length;
      var s = l != 1 ? 's' : '';
      panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
    }
  }
  }
  })
});
panel.render(document.body);
store.on('load', function(options){

  //note, here you should get the width from your object....
  // something like this.items[0].getWidth();
  // I am cheating and using a fixed width in mine
  image_width = 130;
  Ext.getCmp('my-data-view').setWidth(this.data.items.length * image_width) ;
})

});