Sencha Touch 2 Slider 제작 빈 화면

사용자가 버튼을 클릭 할 때 모바일 장치 용 sencha touch 2를 사용하여 수직 "슬라이더"를 만들려고합니다. 나는 Javascript에 아주 익숙하다. 그러나 나는 기초를 다뤘다. 나는 여기서 한 일을 따르려고했다 : Show/hide a toolbar with slide animation in Sencha Touch 빈 화면이 생성되었다. 왜 이런 일이 일어 났을까요?Sencha Touch 2 Slider 제작 빈 화면

<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

코드를 게시 해주십시오. –

코드에 질문을 추가했습니다. –

함께 올 것이다이

<!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 파일과 같아야이

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 파일을보십시오 도서관. 위의 자바 스크립트 코드를 app.js.라는 새 js 파일에 넣습니다.

오류가있는 경우 Chrome 개발자 도구 콘솔에 오류가 표시됩니다.

출처

2012-08-23 02:27:37 blessenm

답장을 보내 주셔서 감사합니다. blessenm. 나는 여전히 작동하지는 않지만 스크립팅 언어에 대한 지식이 부족하다는 결과는 버튼 클릭시 html에서 .js 파일을 호출하는 것처럼 보입니다. –

Sencha Touch 2의 시작 안내서를 살펴볼 수도 있습니다. 추가 정보로 몇 가지 정보를 업데이트했습니다. – blessenm

Sencha Touch 2 Slider 제작 빈 화면

답변

관련 문제