ページチェンジのためのSenchaの静的なトップバーとボトムバー

Question

私は過去2週間にsencha touch 2.0を学んでいましたが、私は2つの問題に遭遇しました。私がしたいのは、私のページに静的なトップバーとボトムバーを置き、ボトムドックに配置されたボタンでダイナミックコンテンツをコントロールできるようにすることです。私はこれを私がしたいと思うように働かせるために4時間を費やしました、私はほとんどそこにいますが、私は少しの指導が必要です。

私の最初の問題は、静的トップドックに画像を追加したいということです。別のフォームで提案されたコードは機能しません。

var topBar = new Ext.BoxComponent(
      { 
       xtype: 'box', 
       autoEl: {tag: 'img', src:'/resources/icons/icon.png'} 
      } 
    ) 

このコードではエラーは発生しませんが、必要な画像も表示されません。画像は60ピクセル×30ピクセル

私が持っている2つ目の問題は、ボトムドックにアイコンを追加して、ユーザーがクリックするとページが新しいページを表示するように変更することです。 3つのフィールドを持つフォームがあります。下のドックのアイコンの1つにリンクしたいので、アイコンをクリックするとフォームが表示されます。完全なコードは次のとおりです。

Ext.setup({ 
phoneStartupScreen : 'resources/images/icon.png', 
icon : 'resources/images/Homescreen.png', 
glossOnIcon : false, 

onReady : function() { 

    var topBar = new Ext.BoxComponent(
      { 
       xtype: 'box', 
       autoEl: {tag: 'img', src:'/resources/icons/icon.png'} 
      } 
    ) 

    var tapHandler = function (btn, evt) { 
     alert("Button '" + btn.text + "' tapped."); 
    } 

    var form = new Ext.form.FormPanel({ 

     items: 
     [ 
      { 
       xtype: "textfield", 
       name: "name", 
       label: "Name", 
       placeHolder: "your name here" 
      }, 
      { 
       xtype: "emailfield", 
       name: "email", 
       label: "Email", 
       placeHolder: "you@example.com" 
      }, 
      { 
       xtype: "urlfield", 
       name: "url", 
       label: "Url", 
       placeHolder: "http://www.example.com" 
      } 
     ] 
    })  

    var searchPageContent ={ 
     html:'This is a test for search page' 
    } 
    var userPageContent ={ 
     html:'This is a test for user page' 
    } 

    var dockedItems = [ 
     { 
      xtype : 'toolbar', 
      dock : 'top', 
      items : topBar 

     }, 
     { 
      xtype: "toolbar", 
      dock: "bottom", 
      items: [ 
       { 
        xtype: 'spacer' 
       }, 
       { 
        iconMask: true, 
        iconCls: "favorites", 
        items: form 
       }, 
       { 
        xtype: 'spacer' 
       }, 
       { 
        iconMask: true, 
        iconCls: "search", 
        items: searchPageContent 
       }, 
       { 
        xtype: 'spacer' 
       }, 
       { 
        iconMask: true, 
        iconCls: "user", 
        items: userPageContent 
       }, 
       { 
        xtype: 'spacer' 
       }, 
      ] 
     } 
    ] 

    new Ext.Panel({ 
     id : 'buttonsPanel', 
     fullscreen : true, 
     dockedItems : dockedItems 
    }); 
} 

}）;

上記のように、静的な上下のバーを作成することはできましたが、私の最初の問題であるトップバーで画像が動かないため、3つのボタンのいずれかをクリックしても何も起こりません。私は私のお気に入りボタンをクリックすると表示される私のフォームが欲しいですが、何も起こりません。どこが間違っていたのですか？

は煎茶と格闘の数日後にあなた

Answer 1

をありがとう、私はほとんど私はそれを修正し、それは私が望んでいた正確な方法を働い望んでいた例を見つけました。ページアイコンをクリックすると、メインのコンテンツがスクロールして新しいページが表示されるような静的なトップバーと静的なボトムバーがあります。

Ext.setup({ 
onReady: function() { 

    var topBar = new Ext.BoxComponent({ 
     layout: 'hbox', 

     html: 
       '<img src="resources/icons/icon.png" height="30", width="48"/>', 
     flex: 1, 
     style:{ 
      textAlign: 'center' 
     } 
    }) 
    var dockedItems = [ 
     { 
      //this creates the top bar, places it at the top of the page and gives it a background image 
      xtype : 'toolbar', 
      dock : 'top', 
      style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;', 
      items : topBar 

     } 
    ] 
    // Sub-page sections 


    // Main portion of the page, which includes top toolbar and content 
    var welcome = new Ext.Panel({ 
     items: [{ 
      html: 'this is the welcome screen' 
     }], 
     title: "Welcome", 
     iconCls: "welcome", 
    }); 
    var search = new Ext.Panel({ 
     items: [{ 
      html: 'this is the search screen' 
     }], 
     title: "Search", 
     iconCls: "search", 
    }); 


    // This is the outer panel with the bottom toolbar 
    var wrapper = new Ext.TabPanel({ 
     fullscreen: true, 
     tabBar: { 
      dock: 'bottom', 
      style: 'background:#8a9cB2;', 
      layout: { 
       pack: 'center' 
      } 
     }, 
     items: [ 
      welcome, 
      search, 
      { 
       iconMask: true, 
       iconCls: "search" 
      }, 
      { 
       iconMask: true, 
       iconCls: "user" 
      } 
     ], 
     dockedItems: dockedItems 
    }); 
} 

}）;