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?
},

[UPDATE]

我让它工作，以便你可以写任何你的轮播面板。我刚刚在refs：{}部分创建了对每个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}
            ]
        }
    }
});

将轮播添加到面板

1 个答案: