Sencha Touch 2 — Карусель на панели с вкладками

Я хочу иметь представление, в котором 2 v-box находятся на двух разных вкладках. Мой код не показывает ошибки, но единственное, что отображается на панели с вкладками без вкладок. Вы можете видеть, что обучающая карусель частично отредактирована с некоторыми копиями того же класса, но игнорируйте это.

Ext.define("caryhartline.view.Carousel", {
    extend : 'Ext.tab.Panel',
    requires : ['Ext.carousel.Carousel'],
    config : [{
        tabBarPosition : 'top',
        items : [{
            title : 'Business',
            iconCls : 'action',
            layout : 'card',
            config : [{
                cls : 'cards',
                layout : {
                    type : 'vbox',
                    align : 'stretch'
                },
                defaults : {
                    flex : 1
                },
                items : [{
                            xtype : 'carousel',
                            items : [{
                                        html : '',
                                        cls : 'card businesstemplatepicture'
                                    }, {
                                        html : '',
                                        cls : 'card businesstemplatepicture'
                                    }]
                        }, {
                            xtype : 'carousel',
                            ui : 'light',
                            direction : 'vertical',
                            items : [{
                                        html : '',
                                        cls : 'card dark businesstemplate2picture'
                                    }, {
                                        html : 'And can also use <code>ui:light</code>.',
                                        cls : 'card dark'
                                    }, {
                                        html : 'Card #3',
                                        cls : 'card dark'
                                    }]
                        }]
            }]
        }]
    }, {
        title : 'Minimalist',
        iconCls : 'action',
        layout : 'card',
        config : {
            cls : 'cards',
            layout : {
                type : 'vbox',
                align : 'stretch'
            },
            defaults : {
                flex : 1
            },
            items : [{
                        xtype : 'carousel',
                        items : [{
                                    html : '',
                                    cls : 'card businesstemplatepicture'
                                }, {
                                    html : '',
                                    cls : 'card businesstemplatepicture'
                                }]
                    }, {
                        xtype : 'carousel',
                        ui : 'light',
                        direction : 'vertical',
                        items : [{
                                    html : '',
                                    cls : 'card dark businesstemplate2picture'
                                }, {
                                    html : 'And can also use <code>ui:light</code>.',
                                    cls : 'card dark'
                                }, {
                                    html : 'Card #3',
                                    cls : 'card dark'
                                }]
                    }]
        }
    }]
});

javascript carousel sencha-touch sencha-touch-2
person Cary Hartline    schedule 03.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

По какой-то причине размещение вещей внутри конфигурации вызывает проблему. Не уверен, что не так. Я думаю, когда мы не можем использовать вложенные конфиги в определении класса. Но это должно работать

Ext.define("App.view.Carousel", {
    extend : 'Ext.tab.Panel',
    requires : ['Ext.carousel.Carousel'],
    config : {
        tabBarPosition : 'top',
        items : [{
            title : 'Business',
            iconCls : 'action',
            cls : 'cards',
            layout : {
                type : 'vbox',
                align : 'stretch'
            },
            defaults : {
                flex : 1
            },
            items : [{
                xtype : 'carousel',
                items : [{
                    html : 'Test 1',
                    cls : 'card businesstemplatepicture'
                }, {
                    html : 'Test 2',
                    cls : 'card businesstemplatepicture'
                }]
            }, {
                xtype : 'carousel',
                ui : 'light',
                direction : 'vertical',
                items : [{
                    html : 'Test 3',
                    cls : 'card dark businesstemplate2picture'
                }, {
                    html : 'And can also use <code>ui:light</code>.',
                    cls : 'card dark'
                }, {
                    html : 'Card #3',
                    cls : 'card dark'
                }]
            }]
        }, {
            title : 'Minimalist',
            iconCls : 'action',
            xtype:'panel',            
            layout:'vbox',
            defaults:{
                flex:1
            },
            items:[{
                xtype : 'carousel',
                direction:'vertical',
                items:[
                    {
                        style:'background-color:blue;'
                    },
                    {
                        style:'background-color:red;'
                    }
                ]
            },{
                xtype : 'carousel',
                direction:'horizontal',
                items:[
                    {
                        style:'background-color:green;'
                    },
                    {
                        style:'background-color:orange;'
                    }
                ]
                }
            ]
        }]
    }
});
person blessenm    schedule 04.08.2012