title: Adding carousel to panel
body: <p>First program logic:</p>
  
  <p>I have a main panel and there is a list at the left side and another panel at the right side.</p>
  
  <p>When user touches the list item some html appears in right panel. What i need to do is using carousel instead of right panel. </p>
  
  <p>My view </p>
  
  <pre><code>   Ext.define('MyApp.view.MyPanel', {   
  extend: 'Ext.Panel',
  xtype:'mypanel',
  
  config: {
      ui: 'dark',
      layout: {
          type: 'card'
      },
      items: [
          {
              xtype: 'titlebar',
              docked: 'top',
              title: 'Lezzet Dunyasi',    
          },
          {
              xtype: 'list',
              docked: 'left',
              id: 'mylist',
              ui: 'round',                
              pinHeaders: false,
              grouped: true,
              //disableSelection: true,
              width: 331,
              itemTpl: [
                  '&lt;img src="{img_url}" width="60" heigh="60"&gt;&lt;/img&gt;&lt;span&gt;{label}&lt;/span&gt;'
              ],
              store: 'Menius',
              items: [
                  {
                      xtype: 'searchfield',
                      docked: 'top',
                      placeHolder: 'Search...',
  
                  },
              ]
                  },
                  {
                  xtype: 'panel',
                  styleHtmlContent:true,
                  style: {
                  backgroundImage: 'url(resources/img/Landscape.png)',
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center'
                  },
                  id:'mypanel'
                  }
              ]
          }
  
          });
  </code></pre>
  
  <p>As you can see there is a xtype:panel and i tried to modify that code and i did it like this </p>
  
  <pre><code>     xtype: 'carousel',
  
                  defaults{
                  styleHtmlContent:true,  
                  id:'mypanel'},
  
                  items: [
                  {
                  html : 'Item 1',
                  style: 'background-color: #5E99CC'
                  },
                  {
                  html : 'Item 2',
                  style: 'background-color: #759E60'
                  },
                  {
                  html : 'Item 3'
                  }
              ]
  </code></pre>
  
  <p>Also i use a controller </p>
  
  <pre><code>    Ext.define('MyApp.controller.MeniuController',{
  extend:'Ext.app.Controller',
  config:{
      refs:{
          leftMeniu:'mypanel list[id=mylist]',
          myPanel:'mypanel panel[id=mypanel]'
      },
      control:{
          leftMeniu:{
              itemtap:'onItemTap'
          }
      }
  },
  
  onItemTap:function(list, index, item, record, e , opts)
  {
      var content = '&lt;h2&gt;' + record.get('label') +'&lt;/h2&gt;' + record.get('html');
      this.getMyPanel().setHtml( content );
  }
  </code></pre>
  
  <p>});</p>
  
  <p>And i modified this part  like this</p>
  
  <pre><code>    refs:{
          leftMeniu:'mypanel list[id=mylist]',
          myPanel:'mypanel carousel[id=mypanel]'
  </code></pre>
  
  <p>Although these modifications i can't run my code , what  should i do ?</p>