sencha horizontal scroll with a list

Question

I am trying follow the list-horizontal example given by Sencha. I am getting a message saying ( The base layout for a DataView must always be a Fit Layout ) In the example it is not a fit layout. Could someone please tell me what I am missing here. Thanks Jim

  Ext.define( 'Styles.view.Beginning', { 
    extend: 'Ext.List',
    xtype: 'beginninglist',

    config: {
     title:'Beginning',
     iconCls: 'star',


 layout:{
     type:'vbox',
     pack: 'center'
 },
   items:[

    {

      //give it an xtype of list for the list component
                xtype: 'dataview',
                height: 250,


                scrollable: 'horizontal',
                directionLock: true,
                inline: {
                    wrap: false
                },


                //set the itemtpl to show the fields for the store
                itemTpl: '{name} {image}',


                //bind the store to this list
                 store: 'Beginning'

    }

     ]

   }
  });

Answer 1

First of all, you need to learn Sencha layouting. You can refere here. You were creating a List and then trying to put Dataview inside that. So if you need Dataview, directly extend Dataview like below:

Ext.define('Styles.view.Beginning', {
        extend: 'Ext.dataview.DataView',
        xtype: 'beginninglist',
        config: {
            inline: {
                wrap: false
            },
            scrollable: {
                direction: 'horizontal'
            },

            //set the itemtpl to show the fields for the store
            itemTpl: '{name} {image}',

            //bind the store to this list
            store: 'Beginning'
        }
    });