sencha-touch-2 - Secha touch2：在平板电脑中设置表单面板的背景图像

Question

嗨，我是 sencha touch2 的新手，在设置背景图像时遇到问题。我无法在平板电脑上看到完整的图像，底部已被切断。这是我的看法：

Ext.define('Test.view.LoginPage', {
    extend: 'Ext.form.FormPanel',
    xtype: 'loginPage',

    config:{
        styleHtmlContent:'true',
        scrollable:'false',
        styleHtmlCls:'login-Cls',

        html: '<img class="logo" src="resources/images/login_Landscape_BG.png"/>'

    }

});

我是否需要在配置文件文件夹中添加平板电脑作为我的应用程序目标仅适用于平板电脑。你能帮我么。谢谢

Answer 1

FWIW，我不得不遵循这个建议： http ://www.sencha.com/forum/showthread.php?189231-Background-Image-in-form-Panel

并将其用于我的 CSS（首先将 TxPanel cls 添加到表单面板）： .TxPanel .x-scroll-container { background: url('img/txbackground.png') repeat center; }

但是 blechhh。这是一个非常丑陋的黑客:-P

Answer 2

试试这个（使用样式配置代替 html 配置）：

Ext.define('Test.view.LoginPage', {
    extend: 'Ext.form.FormPanel',
    xtype: 'loginPage',

    config:{
        styleHtmlContent:'true',
        scrollable:'false',
        styleHtmlCls:'login-Cls',
        style: 'background-image:url(resources/images/login_Landscape_BG.png);background-repeat:no-repeat;background-size:100% 100%;'

    }

});

Answer 3

而不是 using html，您可以尝试 usingstyle设置完整的背景图像：

style: 'background-image: url("resources/images/sesto-exterior.jpg"); background-size: 100% 100%;'