Сенча Прикоснись к `directionLock` - куда я иду не так? - PullRequest
Новая
       15

Сенча Прикоснись к `directionLock` - куда я иду не так?

1 голос
/ 14 февраля 2012

У меня определена карусель. 

Ext.define('rpc.view.bible.indexView', {    
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    direction: 'horizontal',
    directionLock: true,
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

и bible-_chapterADayView, и bible-_bibleInAYearView являются частичными представлениями, расширяющими Ext.Panel.

Они работают, как и ожидалось, однако проблема с прокруткой, с которой я столкнулся в этом отчете об ошибках , все еще существует, хотя я реализовал directionLock .

Где я ошибаюсь с моей реализацией directionLock?

Я также попробовал следующие два метода. 

Ext.define('rpc.view.bible.indexView', {    
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    config: {
        scrollable: {
            direction: 'horizontal',
            directionLock: true
        },
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

и 

Ext.define('rpc.view.bible.indexView', {    
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    scrollable: {
        direction: 'horizontal',
        directionLock: true
    },
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function() {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});

1 Ответ

1 голос
/ 14 февраля 2012

После длительного тестирования создается впечатление, что он работает правильно, если scrollable присоединен к частичному представлению, а не к карусели. 

Ext.define('rpc.view.bible.indexView', {
    extend: 'Ext.Carousel',
    alias: 'widget.bible-indexView',
    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Bible Reading Plan',
            docked: 'top'
        }, {
            xtype: 'bible-_chapterADayView'
        }, {
            xtype: 'bible-_bibleInAYearView'
        }]
    },
    initialize: function () {
        console.log('rpc.view.bible.indexView ~ initialize');
        this.callParent();
    }
});


Ext.define('rpc.view.bible._bibleInAYearView', {
    extend: 'Ext.Panel',
    alias: 'widget.bible-_bibleInAYearView',
    config: {

        // ADD THE SCROLLABLE INFO HERE TO ACHIEVE THE DESIRED RESULT
        scrollable: {
            direction: 'vertical',
            directionLock: true
        },


        items: [{
            html: '<span style="float:right;"><i>Swipe for Chapter a Day</i><div class="x-icon-swipe x-icon-swipe-right"></div></span>'
        }, {
            xtype: 'container',
            cls: 'x-panel-rpc',
            items: [{
                html: '<h1>Bible in a Year</h1><i>Reading Plan</i>'
            }]
        }, {
            xtype: 'container',
            cls: 'x-panel-rpc',
            items: [{
                html: 'Rockin the lower info panel<br><br><br><br><br><br><br><br>more info<br><br><br><br>end'
            }]
        }]
    },
    initialize: function () {
        console.log('rpc.view.bible._bibleInAYearView ~ initialize');
        this.callParent();
    }
});
...