1

第一个程序逻辑：

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

当用户触摸列表项时，右侧面板中会出现一些 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:panel ，我尝试修改该代码，并且这样做了

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

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

4

1 回答 1

0

我看到的几个小问题。您在默认值上缺少一个冒号：而且我认为您想将该 id 移动到您的轮播元素之一，对吗？使用您的代码，我只会得到一个在该级别定义的 id 页面。如果将其向下移动，您将看到三页。

默认值：{
   styleHtmlContent：真，  
   id:'mypanel' // 在错误的地方？
},

[更新]

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

此外，我正在添加模型、商店和 app.js，以便阅读本文的任何人都将拥有一个完整的工作示例。

Ext.define('MyApp.controller.MeniuController', {
    扩展：'Ext.app.Controller',
    配置：{
        参考：{
            leftMeniu:'我的面板列表[id=mylist]',
// myPanel:'mypanel 面板[id=mypanel]'
// myPanel:'mypanel carousel[id=mypanel]'
            myFirstPanel:'#mypanel1',
            我的第二面板：'#mypanel2'
        },
        控制：{
            左美牛：{
                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(内容);
    }
});

完成 MyPanel 视图：

Ext.define('MyApp.view.MyPanel', {
    扩展：'Ext.Panel'，
    xtype：'我的面板'，

    配置：{
        ui: '黑暗',
        布局： {
            类型：'卡'
        },
        项目： [
            {
                xtype: '标题栏',
                停靠：'顶部'，
                标题：'Lezzet Dunyasi'
            },
            {
                xtype：'列表'，
                停靠：'左'，
                id: '我的列表',
                ui: '圆形',
                pinHeaders：假，
// 分组：true,
                //disableSelection: true,
                宽度：331，
                项目Tpl：[
                    '{标签}'
                ],
                商店：'Menius'，
                项目： [
                    {
                        xtype: '搜索域',
                        停靠：'顶部'，
                        placeHolder: '搜索...'

                    }
                ]
            },
// {
// xtype: '面板',
// styleHtmlContent:true,
// 风格： {
// backgroundImage: 'url(../images/risk2.png)',
// backgroundRepeat: '不重复',
// 背景位置：'中心'
// },
// id:'我的面板'
// }
            {
                xtype: '轮播',

                默认值：{
                    样式HTML内容：真
                },

                项目： [
                    {
                        html: '项目 1',
                        样式：'背景颜色：#5E99CC'，
                        id:'mypanel1'

                    },
                    {
                        html: '项目 2',
                        样式：'背景颜色：#759E60'，
                          id:'mypanel2'
                    },
                    {
                        html: '项目 3'
                    }
                ]
            }
        ]
    }
});

应用程序.js

分机应用程序（{
    名称：“我的应用程序”，

    意见：['我的面板']，
    型号：['Meniu']，
    商店：['Menius']，
    控制器：['MeniuController']，
    启动：函数（）{

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

模型：

Ext.define('MyApp.model.Meniu', {
    扩展：'Ext.data.Model',

    配置：{
        字段：['img_url', 'label', 'html']
    }
});

店铺：

Ext.define('MyApp.store.Menius', {
    扩展：'Ext.data.TreeStore'，

    配置：{
        型号：'MyApp.model.Meniu',
        defaultRootProperty: '项目',
        石斑鱼：功能（记录）{
            返回记录.get('label')[0];
        },
        根： {
            文本：'foo'，
            项目： [

                {img_url：'foo.png'，标签：'一个'，html：'
好的
'，叶子：真}，
                {img_url：'foo.png'，标签：'两个'，html：'
旋转木马
'，叶：真}
            ]
        }
    }
});
于 2012-04-24T14:27:29.703 回答