Sencha Touch, есть карусель с текстовой (пустой) областью на той же панели?

Question

Совершенно новый для Sencha, и я стараюсь иметь карточку, где нижняя часть - это карусель, а поверх нее - открытая область, в которой будет обновляться текст в зависимости от того, какое изображение щелкнуто в карусели ниже. Любая идея, как я могу это сделать? Спасибо!

Answer 1

Я думаю, что это делает работу:

new Ext.Application({ 
    launch: function() { 

     // DATA 

     Ext.regModel('MenuItem', { 
      fields: ['id', 'name'] 
     }); 
     var menuItems = new Ext.data.Store({ 
      model: 'MenuItem', 
      data: [ 
       {id:1, name:'Page 1'}, 
       {id:2, name:'Page 2'}, 
       {id:3, name:'Page 3'}, 
       {id:4, name:'Page 4'}, 
       {id:5, name:'Page 5'} 
      ] 
     }); 


     Ext.regModel('PictureItem', { 
      fields: ['id', 'url'] 
     }); 
     var pictureItems = new Ext.data.Store({ 
      model: 'PictureItem', 
      data: [ 
       {id:1, url:'http://farm4.static.flickr.com/3154/2370778225_f448a2d5a4.jpg'}, 
       {id:2, url:'http://farm1.static.flickr.com/3560/3363355104_b0175610d9.jpg'}, 
       {id:3, url:'http://farm4.static.flickr.com/3092/2869861643_cdc051b5b3.jpg'}, 
       {id:4, url:'http://farm4.static.flickr.com/3448/3252866261_7eb3d01114.jpg'}, 
       {id:5, url:'http://farm3.static.flickr.com/2303/2508275237_5ecf4b3532.jpg'}, 
       {id:6, url:'http://farm4.static.flickr.com/3154/2370778225_f448a2d5a4.jpg'}, 
       {id:7, url:'http://farm1.static.flickr.com/3560/3363355104_b0175610d9.jpg'}, 
       {id:8, url:'http://farm4.static.flickr.com/3092/2869861643_cdc051b5b3.jpg'}, 
       {id:9, url:'http://farm4.static.flickr.com/3448/3252866261_7eb3d01114.jpg'}, 
      ] 
     }); 


     // UI 

     var topBar = new Ext.Toolbar({ 
      dock: 'top', 
      title: 'Ryan\'s layout', 
      items: [ 
       {text: 'Button 1'}, 
       {text: 'Button 2'} 
      ] 
     }); 

     var leftList = new Ext.List({ 
      dock: 'left', 
      width: 135, 
      itemTpl: '{name}', 
      singleSelect: true, 
      store: menuItems, 
      listeners:{ 
       selectionchange: function (model, records) { 
        if (records[0]) { 
         viewport.update(records[0]); 
        } 
       } 
      } 

     }); 

     var pictureBar = new Ext.Toolbar({ 
      dock: 'bottom', 
      layout: 'hbox', 
      scroll: 'horizontal', 
      height: 100, 
      defaults: { 
       cls: 'pic', 
       height: 80, 
       width: 120, 
      }, 
     }); 

     var viewport = new Ext.Panel({ 
      fullscreen: true, 
      dockedItems: [topBar, pictureBar, leftList], 
      tpl:'<tpl for=".">{store.model.modelName} {data.id}</tpl>' 
     }); 


     // BIND IMAGE STORE TO TOOLBAR 

     pictureItems.each(function (pictureItem) { 
      pictureBar.add(new Ext.Button({ 
       style:{background: 'url(http://i.tinysrc.mobi/120/80/' + pictureItem.data.url + ')'}, 
       listeners:{ 
        tap: function() { 
         viewport.update(pictureItem); 
        } 
       } 
      })); 
     }); 
     pictureBar.doLayout(); 

    } 
}); 

и производит UI что-то вроде: http://cl.ly/3vLZ