sencha-touch-2 - Sencha Touch 2.2.1 多视图概念设计

Question

有谁知道如何使用 Sencha Touch 2.2.1 实现这个设计？

我想我需要两个视图；一个带有渐变的基本视图和另一个类中的另一个视图，其中包含所有视图组件，如标签栏标题、图像、文本字段等。

有没有人有更好的主意？是否可以使用 SASS 执行此操作，将 $page-bg-color: 分配为线性渐变，然后在内部绘制一个白色矩形？

Answer 1

您应该能够将其直接粘贴到 senchafiddle.com 中。我绝对不是 CSS 专家，需要仔细研究一下这种样式，但这种总体布局对你有用。

Ext.Loader.setConfig({
    enabled : true
});

Ext.application({
    name : ('SF' || 'SenchaFiddle'),

    launch : function() {
        Ext.create('Ext.Container', {
            fullscreen : true,
            style : 'background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);',
            layout : 'fit',

            items : [{
                xtype : 'titlebar',
                title : 'Title',
                docked : 'top'
            }, {
                xtype : 'panel',
                layout : 'fit',
                margin : '0 40 0 40',

                items : [{
                    xtype : 'textfield',
                    label : 'Label 1',
                    docked : 'top'
                }, {
                    xtype: 'image',
                    src : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL66d6uPSYD6skFSjiBAodALYwTvtqipcjBc5RBsLsMd_IoM94Hg',
                    height : '15em',
                    width : '15em',
                    centered : true
                }]
            }]
        });
    }
});

祝你好运，布拉德