Sencha Touch 2：应用程序构建后面板不会滚动

Posted 2023-02-26

【中文标题】Sencha Touch 2：应用程序构建后面板不会滚动

【英文标题】：Sencha Touch 2: panel won't scroll after app build

【发布时间】：2015-02-22 20:34:32

【问题描述】：

我有一个 Sencha Touch 应用程序，它由一个带有多个页面的标签栏布局组成，其中一个页面是列表视图，一个是“详细视图”，基本上是一个面板。

运行“sencha app build”后面板不会滚动。除了面板不再滚动之外，生成的构建包工作正常。

我在 OS X Yosemite 上使用 Sencha Touch 2.4.1 和 Sencha Cmd v5.1.1.39。

应用的演示在这里：http://simbro5-80.terminal.com

源码在这里：http://github.com/simbro/Geograph

这里有一些sn-ps：

主视图（扩展 Ext.tab.Panel）：

    title: 'News',
    layout: 'fit',
    iconCls: 'news',

    items: [
        
            xtype: 'itemsListView'
        
    ]
,

    title: 'Item Details',
    layout: 'fit',
    hidden: true,

    items: [
        
            xtype: 'itemDetailView'
        
    ]
,

物品详情视图：

Ext.define('Geograph.view.ItemDetailView', 
    extend: 'Ext.Panel',
    xtype: 'itemDetailView',
    id: 'itemDetailPage',

    config: 
        title: 'Item Detail',
        scrollable: 
            direction: 'vertical'
        ,
        stylehtmlContent: true,
        title: 'Details',
        layout: 'fit',
        tpl: [
            '<h2>title</h2>',
            '<div><b>creator</b></div>',
            '<div><span class="itemDetailDate">date:date("l, jS F Y")</span></div>',
            '<div><br />description</div>'
        ],
        data: null,
        items: [
            docked: 'top',
            xtype: 'titlebar',
            title: 'Item Details',
            items: [
                ui: 'back',
                text: 'Back',
                id: 'newsBackBtn'
            ]
        ]
    
);

【问题讨论】：

在运行“sencha app build”之前如何知道面板滚动？

我知道面板会在我运行“sencha app build”之前滚动，因为我可以通过我的网络浏览器运行“sencha web start”并点击localhost:1841来访问该应用程序，滚动很好。当我构建应用程序时，我导航到localhost:1841/build/production/Geograph，滚动被破坏了。

【参考方案1】：

我也遇到了同样的问题。修复了这个帖子的问题 Sencha Forum

只需在 app.js 中注释掉加载掩码的代码，如下所示：-

 launch: function() 
        // Destroy the #splash-logo element
        Ext.fly('splash-logo').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('Geograph.view.Main'));

        Ext.Viewport.add(Ext.create('Geograph.view.SearchForm'));

//        var loadingMask = new Ext.LoadMask(Ext.getBody(), msg:"wait msg..."); 
//
//        // Before the AJAX event, enable the mask on the application's
//        // Viewport so it shows regardless of the active view.
//        Ext.Ajax.on('beforerequest', function() 
//            Ext.Viewport.setMasked(loadingMask);
//        );  

        // When the AJAX request completes disable the mask.
//        Ext.Ajax.on('requestcomplete', function() 
//            Ext.Viewport.setMasked(false);
//        );
    ,

【讨论】：

Sujata 你真是个天才！这完全解决了它！也感谢您花时间查看源代码。