3

パネルにカルーセルがあり、senchasdkを使用してアプリをビルドする前に表示されて正常に動作します。ただし、作成した後もカルーセルは正しく表示されますが、アイテム間をスワイプすることはできなくなります。

Ext.define('SycsApp.view.HotOffers', {
    extend: 'Ext.Panel',
    requires: ['Ext.carousel.Carousel', 'Ext.TitleBar'],

    config: {
            layout: 'card',
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    ui: 'top-sub',
                    title: 'Hot Offers',
                },
                {
                    id: 'hotOffersCarousel',
                    xtype: 'carousel',
                    width: '100%',
                    items: [
                        {
                            html : 'Item 1',
                            style: 'background-color: #5E99CC'
                        },
                        {
                            html : 'Item 2',
                            style: 'background-color: #759E60'
                        },
                        {
                            html : 'Item 3'
                        }
                    ]
                }
            ]
    }
});

レイアウトがカードに設定されている理由は、このビューが周囲のタブパネルの一部であるためです。ビルド後にアプリを実行しても、コンソールからエラーメッセージが表示されません。

なぜこれが起こる可能性があるのか​​についての助けをいただければ幸いです。

4

1 に答える 1

1

この問題は、メインカードビューに追加されていた方法が原因で発生しました。

Ext.define('SycsApp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'mainView',
requires:  ['SycsApp.view.HotOffers'],

config: {
    tabBarPosition: 'bottom',
    id: 'MainView',
    ui: 'bottom',
    layout: 'card',
    items: [
        {
            title: 'Hot Offers',
            layout: 'fit',
            iconCls: 'hotoffer',
            //items: [Ext.create('SycsApp.view.HotOffers')], // carousel doesn't work after build
            items:  [{xtype: 'hotOffersView'}] // carousel works after build
        },
        {
            title: 'All Savings',
            layout: 'fit',
            iconCls: 'list',
            items:  [{xtype: 'allSavingsMainView'}]
        }
    ]
}

}）;

ホットオファービューに追加するxtype: 'hotOffersView'必要があります。

Ext.define('SycsApp.view.HotOffers', {
    extend: 'Ext.Panel',
    xtype: 'hotOffersView',
    requires: ['Ext.carousel.Carousel', 'Ext.TitleBar'],

    config: {
            layout: 'card',
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    ui: 'top-sub',
                    title: 'Hot Offers',
                },
                {
                    id: 'hotOffersCarousel',
                    xtype: 'carousel',
                    width: '100%',
                    items: [
                        {
                            html : 'Item 1',
                            style: 'background-color: #5E99CC'
                        },
                        {
                            html : 'Item 2',
                            style: 'background-color: #759E60'
                        },
                        {
                            html : 'Item 3'
                        }
                    ]
                }
            ]
    }
});
于 2012-10-15T23:05:24.210 に答える