Добавление карусельного на панели

Question

Первая программа логики:

У меня есть главная панель и есть список на левой стороне, а другая панель с правой стороны.

Когда пользователь прикасается к элементу списка, на правой панели появляется какой-то html. Что мне нужно сделать, это использовать карусель вместо правой панели.

Мой взгляд

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: [ 
       '<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>' 
      ], 
      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' 
       } 
      ] 
     } 

     }); 

Как вы можете видеть, что есть xtype: панель и я попытался изменить этот код и я сделал это, как этот

 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' 
       } 
      ] 

Также я использую контроллер

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 = '<h2>' + record.get('label') +'</h2>' + record.get('html'); 
    this.getMyPanel().setHtml(content); 
} 

});

И я изменил эту часть, как этот

refs:{ 
     leftMeniu:'mypanel list[id=mylist]', 
     myPanel:'mypanel carousel[id=mypanel]' 

Хотя эти изменения я не могу запустить мой код, что я должен делать?

Answer 1

Несколько небольших проблем, которые я вижу. Вам не хватает двоеточия по умолчанию: И я думаю, вы хотите переместить этот идентификатор на один из ваших элементов карусели, верно? С вашим кодом я получаю только одну страницу с идентификатором, определенным на этом уровне. Если вы переместите его вниз, вы увидите три страницы.

 
defaults: { 
    styleHtmlContent:true, 
    id:'mypanel' // IN WRONG PLACE? 
}, 

[UPDATE]

Я получил это работает, так что вы можете написать любой из ваших карусельных панелей. Я просто создал прямую ссылку на каждый идентификатор в секции ref: {}. Я рисую на вторую страницу, чтобы перетащить ее на просмотр, чтобы увидеть обновления.

Кроме того, я добавляю модель, store и app.js, чтобы каждый, кто читает это, будет иметь полный рабочий пример.

 
Ext.define('MyApp.controller.MeniuController', { 
    extend:'Ext.app.Controller', 
    config:{ 
     refs:{ 
      leftMeniu:'mypanel list[id=mylist]', 
//   myPanel:'mypanel panel[id=mypanel]' 
//   myPanel:'mypanel carousel[id=mypanel]' 
      myFirstPanel:'#mypanel1', 
      mySecondPanel:'#mypanel2' 
     }, 
     control:{ 
      leftMeniu:{ 
       itemtap:'onItemTap' 
      } 
     } 
    }, 

    onItemTap:function(list, index, item, record, e, opts) { 
     var content = '<h2>' + record.get('label') + '</h2>' + record.get('html'); 
     this.getMySecondPanel().setHtml(content); 
     this.getMyFirstPanel().setHtml(content); 
    } 
}); 

Полный MyPanel Вид:

 
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: [ 
        '{label}' 
       ], 
       store: 'Menius', 
       items: [ 
        { 
         xtype: 'searchfield', 
         docked: 'top', 
         placeHolder: 'Search...' 

        } 
       ] 
      }, 
//   { 
//    xtype: 'panel', 
//    styleHtmlContent:true, 
//    style: { 
//     backgroundImage: 'url(../images/risk2.png)', 
//     backgroundRepeat: 'no-repeat', 
//     backgroundPosition: 'center' 
//    }, 
//    id:'mypanel' 
//   } 
      { 
       xtype: 'carousel', 

       defaults: { 
        styleHtmlContent:true 
       }, 

       items: [ 
        { 
         html: 'Item 1', 
         style: 'background-color: #5E99CC', 
         id:'mypanel1' 

        }, 
        { 
         html: 'Item 2', 
         style: 'background-color: #759E60', 
          id:'mypanel2' 
        }, 
        { 
         html: 'Item 3' 
        } 
       ] 
      } 
     ] 
    } 
}); 

app.js

 
Ext.application({ 
    name: "MyApp", 

    views: ['MyPanel'], 
    models: ['Meniu'], 
    stores: ['Menius'], 
    controllers: ['MeniuController'], 
    launch: function() { 

     Ext.Viewport.add(Ext.create('MyApp.view.MyPanel')); 
    } 
}); 

Модель:

 
Ext.define('MyApp.model.Meniu', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: ['img_url', 'label', 'html'] 
    } 
}); 

Магазин:

 
Ext.define('MyApp.store.Menius', { 
    extend: 'Ext.data.TreeStore', 

    config: { 
     model: 'MyApp.model.Meniu', 
     defaultRootProperty: 'items', 
     grouper: function(record) { 
      return record.get('label')[0]; 
     }, 
     root: { 
      text: 'foo', 
      items: [ 

       {img_url: 'foo.png', label: 'one', html:'
nice
', leaf: true}, 
       {img_url: 'foo.png', label: 'two', html:'
carousels
', leaf: true} 
      ] 
     } 
    } 
});