Full code given at the end of post works.

But when I change


Code:



items      : [cardsList, card]

to


Code:



items      : [cardsList, img]

then I get error from the title.

So basically I have to put Ext.Img inside Ext.Container

Code:



Ext.setup({  
  
  onReady          : function() {
    
    //CONFIGURE DATA STORE.=====================================
    
    //REGISTER DATA MODEL.
    Ext.regModel(  
      'cardsModel',                      //Model  name 
      { fields     : ['name', 'path'] }  //Column names
    );        
    
    //CREATE READER. JSON TYPE.
    var cardsReader  = Ext.create("Ext.data.reader.Json", {
      rootProperty : "cards"  
    });    
    
    //CREATE PROXY.
    var peopleProxy  = Ext.create("Ext.data.proxy.Ajax", {
      url          : "cards.json",
      reader       : cardsReader   
    });        
          
    //CREATE DATA STORE.
    var cardsStore = new Ext.data.Store({
      model        : 'cardsModel',          
      proxy        : peopleProxy,
      autoLoad     : true               
    });
    
    //CONFIGURE VIEWS.===========================================
    
    //CREATE CARD VIEW.------------------------------------------
    var img = Ext.create('Ext.Img', {
      src        : 'IMAGES/GROUP 1/BLACK GIANT.png',
      listeners  : {
        tap      : function (list, index, item, record) {
          view.setActiveItem(0);     
        }
      }            
    });
    
    var card = Ext.create('Ext.Container', {
      layout     : 'fit',
      title      : 'CARD',
      items      : [img]
    });
  
    //CREATE LIST VIEW.------------------------------------------
    var cardsList = Ext.create('Ext.dataview.List', {
      
      //PROPERTIES
      title      : 'SELECT CARD',
      itemTpl    : '{name}',
      store      : cardsStore,
      
      //LISTENERS
      listeners  : {
        select   : function (list, index, item, record) {         
          var name = index.data.name;
          var path = index.data.path;
          img.setSrc('IMAGES/' + path + '/' + name + '.png');
          view.setActiveItem(1);     
        }
      }                  
    
    });
    
    //CREATE CARD LAYOUT CONTAINER TO HOLD THE ABOVE VIEWS.-------
    var view = Ext.create('Ext.Container', {
      fullscreen : true,
      layout     : 'card',
      items      : [cardsList, card]
    });   
    
  }


});