Sencha Touch `directionLock` - 我哪里出错了？

Posted 2023-02-25

【中文标题】Sencha Touch `directionLock` - 我哪里出错了？

【英文标题】：Sencha Touch `directionLock` - where am I going wrong?

【发布时间】：2012-02-14 06:39:13

【问题描述】：

我已经定义了一个轮播。

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，我在this bug report 中遇到的滚动问题仍然存在。

我的 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】：

经过多次测试，如果scrollable 附加到partialView 而不是轮播，则似乎可以正常工作。

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();
    
);

【讨论】：

directionLock 配置应始终位于最里面的轮播。它基本上告诉框架内部可滚动区域优先于最外面的区域。

而且仅供参考，当使用 Ext.define 创建新类时，所有配置应该在 config: 块内。总是。如果您使用 Ext.create 或通过将对象传递给 .add() 创建实例，则无需将配置放入 config 块中。

@rdougan，所以 all 配置也意味着 extend、alias 和 initialize？

只有配置应该放在该块内。 xtype、alias、extend 和 requires 等属性以及 initialize 等所有方法都应该在外部。