2013-07-18 79 views
0

有誰知道如何使用Sencha Touch 2.2.1來實現此設計?Sencha Touch 2.2.1具有多個視圖的概念設計

我想我需要兩個視圖;在另一個類中使用漸變和其他視圖的基礎視圖,其中包含所有視圖組件,如標籤欄標題,圖像,文本字段等。

有沒有人有更好的主意?是否有可能使用SASS,將$ page-bg-color分配爲線性漸變,然後在裏面繪製一個白色矩形?

enter image description here

回答

0

你有啥可能夠這樣直接粘貼到senchafiddle.com。我沒有絲毫的CSS專家對這種風格的某些需要仔細看,但總體佈局aught爲你工作。

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 
       }] 
      }] 
     }); 
    } 
}); 

祝你好運,布拉德