sencha-touch-2 - 複数のビューを備えた Sencha Touch 2.2.1 のコンセプト デザイン

Question

Sencha Touch 2.2.1 を使用してこのデザインを実現する方法を知っている人はいますか?

2 つのビューが必要だと思います。グラデーションを持つベース ビューと、タブバー タイトル、画像、テキスト フィールドなどのすべてのビュー コンポーネントを含む別のクラスの別のビュー。

誰かがより良いアイデアを持っていますか? 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
                }]
            }]
        });
    }
});

がんばれ、ブラッド