Sencha觸摸2滑塊產生空白屏幕

我想創建一個垂直的「滑塊」使用sencha觸摸2爲移動設備時，用戶單擊按鈕。我對JavaScript很新，但我已經介紹了基本知識。我試圖按照這裏所做的：Show/hide a toolbar with slide animation in Sencha Touch，但產生一個空白的白色屏幕。爲什麼會發生？Sencha觸摸2滑塊產生空白屏幕

<script type="text/javascript"> 
     function clicked(id) { 
     if(id == "hist"){ 

    var showAlert = function(btn, event) { 
     Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn); 
    }; 

    var tapHandler = function(button, event) { 
     mainPanel.setActiveItem(blue, {type: 'slide'}); 
    }; 

    var backHandler = function(button, event) { 
     mainPanel.setActiveItem(green, {type: 'slide', direction: 'right'}); 
    }; 



    var green = new Ext.Panel({ 
     dockedItems: [{ 
      xtype: 'toolbar', 
      ui: 'light', 
      title: 'My Toolbar', 
      items: [{ 
       text: 'Sobre App', 
       ui: 'round', 
       handler: showAlert 
      }, { xtype:'spacer'}, { 
       text: 'Check-in', 
       ui: 'forward', 
       handler: tapHandler 
      }] 
     }], 
     style: 'background-color:#3b7E3b', 
     html: 'Green' 
    }); 

    var blue = new Ext.Panel({ 
     dockedItems: [{ 
      xtype: 'toolbar', 
      ui: 'light', 
      title: 'Check-in', 
      items: [{ 
       text: 'Back', 
       ui: 'back', 
       handler: backHandler 
      }] 
     }], 
     style: 'background-color:#3b3b7E', 
     html: 'Blue' 
    }); 

    var mainPanel = new Ext.Panel({ 
     layout: 'card', 
     fullscreen : true, 
     items: [green, blue] 
    }); 
    } 
}

來源

2012-08-23 Ushal Naidoo

您能否發佈您的代碼 –

已將代碼添加到問題 –

試試這個

var mainPanel,blue,green; 

Ext.application({ 
    launch: function() { 
     green = new Ext.Panel({ 
      items:[ 
       { 
        xtype:'toolbar', 
        title:'My Toolbar', 
        ui:'light', 
        docked:'top', 
        items: [ 
         { 
          text: 'Sobre App', 
          ui: 'round', 
          handler: showAlert 
         }, 
         { 
          xtype:'spacer' 
         }, 
         { 
          text: 'Check-in', 
          ui: 'forward', 
          handler: tapHandler 
         } 
        ] 
       } 
      ], 
      style: 'background-color:#3b7E3b', 
      html: 'Green' 
     }); 

     blue = new Ext.Panel({ 
      items:[ 
       { 
        xtype:'toolbar', 
        title:'Check-In', 
        ui:'light', 
        docked:'top', 
        items: [ 
         { 
          text: 'Back', 
          ui: 'back', 
          handler: backHandler 
         } 
        ] 
       } 
      ], 
      style: 'background-color:#3b3b7E', 
      html: 'Blue' 
     }); 

     mainPanel = new Ext.Panel({ 
      layout: 'card', 
      fullscreen : true, 
      items: [green,blue] 
     }); 
     Ext.Viewport.add(mainPanel); 
    } 
}); 

var showAlert = function(btn, event) { 
    Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' 
      + btn.text + '"', Ext.emptyFn); 
}; 

var tapHandler = function(button, event) { 
    mainPanel.animateActiveItem(blue,{type: 'slide'}); 
}; 

var backHandler = function(button, event) { 
    mainPanel.animateActiveItem(green, {type: 'slide', direction: 'right'}); 
};

HTML文件應該是這樣的

<!DOCTYPE HTML> 
<html manifest="" lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Sencha Touch Knob</title> 
     <link rel="stylesheet" type="text/css" href="stylesheets/sencha-touch.css"> 
     </link> 
     <script type="text/javascript" src="javascripts/sencha-touch-all-debug.js"> 
     </script> 
     <script type="text/javascript" src="javascripts/app.js"></script> 
    </head> 
    <body> 
    </body> 
</html>

煎茶-touch.css，煎茶 - 觸摸全debug.js文件將帶着圖書館。把上面的JavaScript代碼放在一個名爲app.js的新js文件中。

如果有任何錯誤，它們將顯示在Chrome開發人員工具控制檯中。

來源

2012-08-23 02:27:37 blessenm

謝謝您的快速回復blessenm。我仍然無法使它工作，但我認爲這是我對腳本語言極度缺乏知識的結果，因爲我似乎無法從按鈕單擊的HTML上調用.js文件。 –

您可能需要閱讀Sencha Touch 2入門指南。我已經通過更多信息更新了我的答案。 – blessenm

Sencha觸摸2滑塊產生空白屏幕

回答

相關問題