向面板添加旋转木马

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

我看到一些小问题。您在默认设置中缺少冒号：我认为您想将该ID移至您的某个轮播元素，对吗？通过你的代码，我只能得到一个页面，并在该层次上定义了id。如果你把它移下来，你会看到三页。

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

[更新]

我得到它的工作，所以，你可以写你的任何转盘板。我只是在参考文献{}中创建了对每个id的直接引用。我正在绘制到第二页，因此将其拖动到视图中以查看更新。

另外，我也加入模型，存储和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} 
      ] 
     } 
    } 
});