Extjs 将旋转木马添加到面板

第一程序逻辑：

我有一个主面板，左侧有一个列表，右侧有另一个面板

当用户触摸列表项时，一些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'
                }
            ]
        }

        });

我还使用一个控制器

    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 );
}

---

虽然这些修改我无法运行我的代码，但我应该怎么做？

我看到了一些小问题。默认设置中缺少冒号：我认为您希望将该id移动到一个carousel元素，对吗？使用您的代码，我只得到一个在该级别定义了id的页面。如果你向下移动，你会看到三页

defaults: { styleHtmlContent:true, id:'mypanel' // IN WRONG PLACE? }, 默认值：{ styleHtmlContent:对， id:'mypanel'//位置错误？ }, [更新]

我让它工作，这样你就可以写你的任何转盘面板。我刚刚在refs:{}部分中创建了对每个id的直接引用。我正在绘制到第二页，所以将其拖到视图中以查看更新

此外，我还添加了model、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); } }); Ext.define（'MyApp.controller.MeniuController'{ 扩展：'Ext.app.Controller'， 配置：{ 参考文献：{ leftMeniu:“我的面板列表[id=mylist]”， //myPanel:'myPanel panel[id=myPanel]' //myPanel:'myPanel转盘[id=myPanel]' myFirstPanel:“#mypanel1”， mySecondPanel:“#mypanel2” }, 控制：{ leftMeniu：{ itemtap:'onItemTap' } } }, onItemTap：函数（列表、索引、项、记录、e、选项）{ var content=''+record.get（'label'）+''+record.get（'html'）； this.getMySecondPanel（）.setHtml（内容）； this.getMyFirstPanel（）.setHtml（内容）； } }); 完整的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' } ] } ] } }); Ext.define（'MyApp.view.MyPanel'{ 扩展：“Ext.Panel”， xtype:'mypanel'， 配置：{ ui:“黑暗”， 布局：{ 类型：“卡片” }, 项目：[ { xtype:'标题栏'， 停靠：“顶部”， 标题：“Lezzet Dunyasi” }, { xtype:'列表'， 停靠：“左”， id:“mylist”， ui:“圆形”， pinHeaders:false， //对,， //disableSelection:正确， 宽度：331， 第三方物流：[ “{label}” ], 商店：“梅尼厄斯”， 项目：[ { xtype:“搜索字段”， 停靠：“顶部”， 占位符：“搜索…” } ] }, // { //xtype:'面板'， //styleHtmlContent:对， //风格：{ //背景图片：“url（../images/risk2.png）”， //背景重复：“不重复”， //背景位置：“中心” // }, //id:'mypanel' // } { xtype:'旋转木马'， 默认值：{ styleHtmlContent：true }, 项目：[ { html:“项目1”， 样式：“背景色：#5E99CC”， id:'mypanel1' }, { html:'项目2'， 样式：“背景色：#759E60”， id:'mypanel2' }, { html:“项目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')); } }); 外部应用程序({ 名称：“MyApp”， 视图：['MyPanel']， 型号：['Meniu']， 商店：[“梅尼厄斯”]， 控制器：['MeniuController']， 启动：函数（）{ 添加（Ext.create（'MyApp.view.MyPanel'）； } }); 型号：

Ext.define('MyApp.model.Meniu', { extend: 'Ext.data.Model', config: { fields: ['img_url', 'label', 'html'] } }); Ext.define（'MyApp.model.Meniu'{ 扩展：“Ext.data.Model”， 配置：{ 字段：['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} ] } } }); Ext.define（'MyApp.store.Menius'{ 扩展：“Ext.data.TreeStore”， 配置：{ 模型：“MyApp.model.Meniu”， defaultRootProperty:“项”， grouper:函数（记录）{ 返回记录.get（'label'）[0]； }, 根目录：{ 文本：“foo”， 项目：[ {img_url:'foo.png'，标签：'one'，html:'nice

'，leaf:true}， {img_url:'foo.png'，标签：'two'，html:'p>carousels

'，leaf:true} ] } } });

---

我应该在视图的末尾添加旋转木马部分而不是面板，我理解你的意思吗？我也根据你的回复修改了我的代码，但是我的浏览器里什么都没有，所以我把它放进了SenchaFIDLE，你能检查一下并说什么是我的错吗？谢谢你的关心。你可以到我的{carousel}来替换你的面板。你是否也转到了传送带的第2页？你看到3页的点了吗？我写信给它：this.getMySecondPanel（）.setHtml（content）。。。我刚刚更新了我的代码，以包含完整的MyPanel视图。将我的控制器更改为写入旋转木马中的两个面板，因此运行代码的任何人都会发生明显的事情。Thx伙计，它就像一个符咒，如果你住在土耳其安卡拉，我会给你买礼物，你的帮助将使我在课程中免于失败：D 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} ] } } });