Question

我有一个页面，我想使用一些sencha项目以及一些非sencha html。

所以页面可能是......（加载sencha标题后）

<div id="banner"><h1>@if (Model != null)
{@Model.DisplayName}</h1></div>
<div style="background-color: #CFE1E8; padding: 10px; border: 1px solid black; ">
<div id="buttonDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/button.js"></script>
<div id="searchDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/search.js"></script>
<div id="carouselDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/carousel.js"></script>
<div id="panelDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/panel.js"></script>
</div>

每个js文件都包含一些sencha代码，用于将控件呈现到关联的div中。例如：

Ext.setup({
    fullscreen: false,
    onReady: function () {
        var panel = new Ext.Panel({
            title: 'Message Title',
            fullscreen: false,
            renderTo: 'buttonDiv',
            defaults: {
                // applied to each contained item
                width: 120

            },
            items: [
            {
                xtype: 'button',
                text: 'Click Me',
                handler: function () {
                alert("You Clicked Me...");
            }
}
]
        });
    }
});

我遇到的问题是，当页面高于手机的宽度时，无论何时触摸屏幕，页面都会立即跳转到页面底部。普通页面滚动根本不起作用。

有什么建议吗？感谢。

Answer 1

尝试为组件分配布局，可能还有弹性，例如：

layout: {
    type: 'vbox',
    align: 'stretch'
},

和

flex: 1

对于滚动，您可以尝试：

scroll: 'vertical'

另外，在sencha中使用HTML的另一种方法是在组件中使用html属性，例如：

new Ext.Panel({
    scroll: 'vertical',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    flex: 1

    items: [{
        html: 'HTML content inside a panel',
    }]
});

Answer 2

我最终做了两件事：

在正文上添加了Ext.util.Scroller。 iPhone上的Ext.util.Scroller存在一个错误，它实际上不允许您向上滚动。但是在Androids上工作正常。
通过推送到全局变量“注册”每个模块的js作为函数的内容，以便将它添加到头部，然后在循环中执行它们，所以我只运行一次Ext.Setup。

如何使用Sencha Touch小部件以及常规HTML“小部件”？

2 个答案: