Sencha Touch - คู่มือฉบับย่อ

Sencha Touch เป็นเฟรมเวิร์กยอดนิยมของ Sencha สำหรับการสร้างอินเทอร์เฟซผู้ใช้สำหรับแอพพลิเคชั่นมือถือ ช่วยให้นักพัฒนาสร้างแอพมือถือโดยใช้ HTML, CSS, JS แบบง่ายซึ่งรองรับอุปกรณ์มือถือมากมายเช่น Android, IOS, BlackBerry และ Windows มันขึ้นอยู่กับสถาปัตยกรรม MVC Sencha Touch เวอร์ชันล่าสุดคือ 2.4

ประวัติ Sencha Touch

หลังจากเปิดตัวผลิตภัณฑ์อื่น ๆ ของ Sencha ซึ่งก็คือ ExtJs ซึ่งมีไว้สำหรับเว็บแอปพลิเคชันจึงจำเป็นต้องพัฒนาเฟรมเวิร์กที่ใช้งานได้บนอุปกรณ์พกพาด้วย

Sencha Touch เวอร์ชันแรกคือเวอร์ชันเบต้า 0.9 ซึ่งรองรับอุปกรณ์ Android และ IOS ต่อมาการเปิดตัวหลักรุ่นแรกของ Sencha Touch เวอร์ชัน 1.0 คือในเดือนพฤศจิกายน 2010 ซึ่งเป็นเวอร์ชันเสถียรรุ่นแรกและรองรับอุปกรณ์ Blackberry ด้วย

Sencha Touch รุ่นล่าสุดคือเวอร์ชัน 2.4 ที่เปิดตัวในเดือนมิถุนายน 2558 ซึ่งรองรับอุปกรณ์หลายชนิดเช่น Windows, Tizen พร้อมกับ Android, IOS, BlackBerry OS 10, Google Chrome สำหรับ Android และ Safari บนมือถือเป็นต้น

คุณสมบัติของ Sencha Touch

ต่อไปนี้เป็นคุณสมบัติที่โดดเด่นที่สุดของ Sencha Touch -

  • วิดเจ็ต UI ที่ปรับแต่งได้และสร้างขึ้นมากกว่า 50 รายการพร้อมชุด UI ที่หลากหลายเช่นรายการภาพหมุนแบบฟอร์มเมนูและแถบเครื่องมือที่สร้างขึ้นโดยเฉพาะสำหรับแพลตฟอร์มมือถือ

  • ความเข้ากันได้ของโค้ดของเวอร์ชันใหม่กับเวอร์ชันเก่า

  • ตัวจัดการรูปแบบที่ยืดหยุ่นซึ่งช่วยจัดระเบียบการแสดงข้อมูลและเนื้อหาบนอุปกรณ์เคลื่อนที่หลายเครื่องที่มีระบบปฏิบัติการที่แตกต่างกัน

  • เฟรมเวิร์กประกอบด้วยแพ็กเกจข้อมูลที่มีประสิทธิภาพซึ่งสามารถใช้ข้อมูลจากแหล่งข้อมูลแบ็กเอนด์ใดก็ได้

  • รูปแบบที่ปรับเปลี่ยนได้ภาพเคลื่อนไหวและการเลื่อนที่ราบรื่นเพื่อประสบการณ์การใช้งานเว็บแอปพลิเคชันบนมือถือที่ดีขึ้นสำหรับการใช้งาน

  • ธีมที่ดูเนทีฟแบบสำเร็จรูปสำหรับทุกแพลตฟอร์มหลักช่วยให้สามารถสร้างเว็บและแอปพลิเคชันแบบไฮบริดให้เข้ากับรูปลักษณ์ของแพลตฟอร์มเป้าหมายได้

Sencha Touch ─ประโยชน์

Sencha Touch เป็นมาตรฐานชั้นนำสำหรับการพัฒนาเว็บแอปพลิเคชันระดับธุรกิจ มีเครื่องมือที่จำเป็นในการสร้างแอปพลิเคชันที่มีประสิทธิภาพสำหรับอุปกรณ์พกพาส่วนใหญ่ที่มีแพลตฟอร์มเดียวสำหรับการพัฒนาแอปพลิเคชัน ต่อไปนี้เป็นประโยชน์บางประการ -

  • มีคุณสมบัติการสัมผัสที่ตอบสนองดังนั้นผู้ใช้จึงสามารถนำทางได้อย่างง่ายดายในขณะที่ใช้แอพมือถือ

  • ให้ความเข้ากันได้กับ IOS, Android และ Blackberry และ Windows เวอร์ชันล่าสุดทั้งหมด

  • ให้ความเร็วที่เร็วที่สุดที่ต้องการสำหรับแอปพลิเคชันมือถือใด ๆ

  • มอบโซลูชันที่คุ้มค่าพร้อมความเข้ากันได้ข้ามแพลตฟอร์ม

  • อิงตาม API ดั้งเดิมและภาษาพื้นฐานในการพัฒนาเว็บเช่น HTML, CSS, JS ซึ่งทำให้นักพัฒนาเข้าใจ Sencha Touch ได้ง่ายขึ้น

Sencha Touch ─ข้อ จำกัด

Sencha Touch API ไม่มีความสามารถดังต่อไปนี้ -

  • แอปไม่สามารถเข้าถึงกล้องรายชื่อและมาตรความเร่งของอุปกรณ์

  • ไม่มีสิ่งอำนวยความสะดวกในการแจ้งเตือนแบบพุช สำหรับสิ่งนี้เราต้องใช้ websockets หรือ long polling

  • ตามนโยบายใบอนุญาตสาธารณะทั่วไปแอปพลิเคชันโอเพนซอร์สฟรี แต่จ่ายสำหรับการใช้งานเชิงพาณิชย์

  • มันไม่ดีสำหรับแอพกราฟิกและแอนิเมชั่นที่ไม่ยอมใครง่ายๆเช่นสำหรับแอพเกม

Sencha Touch ─เครื่องมือ

Sencha SDK

นี่คือชุดพัฒนา Sencha ที่ใช้สร้างโครงกระดูกของโครงการ เราใช้คำสั่ง "sencha -sdk path / to / touch create app appName" เพื่อสร้างแอปด้วยชื่อที่กำหนดในคำสั่ง

เมื่อสร้างแอปคุณจะเห็นไฟล์ต่อไปนี้ในแอป -

  • app - โฟลเดอร์นี้มีโมเดลดูคอนโทรลเลอร์และจัดเก็บไฟล์สำหรับแอพ

  • app.js- นี่คือไฟล์ JS หลักสำหรับแอปพลิเคชันของคุณ จากไฟล์นี้โฟลว์รหัส Sencha จะเริ่มต้น

  • app.json - นี่คือไฟล์กำหนดค่าสำหรับแอปรายละเอียดการกำหนดค่าทั้งหมดจะแสดงที่นี่

  • index.html - นี่คือไฟล์ html หลักที่เรารวม app.js และไฟล์อื่น ๆ ที่เกี่ยวข้องกับ Sencha

  • package.json - ไฟล์นี้มีการอ้างอิงทั้งหมดและข้อมูลอื่น ๆ ที่เกี่ยวข้องกับแอพ

  • resources - โฟลเดอร์นี้มีไฟล์ CSS และรูปภาพทั้งหมดที่จำเป็นสำหรับแอปพลิเคชัน

เซนฉะ CMD

Sencha CMD เป็นเครื่องมือบรรทัดคำสั่งซึ่งมีคุณสมบัติของการย่อขนาดโค้ด Sencha Touch นั่งร้านการสร้างรุ่นและคุณสมบัติที่มีประโยชน์อื่น ๆ สำหรับวัตถุประสงค์ในการผลิต

เราใช้คำสั่ง "Sencha app build package" ใน command prompt เพื่อสร้างแอปพลิเคชันสำหรับสิ่งนี้ ไปที่ไดเรกทอรีแอพในพรอมต์คำสั่งและพิมพ์คำสั่งด้านบน เมื่อสร้างสำเร็จเราจะเห็นเวอร์ชันย่อของแอปพลิเคชันที่ใช้โดยทั่วไปเพื่อวัตถุประสงค์ในการผลิต

สามารถดาวน์โหลดได้จาก https://www.sencha.com/products/extjs/cmd-download/

เสน่หาสารวัตร

Sencha Inspector เป็นเครื่องมือในการดีบักเพื่อแก้ปัญหาในโค้ด Sencha ระหว่างการพัฒนา

การตั้งค่าสภาพแวดล้อมท้องถิ่น

ส่วนนี้จะแนะนำวิธีดาวน์โหลดและตั้งค่า Sencha Touch บนเครื่องของคุณ โปรดทำตามขั้นตอนเพื่อตั้งค่าสภาพแวดล้อม

การดาวน์โหลดไฟล์ไลบรารี

ดาวน์โหลดไฟล์ไลบรารี Sencha Touch เวอร์ชันเชิงพาณิชย์จากลิงค์ต่อไปนี้ https://www.sencha.com. คุณจะได้รับเวอร์ชันทดลองใช้งานจากไซต์ในรหัสไปรษณีย์ลงทะเบียนของคุณซึ่งจะเป็นโฟลเดอร์ซิปชื่อ sencha-touch-2.4.2-commercial

คลายซิปโฟลเดอร์และคุณจะพบไฟล์ JavaScript และ CSS ต่างๆที่จะรวมไว้ในแอปพลิเคชันของคุณ รวมไฟล์ต่อไปนี้เป็นส่วนใหญ่ -

Javascript Files - ไฟล์ JS ซึ่งคุณสามารถพบได้ในโฟลเดอร์ \ sencha-touch-2.4.2commercial \ touch-2.4.2 คือ -

ซีเนียร์ No ไฟล์และคำอธิบาย
1

sencha-touch.js

นี่คือไฟล์หลักที่มีฟังก์ชันทั้งหมดในการเรียกใช้แอปพลิเคชัน
2

sencha-touch-all.js

ไฟล์นี้มีโค้ดทั้งหมดที่ย่อขนาดโดยไม่มีความคิดเห็นในไฟล์
3

sencha-touch-debug.js

นี่คือ sencha-touch-all.js เวอร์ชันที่ไม่มีการปิดเพื่อจุดประสงค์ในการดีบัก
4

sencha-touch-all-debug.js

ไฟล์นี้ยังไม่รวมเป็นหนึ่งเดียวและใช้เพื่อจุดประสงค์ในการพัฒนาเนื่องจากมีความคิดเห็นและบันทึกคอนโซลทั้งหมดเพื่อตรวจสอบข้อผิดพลาด / ปัญหาใด ๆ

คุณสามารถเพิ่มไฟล์เหล่านี้ลงในโฟลเดอร์ JS ของโปรเจ็กต์ของคุณหรือคุณสามารถระบุเส้นทางโดยตรงที่ไฟล์นั้นอยู่ในระบบของคุณ

CSS Files - มีไฟล์ตามธีมจำนวนมากซึ่งคุณสามารถพบได้ในโฟลเดอร์ I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css

ไฟล์ไลบรารีเหล่านี้จะถูกเพิ่มในแอพพลิเคชั่น Sencha Touch ดังนี้ -

<html>
   <head>
      <script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>  
      <link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type ="text/javascript" src = "app.js" > </script> 
   </head>
</html>

คุณสามารถเก็บรหัสแอปพลิเคชัน Sencha Touch ไว้ในไฟล์ app.js

การตั้งค่า CDN

CDN เป็นเครือข่ายการจัดส่งเนื้อหาที่คุณไม่จำเป็นต้องดาวน์โหลดไฟล์ไลบรารี Sencha Touch แต่คุณสามารถเพิ่มลิงค์ CDN สำหรับ ExtJS ลงในโปรแกรมของคุณได้โดยตรงดังนี้ -

<html>
   <head>
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>    
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

บรรณาธิการยอดนิยม

เนื่องจากเป็นเฟรมเวิร์ก JavaScript ที่ใช้สำหรับการพัฒนาเว็บแอปพลิเคชันโปรเจ็กต์จะมีไฟล์ HTML, JS และในการเขียนโปรแกรม Ext JS ของคุณคุณจะต้องมีโปรแกรมแก้ไขข้อความ มี IDE หลายรายการในตลาด แต่ในตอนนี้คุณสามารถพิจารณาข้อใดข้อหนึ่งต่อไปนี้ -

  • Notepad - บนเครื่อง Windows คุณสามารถใช้โปรแกรมแก้ไขข้อความง่ายๆเช่น Notepad (แนะนำสำหรับบทช่วยสอนนี้), Notepad ++

  • Brackets - IDE ยอดนิยมอีกตัวซึ่งสามารถดาวน์โหลดได้จาก http://brackets.io/

  • Sublime - IDE ยอดนิยมอีกตัวซึ่งสามารถดาวน์โหลดได้จาก https://www.sublimetext.com/3/

Naming conventionคือชุดของกฎที่ต้องปฏิบัติตามสำหรับตัวระบุ ทำให้โค้ดสามารถอ่านและเข้าใจได้ง่ายสำหรับโปรแกรมเมอร์คนอื่น ๆ เช่นกัน

หลักการตั้งชื่อใน Sencha Touch เป็นไปตามอนุสัญญา JavaScript มาตรฐานซึ่งไม่บังคับ แต่เป็นแนวทางปฏิบัติที่ดี ควรเป็นไปตามไวยากรณ์กรณีอูฐสำหรับการตั้งชื่อคลาสเมธอดตัวแปรและคุณสมบัติ

ถ้าชื่อรวมกับสองคำคำที่สองจะขึ้นต้นด้วยตัวอักษรตัวพิมพ์ใหญ่เสมอ ตัวอย่างเช่น doLayout (), StudentForm, firstName เป็นต้น

ซีเนียร์ ชื่อและอนุสัญญา
1

Class Name

ควรขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่ตามด้วยตัวอักษรอูฐ ตัวอย่างเช่น StudentClass
2

Method Name

ควรขึ้นต้นด้วยตัวอักษรพิมพ์เล็กตามด้วยตัวอักษรอูฐ ตัวอย่างเช่น studentMethod ()
3

Variable Name

ควรขึ้นต้นด้วยตัวอักษรพิมพ์เล็กตามด้วยตัวอักษรอูฐ ตัวอย่างเช่น studentName
4

Constant Name

ควรเป็นตัวพิมพ์ใหญ่เท่านั้น ตัวอย่างเช่น COUNT, MAX_VALUE
5

Property Name

ควรขึ้นต้นด้วยตัวอักษรพิมพ์เล็กตามด้วยตัวอักษรอูฐ ตัวอย่างเช่น enableColumnResize = true

ชั้นล่างสุดสำหรับแอปพลิเคชันมือถือคือระบบปฏิบัติการเหนือสิ่งอื่นใดหรือทุกอย่างถูกสร้างขึ้น จากนั้นเรามีเบราว์เซอร์ที่เราจะใช้งานแอพพลิเคชั่น อาจเป็น Chrome, Safari, IE อะไรก็ได้ ชั้นบนเป็นมาตรฐาน W3 ซึ่งเป็นเรื่องธรรมดาสำหรับทุกคน Sencha Touch ยืนหรือสร้างขึ้นจากมาตรฐาน W3 ซึ่งไม่มีอะไรนอกจาก HTML5 ซึ่งทำให้แอปพลิเคชั่นเดียวเข้ากันได้กับเบราว์เซอร์ที่แตกต่างกันของอุปกรณ์ต่างๆ

Sencha Touch เป็นการรวมกันของสามเฟรมเวิร์ค - ExtJs, JqTouch และ Raphael (การวาดภาพเวกเตอร์) เป็นไปตามสถาปัตยกรรม MVC MVC แยกโค้ดออกเป็นส่วนที่จัดการได้มากขึ้น

แม้ว่าสถาปัตยกรรมจะไม่บังคับสำหรับโปรแกรมอย่างไรก็ตามแนวทางปฏิบัติที่ดีที่สุดในการปฏิบัติตามโครงสร้างนี้เพื่อให้โค้ดของคุณสามารถบำรุงรักษาและจัดระเบียบได้ดี

โครงสร้างโครงการด้วย Sencha Touch App

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

โฟลเดอร์แอพ Sencha Touch จะอยู่ในโฟลเดอร์ JavaScript ของโปรเจ็กต์ของคุณ

แอพนี้จะมีไฟล์คอนโทรลเลอร์ดูโมเดลจัดเก็บและยูทิลิตี้พร้อม app.js

app.js- ไฟล์หลักที่จะเริ่มการทำงานของโปรแกรม ควรรวมไว้ในไฟล์ HTML หลักโดยใช้แท็ก <script> แอปเรียกตัวควบคุมแอปพลิเคชันสำหรับฟังก์ชันที่เหลือ

Controller.js- เป็นไฟล์คอนโทรลเลอร์ของสถาปัตยกรรม Sencha Touch MVC สิ่งนี้ประกอบด้วยการควบคุมทั้งหมดของแอปพลิเคชันตัวรับฟังเหตุการณ์และฟังก์ชันส่วนใหญ่ของโค้ด ดำเนินงานต่อไปนี้: การกำหนดเส้นทางคั่นกลางระหว่างมุมมองและโมเดลและดำเนินการเหตุการณ์

View.js- มีส่วนต่อประสานของแอปพลิเคชันซึ่งแสดงให้ผู้ใช้เห็น Sencha Touch ใช้มุมมองที่หลากหลายของ UI ซึ่งสามารถขยายและปรับแต่งได้ตามความต้องการ

Store.js- มีข้อมูลแคชในเครื่องซึ่งจะแสดงผลในมุมมองด้วยความช่วยเหลือของโมเดลออบเจ็กต์ จัดเก็บดึงข้อมูลโดยใช้พร็อกซีซึ่งมีเส้นทางที่กำหนดไว้สำหรับบริการเพื่อดึงข้อมูลแบ็กเอนด์

Model.js- มีวัตถุที่ผูกข้อมูลร้านค้าเพื่อดู มันเป็นตัวแทนของวัตถุในโลกแห่งความจริงซึ่งโดยพื้นฐานแล้วเกี่ยวข้องกับฐานข้อมูล

Utils.js- ไม่รวมอยู่ในสถาปัตยกรรม MVC แต่เป็นแนวทางปฏิบัติที่ดีที่สุดในการใช้สิ่งนี้เพื่อทำให้โค้ดสะอาดไม่ซับซ้อนและอ่านง่ายขึ้น เราสามารถเขียนเมธอดในไฟล์นี้และเรียกใช้ในคอนโทรลเลอร์หรือดูตัวแสดงผลได้ทุกที่ที่ต้องการ เป็นประโยชน์สำหรับวัตถุประสงค์ในการใช้ซ้ำรหัสเช่นกัน

MVC ย่อมาจาก Model View Controller เป็นรูปแบบสถาปัตยกรรมที่แยกแอปพลิเคชันออกเป็นส่วนประกอบเชิงตรรกะทำให้สามารถจัดการได้มากขึ้น

แผนภาพต่อไปนี้แสดงให้เห็นว่าสถาปัตยกรรม MVC ทำงานอย่างไร -

Controller - คอนโทรลเลอร์ควบคุมแอปพลิเคชันทั้งหมดที่แจ้งให้ดูหากโมเดลมีการเปลี่ยนแปลงและดำเนินการตามอินพุตของผู้ใช้

View- มีส่วนต่อประสานของแอปพลิเคชันซึ่งเป็นภาพของผู้ใช้ จะแจ้งให้ตัวควบคุมเปลี่ยนรูปแบบในการป้อนข้อมูลของผู้ใช้

Model- มีวัตถุที่ผูกข้อมูลร้านค้าเพื่อดู เป็นตัวแทนของวัตถุในโลกแห่งความเป็นจริงซึ่งโดยพื้นฐานแล้วเกี่ยวข้องกับฐานข้อมูล นอกจากนี้ยังแจ้งคอนโทรลเลอร์สำหรับการเปลี่ยนแปลงมุมมอง

ในบทนี้เราจะแสดงขั้นตอนในการเขียนโปรแกรม Hello World ตัวแรกใน Ext JS

ขั้นตอนที่ 1

สร้างเพจ index.htm ในตัวแก้ไขที่เราเลือก รวมไฟล์ไลบรารีที่จำเป็นในส่วนหัวของหน้า html ดังต่อไปนี้

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

คำอธิบาย

  • Ext.application () method เป็นจุดเริ่มต้นของแอพพลิเคชั่น Sencha Touch มันสร้างตัวแปรส่วนกลางที่เรียกว่า 'Sencha' ที่ประกาศด้วยคุณสมบัติชื่อ - คลาสของแอปพลิเคชันทั้งหมดเช่นโมเดลมุมมองและตัวควบคุมจะอยู่ภายใต้เนมสเปซเดียวนี้ซึ่งช่วยลดโอกาสในการชนกันของตัวแปรส่วนกลางและชื่อไฟล์

  • เรียกใช้เมธอด () เมื่อเพจพร้อมและโหลดไฟล์ JavaScript ทั้งหมด

  • วิธี Ext.create () ใช้เพื่อสร้างวัตถุใน Sencha Touch ที่นี่เรากำลังสร้างออบเจ็กต์ของคลาสพาเนลอย่างง่าย Ext.tab.Panel

  • Ext.tab.Panel คือคลาสที่กำหนดไว้ล่วงหน้าใน Sencha Touch สำหรับการสร้างพาเนล

  • ทุกคลาส Sencha Touch มีคุณสมบัติที่แตกต่างกันในการทำงานพื้นฐานบางอย่าง

คลาส Ext.Panel มีคุณสมบัติต่างๆเช่น -

  • fullscreen คุณสมบัติคือการใช้ประโยชน์จากหน้าจอที่สมบูรณ์ดังนั้นแผงจะใช้พื้นที่เต็มหน้าจอ

  • items คุณสมบัติคือภาชนะสำหรับสิ่งของต่างๆ

  • iconCls เป็นคลาสที่ใช้ในการแสดงไอคอนต่างๆ

  • title คุณสมบัติคือการระบุชื่อให้กับแผงควบคุม

  • html คุณสมบัติคือเนื้อหา html ที่จะแสดงในแผงควบคุม

ขั้นตอนที่ 2

เปิดไฟล์ index.htm ในเบราว์เซอร์มาตรฐานและคุณจะได้รับผลลัพธ์ต่อไปนี้

ความต้องการเว็บแอปพลิเคชันในปัจจุบันคือการพัฒนาแอปพลิเคชันที่รวดเร็วโดยใช้ความพยายามในการพัฒนาน้อยลง Sencha Touch ช่วยในการดำเนินการดังกล่าวได้อย่างง่ายดายเนื่องจากมีไลบรารีบิวด์จำนวนมากให้เลือกตามการพัฒนาหรือโค้ดการผลิตพร้อมกับสิ่งอำนวยความสะดวกในการสร้างบิลด์ที่กำหนดเอง

ไลบรารีการสร้าง Sencha Touch โหลดคลาสแบบไดนามิก การโหลดแบบไดนามิกหมายถึงคลาสที่โหลดเมื่อจำเป็นและจะรวมเฉพาะคลาสเหล่านั้นซึ่งจำเป็นในแอปพลิเคชัน สิ่งนี้ทำให้แอปพลิเคชันทำงานได้เร็วขึ้นเนื่องจากจำนวนไฟล์ที่ต้องโหลดลดลงและลดเวลาในการโหลดไปพร้อม ๆ กัน

Sencha Touch 2.x มีไลบรารีบิวด์ห้าไลบรารีต่อไปนี้

ซีเนียร์ การสร้างและการใช้งาน
1

sencha-touchdebug.js

โครงสร้างนี้ใช้ในขณะที่พัฒนาแอปพลิเคชันภายในเครื่อง เป็นเวอร์ชันที่ไม่มีการปิดกั้นพร้อมความคิดเห็นและบันทึกการดีบักทั้งหมดเพื่อให้ง่ายต่อการดีบักขณะพัฒนา
2

senchatouch.js

ไฟล์นี้ใช้เพื่อการผลิต เป็นเวอร์ชันที่ลดขนาดเมื่อเรามีบิลด์ที่กำหนดเอง
3

sencha-touchall.js

ไฟล์นี้ใช้เพื่อการผลิต เป็นเวอร์ชันย่อส่วนเมื่อเราไม่มีบิลด์ที่กำหนดเอง
4

sencha-touchall-debug.js

ไฟล์นี้ใช้สำหรับการดีบักในการผลิต ไม่มีการย่อขนาดและมีความคิดเห็นและบันทึกการแก้ไขข้อบกพร่องทั้งหมด
5

sencha-touchall-compat.js

โครงสร้างนี้ใช้เพื่อย้ายเวอร์ชัน 1.x ไปเป็นเวอร์ชัน 2.x จะแจ้งเตือนทุกที่ที่รหัสเวอร์ชัน 1.x เข้ากันไม่ได้และจำเป็นต้องแก้ไขโค้ด

ด้วยโครงสร้างที่กล่าวมาข้างต้น Sencha Touch มีสิ่งอำนวยความสะดวกในการสร้างงานสร้างแบบกำหนดเอง

ข้อดีของการสร้าง Custom Build

การสร้างแบบกำหนดเองไม่ได้โหลดไฟล์สัมผัสทั้งหมด มันโหลดเฉพาะไฟล์ที่เราใช้ในแอปพลิเคชันซึ่งทำให้แอปพลิเคชันเร็วขึ้นและดูแลรักษาได้ง่าย

Sencha CMD ใช้เพื่อสร้างงานสร้างแบบกำหนดเอง ในการสร้างบิลด์แบบกำหนดเองใน Sencha CMD ให้ไปที่ไดเร็กทอรีที่มีไฟล์แอพอยู่และพิมพ์คำสั่งต่อไปนี้เพื่อสร้างบิลด์

ซีเนียร์ คำสั่งและการใช้งาน
1

sencha app build native

สร้างแอปและเตรียมไฟล์ชื่อ packager.temp.json ที่คุณสามารถใช้เพื่อทำแพ็กเกจแอปพลิเคชันได้โดย packager.temp.json เหมือนกับ packager.json แต่มีเส้นทางเพิ่มเติม
2

sencha app build -run native

สร้างและจัดแพ็กเกจแอปพลิเคชันโดยอัตโนมัติและเปิดตัวจำลองที่เหมาะสม
3

sencha app build package

สร้างแอปด้วยการรองรับแพ็กเกจ แต่ไม่ได้กำหนดค่าไฟล์ JSON ของแพ็กเกจ สิ่งนี้มีประโยชน์สำหรับโปรเจ็กต์ที่ดูแลไฟล์ packager.json หลายไฟล์ด้วยตนเอง

เมื่อสร้างสำเร็จมันจะสร้างไฟล์ all-class.js ซึ่งเราจำเป็นต้องรวมไว้ใน index.html ของเราเพื่อให้พร้อมใช้งานจริง

รหัสต่อไปนี้แสดงการเปลี่ยนแปลงที่ต้องทำสำหรับรหัสที่พร้อมใช้งานจริง

Index.html before building application

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

Index.html after building the application

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>

Sencha Touch มาพร้อมกับการแก้ไขที่หลากหลายจากรุ่นก่อนหน้า

Sencha Touch 2 มาพร้อมกับโครงสร้างความเข้ากันได้แบบย้อนหลังซึ่งทำให้กระบวนการโยกย้ายง่ายขึ้นจากเวอร์ชัน 1.x เป็น 2.x

โครงสร้างนี้ช่วยให้การทำงานง่ายขึ้นโดยการแจ้งเตือนและบันทึกเมื่อใดก็ตามที่เกิดปัญหาการย้ายข้อมูลหรือจำเป็นต้องมีการเปลี่ยนแปลงรหัสดังนั้นผู้ใช้จะได้รับทราบว่าต้องมีการเปลี่ยนแปลงที่ใดเพื่อให้แน่ใจว่าแอปพลิเคชันทำงานร่วมกับเวอร์ชันล่าสุด

การโยกย้าย Sencha Touch 2.x ต้องการการเปลี่ยนแปลงรหัสต่อไปนี้

ระบบคลาส

Code in Sencha Touch 1.x -

MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
   scroll: 'vertical',
   html: 'Student Panel'
   initComponent: function() {
      Ext.getCmp('StudentIdDiv').update('This is a Student panel');
   }
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.view.StudentPanel', {
   extend: 'Ext.Panel',

   config: {
      scroll: 'vertical',
      html: 'Student Panel'
   },

   initialize: function() {
      Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
   }
});

เมื่อดูทั้งสองเวอร์ชันคุณจะเห็นวิธีการสร้างคลาสคือการเปลี่ยนแปลงซึ่งตอนนี้ได้รับแรงบันดาลใจจาก ExtJ เช่น -

  • Ext.extend เปลี่ยนเป็น Ext.define

  • ตอนนี้พารามิเตอร์คอนฟิกูเรชันทั้งหมดที่เกี่ยวข้องกับคลาสถูกกำหนดภายใต้พารามิเตอร์ config

  • initComponent เปลี่ยนเป็นวิธี initialize ()

  • ใน Sencha Touch 2.x เราสามารถมีฟังก์ชัน setHtml () และ getHtml () เพื่ออัปเดต html หรือเพื่อรับค่า

สถาปัตยกรรม MVC

รหัส Sencha Touch 1.x เป็นแบบแยกส่วนและใช้สถาปัตยกรรม MVC Sencha Touch 2.x เป็นไปตามไวยากรณ์ที่แตกต่างกันสำหรับการเขียนโมเดลมุมมองและตัวควบคุม มาดูความแตกต่างของไฟล์รุ่นดูและคอนโทรลเลอร์ในเวอร์ชันต่างๆ

รุ่น

Code in Sencha Touch 1.x -

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.model.StudentModel', {
   extend: 'Ext.data.Model', config: {
      fields: [
         {name: 'name',  type: 'string'},
         {name: 'age',   type: 'int'}
      ]
   }
});

Ext.regModel เปลี่ยนเป็น Ext.define ซึ่งขยาย Ext.data.Model

ฟิลด์ทั้งหมดอยู่ในส่วนการกำหนดค่าตอนนี้ในเวอร์ชัน 2.x

ดู

Code in Sencha Touch 1.x -

Ext.Panel("studentView", {
   items: [{}]
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.view.StudentView', {
   extend: 'Ext.tab.Panel',
   items: [{}]
});

มุมมองเกือบจะเหมือนกันการเปลี่ยนแปลงเพียงอย่างเดียวคือชื่อมุมมองตามการกำหนดชื่อเวอร์ชัน 2.x เช่น Myapp.view.StudentView และโค้ดกำลังเขียนในวิธี Ext.define เป็นเหมือนโมเดล

ตัวควบคุม

Code in Sencha Touch 1.x -

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Code in Sencha Touch 2.x -

Ext.define('MyApp.controller.studentController', {
   extend: 'Ext.app.Controller', someMethod: function() {
      alert('Method is called');
   }
});

เหมือนกับรุ่นในคอนโทรลเลอร์ นอกจากนี้ Ext.regController ยังเปลี่ยนเป็น Ext.define ซึ่งขยาย Ext.app.Controller

ใบสมัคร

Code in Sencha Touch 1.x -

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Code in Sencha Touch 2.x -

Ext.application({
   name: 'MyApp',
   models: ['studentModel'],
   controllers: ['studentController'],
   views: ['studentView'],
   stores: ['studentStore'],

   launch: function() {
      Ext.create('MyApp.view.Main');
   }
});

ความแตกต่างที่สำคัญระหว่างเวอร์ชัน 1.x และเวอร์ชัน 2.x คือใน 2.x เราประกาศโมเดลมุมมองคอนโทรลเลอร์และร้านค้าทั้งหมดในแอปพลิเคชัน

Sencha Touch มีแนวคิดหลักที่หลากหลายเช่นระบบคลาส ajax ตัวควบคุม ฯลฯ

ตารางต่อไปนี้แสดงลิงค์สำหรับแนวคิดหลักของ Sencha Touch

ซีเนียร์ ลิงก์แนวคิดและคำอธิบาย
1 ระบบคลาส
2 ส่วนประกอบ
3 ตัวควบคุม
4 การสนับสนุน BlackBerry
5 การใช้ Ajax

แพ็คเกจข้อมูลใน Sencha Touch มีหน้าที่รับผิดชอบในการจัดการข้อมูลทุกประเภทไม่ว่าจะเป็นการจัดเก็บหรือโหลดข้อมูล

แพ็กเกจข้อมูลเกี่ยวข้องกับโมเดลที่เก็บและพร็อกซี

ซีเนียร์ ลิงก์แนวคิดและคำอธิบาย
1

Model

เป็นการรวบรวมข้อมูลและฟิลด์ที่เราแสดงค่าทั้งหมดบน UI คำอธิบาย
2

Store

เป็นการรวบรวมอินสแตนซ์แบบจำลองซึ่งโดยทั่วไปจะจัดเก็บข้อมูลไว้ในเครื่อง ในร้านเราเขียนเหตุการณ์ทั้งหมดและพักสายเพื่อรับข้อมูล คำอธิบาย
3

Proxy

โดยพื้นฐานแล้วมีหน้าที่ในการโหลดข้อมูลในร้านค้า ส่วนใหญ่เราใช้ ajax proxy เพื่อโหลดข้อมูลที่จัดเก็บ คำอธิบาย

Sencha Touch มีธีมมากมายให้ใช้ในแอปพลิเคชันของคุณ คุณสามารถเพิ่มธีมต่างๆแทนธีมคลาสสิกและดูความแตกต่างของผลลัพธ์ตามอุปกรณ์ที่เราใช้สำหรับแอปพลิเคชัน ซึ่งทำได้ง่ายๆโดยการแทนที่ไฟล์ CSS ของธีมตามที่อธิบายไว้ในตัวอย่างต่อไปนี้

ธีมเดสก์ท็อป

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ CSS ต่อไปนี้จากแอปพลิเคชันใช้สำหรับธีมเดสก์ท็อป

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ธีมของ Windows

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

เพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ธีม iOS

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

เพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ธีม iOS Classic

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

เพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows -

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ธีม Android

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

เพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ธีม BlackBerry

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ ลบ CSS ต่อไปนี้ออกจากแอปพลิเคชัน

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

เพิ่ม CSS ต่อไปนี้เพื่อใช้ธีม Windows

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ในโลกแห่งเทคโนโลยีในปัจจุบันเรามีอุปกรณ์มากมายเช่นมือถือแท็บเล็ตเดสก์ท็อปและแล็ปท็อปที่มีขนาดหน้าจอที่แตกต่างกัน ดังนั้นจึงมีความจำเป็นในการพัฒนาแอพพลิเคชั่นซึ่งสามารถเข้าถึงได้จากอุปกรณ์ทั้งหมดที่มีรูปลักษณ์และความรู้สึกที่ดี อย่างไรก็ตามในการพัฒนาโค้ดที่แตกต่างกันสำหรับอุปกรณ์ต่างๆนั้นใช้เวลานานและมีค่าใช้จ่ายสูง

Sencha Touch ช่วยเราในเรื่องนี้โดยนำเสนอคุณสมบัติโปรไฟล์อุปกรณ์ ขึ้นอยู่กับโปรไฟล์ที่ใช้งานการอ้างอิงที่แตกต่างกันจะถูกเรียกใช้และมีผลบังคับใช้

เราสามารถประกาศโปรไฟล์อุปกรณ์ขณะเขียนรหัสแอปพลิเคชัน เราสามารถมีอุปกรณ์หลายเครื่องเป็น -

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

เมื่อเสร็จแล้วโปรไฟล์จะถูกโหลดเป็น -

  • MyApp.profiles.Phone.js
  • MyApp.profiles.Tablet.js

การเขียนโปรไฟล์โทรศัพท์ง่ายๆ

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

การเขียนโปรไฟล์แท็บเล็ตอย่างง่าย

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

ดังที่เราเห็นในโปรไฟล์เรามีฟังก์ชั่น isActive ซึ่งกำหนดว่าอุปกรณ์นั้นใช้งานอยู่หรือไม่ หากอุปกรณ์ทำงานอยู่การอ้างอิงที่เกี่ยวข้องจะถูกโหลดและสร้างอินสแตนซ์

ดังที่ได้กล่าวไว้ในตัวอย่างข้างต้นหากเราใช้อุปกรณ์โทรศัพท์ฟังก์ชัน isActive ของโปรไฟล์โทรศัพท์จะคืนค่าจริงและการอ้างอิงที่เกี่ยวข้องกับอุปกรณ์โทรศัพท์จะถูกโหลด ที่นี่ phoneView จะถูกโหลด หากอุปกรณ์เป็นแท็บเล็ตฟังก์ชัน isActive ของโปรไฟล์โทรศัพท์จะส่งกลับเท็จและฟังก์ชัน isActive ของโปรไฟล์แท็บเล็ตจะส่งคืนค่า true และแท็บเล็ตแบบพึ่งพาจะโหลด

เปิดตัวกระบวนการ

อีกจุดหนึ่งที่ต้องสังเกตคือเมื่อเรามีโปรไฟล์ในแอปพลิเคชันแล้วการโหลดและการสร้างอินสแตนซ์ของรหัสแอปพลิเคชันจะเป็นไปตามลำดับต่อไปนี้ -

  • ตัวควบคุมถูกสร้างอินสแตนซ์ก่อนและฟังก์ชัน init ของคอนโทรลเลอร์แต่ละตัวจะถูกโหลด
  • ฟังก์ชันการเรียกใช้โปรไฟล์จะถูกเรียกใช้
  • จะมีการเรียกใช้ฟังก์ชันเปิดตัวแอปพลิเคชัน

ทั้งโปรไฟล์และฟังก์ชั่นการเปิดตัวของแอปพลิเคชันเป็นทางเลือกดังนั้นหากเราไม่ได้กำหนดอย่างใดอย่างหนึ่งฟังก์ชันเหล่านี้จะไม่ถูกเรียก

ดูโค้ดต่อไปนี้เพื่อตรวจสอบว่าสามารถกำหนดฟังก์ชัน launch และ init ที่แตกต่างกันได้อย่างไร

ฟังก์ชัน init ของคอนโทรลเลอร์

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

ฟังก์ชั่นเปิดตัวโปรไฟล์

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

ฟังก์ชันเปิดตัวแอปพลิเคชัน

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});

มีบางวิธีที่กำหนดไว้ใน Sencha Touch เพื่อประกาศการอ้างอิงหนึ่งในแอปพลิเคชันและอีกวิธีหนึ่งในคลาส

มาดูวิธีต่างๆในการกำหนดการอ้างอิงกัน

การพึ่งพาระดับแอปพลิเคชัน

ที่นี่เราประกาศการอ้างอิงทั้งหมดเมื่อเราสร้าง Ext.application

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

ตอนนี้เมื่อแอปพลิเคชันโหลดขึ้นการอ้างอิงทั้งหมดจะถูกโหลดพร้อมกัน เส้นทางของไฟล์อื่น ๆ จะเป็น -

  • MyApp.views.StudentsView
  • MyApp.models.StudentsModel
  • MyApp.stores.StudentsStore เป็นต้น

วิธีการประกาศข้างต้นไม่เพียง แต่โหลดไฟล์เท่านั้น แต่ยังตัดสินว่าโปรไฟล์ใดควรใช้งานได้อีกด้วย หลังจากโหลดคอนโทรลเลอร์แล้วตรวจสอบให้แน่ใจว่าได้สร้างอินสแตนซ์แล้ว เมื่อโหลดร้านค้าแล้วมันจะสร้างอินสแตนซ์ของพวกเขาและระบุหนึ่ง ID หากยังไม่ได้รับ

การพึ่งพาเฉพาะโปรไฟล์

เมื่อเราใช้โปรไฟล์ในแอปพลิเคชันอาจมีความเป็นไปได้ที่ฟังก์ชันบางอย่างจำเป็นสำหรับบางโปรไฟล์เท่านั้น

การอ้างอิงเฉพาะโปรไฟล์จะถูกประกาศในโปรไฟล์เองแทนที่จะเป็นการประกาศระดับแอปพลิเคชัน

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

การอ้างอิงจะถูกโหลดโดยไม่คำนึงถึงโปรไฟล์ที่ใช้งานอยู่หรือไม่ อย่างไรก็ตามขึ้นอยู่กับโปรไฟล์ที่ใช้งานอยู่การประมวลผลเพิ่มเติมเช่นการสร้างอินสแตนซ์คอนโทรลเลอร์และร้านค้าเกิดขึ้น

การอ้างอิงที่ซ้อนกัน

เมื่อเรามีแอปพลิเคชั่นที่ใหญ่ขึ้นเรามีตัวควบคุมโมเดลมุมมองและร้านค้าหลายตัว

การรักษาความเป็นโมดูลาร์ไว้ในแอปพลิเคชันขนาดใหญ่เป็นเรื่องดี ด้วยเหตุนี้เราสามารถกำหนดโฟลเดอร์ย่อยและในขณะที่ประกาศการอ้างอิงเราสามารถใช้ชื่อโฟลเดอร์ย่อยเพื่อประกาศได้

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

ในกรณีข้างต้นไฟล์ต่อไปนี้จะถูกโหลด -

  • MyApp.controllers.Controller
  • MyApp.controllers.nested.NewController
  • MyApp.Views.Sview
  • MyApp.Views.class.Cview

การพึ่งพาภายนอก

เราสามารถระบุการอ้างอิงภายนอกแอปพลิเคชันโดยตั้งชื่อคลาสที่มีคุณสมบัติครบถ้วนเป็น -

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

ในกรณีข้างต้นไฟล์ต่อไปนี้จะถูกโหลด -

  • Class/view/LoginForm.js
  • Class/controller/Sessions.js
  • Class/model/User.js
  • app/view/Welcome.js
  • app/controller/Main.js

ช่วยคุณในการระบุระบบปฏิบัติการที่คุณใช้เบราว์เซอร์ใดที่คุณกำลังทำงานอยู่และคุณลักษณะใดบ้างที่ใช้ได้กับสภาพแวดล้อมของคุณ

Sencha Touch มีฟังก์ชั่นที่แตกต่างกันเพื่อรับข้อมูลเฉพาะสำหรับสภาพแวดล้อม วิธีการทั้งหมดที่กล่าวถึงด้านล่างสามารถตรวจสอบได้หากเงื่อนไขเป็น if (Ext.os.is.Windows) {} และเป็นไปตามภารกิจเงื่อนไขสามารถทำได้

วิธีการทั้งหมดต่อไปนี้ส่งคืนค่าบูลีน

ระบบปฏิบัติการ

Ext.os เป็นคลาสที่ให้วิธีการต่างๆแก่คุณเพื่อให้ทราบว่าเรากำลังใช้ระบบปฏิบัติการใดอยู่

ซีเนียร์ No วิธีการและคำอธิบาย
1

Ext.os.is.webOS

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ webos มิฉะนั้นจะคืนค่าเป็นเท็จ
2

Ext.os.is.RIMTable

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ RIMTable มิฉะนั้นจะคืนค่าเป็นเท็จ
3

Ext.os.is.Linux

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ Linux มิฉะนั้นจะส่งคืนเท็จ
4

Ext.os.is.Windows

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ windows มิฉะนั้นจะคืนค่าเป็นเท็จ
5

Ext.os.is.MacOs

ฟังก์ชันนี้จะคืนค่าเป็นจริงหากคุณใช้ระบบปฏิบัติการ Mac มิฉะนั้นจะส่งคืนเท็จ
6

Ext.os.is.BlackBerry

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ BlackBerry มิฉะนั้นจะคืนค่าเป็นเท็จ
7

Ext.os.is.iOS

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ IOS มิฉะนั้นจะส่งคืนเท็จ
8

Ext.os.is.Android

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ระบบปฏิบัติการ Android มิฉะนั้นจะส่งคืนเท็จ

การตรวจจับอุปกรณ์

ซีเนียร์ No วิธีการและคำอธิบาย
1

Ext.os.is.iPad

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ iPad มิฉะนั้นจะส่งคืนเท็จ
2

Ext.os.is.iPhone

ฟังก์ชันนี้จะคืนค่าจริงหากคุณใช้ iPhone มิฉะนั้นจะส่งคืนเท็จ
3

Ext.os.is.iPod

ฟังก์ชั่นนี้จะคืนค่าจริงหากคุณใช้ iPod มิฉะนั้นจะส่งคืนเท็จ

เวอร์ชันของระบบปฏิบัติการ

ซีเนียร์ No วิธีการและคำอธิบาย
1

Ext.os.name

จะส่งคืนชื่อของระบบปฏิบัติการ
2

Ext.os.version.version

มันมีเวอร์ชันของระบบปฏิบัติการที่เราใช้อยู่

การตรวจจับเบราว์เซอร์

ซีเนียร์ No วิธีการและคำอธิบาย
1

Ext.browser.is.IE

ฟังก์ชันนี้จะคืนค่าจริงหากเราใช้เบราว์เซอร์ Internet explorer มิฉะนั้นจะคืนค่าเป็นเท็จ
2

Ext.browser.is.FF

ฟังก์ชันนี้จะคืนค่าจริงหากเราใช้เบราว์เซอร์ FireFox มิฉะนั้นจะคืนค่าเป็นเท็จ
3

Ext.browser.is.Chrome

ฟังก์ชันนี้จะคืนค่าจริงหากเราใช้เบราว์เซอร์ Chrome มิฉะนั้นจะคืนค่าเป็นเท็จ
4

Ext.browser.is.Opera

ฟังก์ชันนี้จะคืนค่าจริงหากเราใช้เบราว์เซอร์ Opera มิฉะนั้นจะคืนค่าเป็นเท็จ
5

Ext.browser.is.Safari

ฟังก์ชันนี้จะคืนค่าจริงหากเราใช้เบราว์เซอร์ Safari มิฉะนั้นจะคืนค่าเป็นเท็จ

ฟังก์ชัน Ext.browser นี้มีฟังก์ชันอื่น ๆ อีกมากมาย -

ซีเนียร์ No วิธีการและคำอธิบาย
1

Ext.browser.userAgent

ส่งคืน userAgent ปัจจุบัน
2

Ext.browser.isSecure

จะคืนค่าเป็นจริงหากเพจปัจจุบันใช้ SSL
3

Ext.browser.isStrict

จะคืนค่าจริงหากเบราว์เซอร์อยู่ในโหมดเข้มงวด
4

Ext.browser.engineName

จะส่งคืนชื่อเอ็นจิ้นของเบราว์เซอร์ (WebKit, Gecko, Presto, Trident และอื่น ๆ )
5

Ext.browser.engineVersion

จะส่งคืนเวอร์ชันของโปรแกรมเบราว์เซอร์

คุณสมบัติ

Ext.feature. มีไว้เพื่อตรวจสอบว่าเบราว์เซอร์มีคุณสมบัติดังต่อไปนี้หรือไม่

ซีเนียร์ No วิธีการและคำอธิบาย
1

Ext.feature.has.Audio

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณสมบัติแท็กเสียงของ html5
2

Ext.feature.has.Canvas

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณลักษณะแท็ก canvas ของ html5
3

Ext.feature.has.classList

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณลักษณะ classlist ของ html5 ซึ่งใช้ในการเพิ่มลบและสลับคลาส css สำหรับองค์ประกอบ html
4

Ext.feature.has.Css3dTransforms

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณลักษณะ Css 3d Transform ของ css3
5

Ext.feature.has.CssAnimations

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนภาพเคลื่อนไหวของ css3
6

Ext.feature.has.CssTransforms

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณสมบัติการแปลง Css ของ css3
7

Ext.feature.has.CssTransitions

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณสมบัติการเปลี่ยนของ css3
8

Ext.feature.has.DeviceMotion

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณสมบัติการเคลื่อนไหวของอุปกรณ์
9

Ext.feature.has.Geolocation

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณลักษณะ Geolocation ของ html5
10

Ext.feature.has.History

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์รองรับคุณลักษณะประวัติของ html
11

Ext.feature.has.Orientation

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สามารถตรวจพบว่าการวางแนวอุปกรณ์ใด
12

Ext.feature.has.OrientationChange

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์ตรวจพบการเปลี่ยนแปลงในการวางแนวของอุปกรณ์
13

Ext.feature.has.Range

Range คือประเภทของแท็กอินพุต html สำหรับองค์ประกอบตัวเลื่อนช่วงดังนั้นหากเบราว์เซอร์สนับสนุนตัวเลื่อนฟังก์ชันนี้จะส่งคืนจริง
14

Ext.feature.has.SqlDatabase

ฐานข้อมูล Web sql เป็น API ของหน้าเว็บสำหรับจัดเก็บข้อมูล n ฐานข้อมูลที่เราสามารถดำเนินการสืบค้นได้ วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนฐานข้อมูลเว็บ Sql
15

Ext.feature.has.Svg

Svg ย่อมาจาก Scalable Vector Graphics วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนคุณลักษณะ svg ของ html 5
16

Ext.feature.has.Touch

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์มีคุณสมบัติ Touch
17

Ext.feature.has.Video

วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์สนับสนุนแท็กวิดีโอ html 5
18

Ext.feature.has.Vml

Vml ย่อมาจากภาษามาร์กอัปเวกเตอร์ซึ่งเป็นภาษามาร์กอัปที่ใช้ xml ดังนั้นวิธีนี้จะคืนค่าจริงหากเบราว์เซอร์รองรับ vml
19

Ext.feature.has.WebSockets

เว็บซ็อกเก็ตเป็นโปรโตคอลการสื่อสารสำหรับคอมพิวเตอร์ที่รองรับการสื่อสารสองแบบระหว่างไคลเอนต์และเซิร์ฟเวอร์ วิธีนี้จะคืนค่าจริงหากเบราว์เซอร์รองรับ WebSockets มิฉะนั้นจะส่งคืนเท็จ

เหตุการณ์คือสิ่งที่เกิดขึ้นเมื่อมีบางสิ่งเกิดขึ้นกับชั้นเรียน ตัวอย่างเช่นเมื่อมีการคลิกปุ่มหรือก่อน / หลังการแสดงผลองค์ประกอบ

วิธีการเขียนเหตุการณ์

ต่อไปนี้เป็นวิธีการเขียนเหตุการณ์

  • เหตุการณ์ในตัวโดยใช้ผู้ฟัง
  • การแนบกิจกรรมในภายหลัง
  • เหตุการณ์ที่กำหนดเอง

เหตุการณ์ในตัวโดยใช้ Listeners

Sencha Touch ให้คุณสมบัติผู้ฟังสำหรับการเขียนเหตุการณ์และเหตุการณ์ที่กำหนดเองในไฟล์ Sencha Touch

การเขียนผู้ฟังใน Sencha Touch

เราจะเพิ่ม Listener ในโปรแกรมก่อนหน้านี้เองโดยการเพิ่มคุณสมบัติ listen ในพาเนลดังต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha', launch: function() {
               Ext.create('Ext.Panel', {
                  html: 'My Panel', fullscreen: true, listeners: {
                     painted: function() {
                        Ext.Msg.alert('I was painted to the screen');
                     }
                  }
               });
            }
         });
      </script> 
   </head>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีนี้เรายังสามารถเขียนหลายเหตุการณ์ในคุณสมบัติผู้ฟัง

หลายเหตุการณ์ในผู้ฟังคนเดียวกัน

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">   
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on({
                  tap: function() {
                     var randomWidth = 100 + Math.round(Math.random() * 200);
                     this.setWidth(randomWidth);
                  },
                  widthchange: function(button, newWidth, oldWidth) {
                     alert('My width changed from ' + oldWidth + ' to ' + newWidth);
                  }
               });
            }
         });       
      </script> 
   </head>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

กำลังแนบกิจกรรมในภายหลัง

ในวิธีการเขียนเหตุการณ์ก่อนหน้านี้เราได้เขียนเหตุการณ์ในผู้ฟังในเวลาที่สร้างองค์ประกอบ

อีกวิธีหนึ่งในการแนบกิจกรรมมีดังนี้ -

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });
               
               myButton.on('tap', function() {
                  alert("Event listener attached by .on");
               });
            }
         });
      </script> 
   </head>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

เหตุการณ์ที่กำหนดเอง

เราสามารถเขียนเหตุการณ์ที่กำหนดเองใน Sencha Touch และเริ่มเหตุการณ์ด้วยเมธอด fireEvent ตัวอย่างต่อไปนี้อธิบายวิธีการเขียนเหตุการณ์ที่กำหนดเอง

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: "Just wait 5 seconds",

                  listeners: {
                     myEvent: function(button, points) {
                        alert('myEvent was fired! You score ' + points + ' points');
                     }
                  }
               });

               Ext.defer(function() {
                  var number = Math.ceil(Math.random() * 100);
                  myButton.fireEvent('myEvent', myButton, number);
               }, 5000);
            }
         });
      </script> 
   </head>
</html>

เมื่อโหลดหน้าและเอกสารพร้อมแล้วหน้า UI พร้อมปุ่มจะปรากฏขึ้นและในขณะที่เรากำลังเริ่มเหตุการณ์หลังจาก 5 วินาทีเมื่อเอกสารพร้อมแล้วกล่องแจ้งเตือนจะปรากฏขึ้นหลังจาก 5 วินาที

ที่นี่เราได้เขียนเหตุการณ์ที่กำหนดเอง 'myEvent' และเรากำลังเริ่มต้นเหตุการณ์เป็น button.fireEvent (eventName);

เค้าโครงเป็นวิธีการจัดเรียงองค์ประกอบในคอนเทนเนอร์ ซึ่งอาจเป็นแนวนอนแนวตั้งหรืออื่น ๆ Sencha Touch มีเลย์เอาต์ที่แตกต่างกันที่กำหนดไว้ในไลบรารีแม้ว่าเราจะสามารถเขียนเค้าโครงที่กำหนดเองได้เช่นกัน

ซีเนียร์ เค้าโครงและคำอธิบาย
1 hBox

เค้าโครงนี้ช่วยให้สามารถกระจายองค์ประกอบในแนวนอนได้
2 vBox

เค้าโครงนี้ช่วยให้สามารถกระจายองค์ประกอบในแนวตั้งได้ นี่คือหนึ่งในเค้าโครงที่ใช้กันทั่วไป
3 พอดี

ในเค้าโครงนี้คอนเทนเนอร์จะเต็มไปด้วยแผงเดียวและเมื่อไม่มีข้อกำหนดเฉพาะที่เกี่ยวข้องกับเค้าโครงก็จะใช้เค้าโครงนี้
4 การ์ด (TabPanel)

เค้าโครงนี้จัดเรียงส่วนประกอบต่างๆตามแบบแท็บ แท็บจะแสดงที่ด้านบนของคอนเทนเนอร์ ทุกครั้งที่มองเห็นเพียงแท็บเดียวและแต่ละแท็บถือเป็นส่วนประกอบที่แตกต่างกัน

Sencha Touch มาพร้อมกับการสนับสนุนประวัติเต็มรูปแบบและสิ่งอำนวยความสะดวกในการเชื่อมโยงในรายละเอียด

มีฟังก์ชันปุ่มย้อนกลับที่ง่ายที่สุดซึ่งช่วยให้ผู้ใช้นำทางไปมาระหว่างหน้าจอโดยไม่ต้องรีเฟรชหน้าหรือแอปพลิเคชัน

นอกจากนี้ยังมีฟังก์ชันเส้นทางซึ่งช่วยให้ผู้ใช้นำทางไปยัง URL ใด ๆ ตาม URL ที่ให้ไว้ในหน้าต่างเบราว์เซอร์เรียกใช้ฟังก์ชันเฉพาะเพื่อดำเนินการเฉพาะ

ดูตัวอย่างการทำงานของปุ่มย้อนกลับต่อไปนี้

ตัวอย่างนี้แสดงรายการที่ซ้อนกันซึ่งไม่มีอะไรเลยนอกจากเป็นรายการภายในรายการดังนั้นเมื่อคุณคลิกรายการใดรายการหนึ่งรายการใดรายการหนึ่งรายการใดรายการหนึ่งจะเปิดรายการอื่นและปุ่มย้อนกลับจะปรากฏที่ด้านบนของหน้าจอ

สำหรับฐานรหัสที่สมบูรณ์คุณสามารถตรวจสอบได้ รายการที่ซ้อนกันภายใต้ส่วนดูส่วนประกอบ

การกำหนดเส้นทาง

ตัวอย่างเส้นทางที่ง่ายที่สุด

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
		 'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

ในตัวอย่างข้างต้นหาก URL ของเบราว์เซอร์คือ https://myApp.com/#login ฟังก์ชัน showLogin จะถูกเรียกใช้

เราสามารถระบุพารามิเตอร์ใน URL และขึ้นอยู่กับพารามิเตอร์เฉพาะที่ฟังก์ชันสามารถเรียกใช้ได้ ตัวอย่างเช่นหาก URL คือ https://myApp.com/#user/3 ฟังก์ชันอื่นจะถูกเรียกใช้ userId และสามารถใช้ ID เฉพาะภายในฟังก์ชันได้

การกำหนดเส้นทางล่วงหน้า

บางครั้งเรามีพารามิเตอร์ล่วงหน้าซึ่งรวมถึงลูกน้ำช่องว่างและอักขระพิเศษเป็นต้นสำหรับสิ่งนี้หากเราใช้วิธีการเขียนเส้นทางข้างต้นมันจะไม่ได้ผล เพื่อแก้ปัญหานี้ Sencha touch ให้การกำหนดเส้นทางตามเงื่อนไขซึ่งเราสามารถระบุเงื่อนไขของข้อมูลประเภทใดที่พารามิเตอร์ควรยอมรับ

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }      
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }     
   }
});

ดังตัวอย่างข้างต้นเราได้กำหนด regex ในเงื่อนไขซึ่งระบุอย่างชัดเจนว่าข้อมูลประเภทใดที่ควรได้รับอนุญาตเป็นพารามิเตอร์ URL

การแบ่งปัน URL เดียวกันในโปรไฟล์อุปกรณ์ต่างๆ

เนื่องจาก Sencha touch มีโปรไฟล์อุปกรณ์ดังนั้นจึงสามารถใช้รหัสแอปพลิเคชันเดียวกันในอุปกรณ์หลายเครื่องจึงอาจมีความเป็นไปได้ที่โปรไฟล์ที่แตกต่างกันอาจมีฟังก์ชันการทำงานที่แตกต่างกันสำหรับ URL เดียวกัน

เพื่อแก้ไขปัญหานี้ Sencha touch ช่วยให้เรามีอิสระในการเขียนเส้นทางในตัวควบคุมหลักและฟังก์ชันที่เรียกว่าจะเขียนในโปรไฟล์ทั้งหมดพร้อมกับโปรไฟล์เฉพาะของพวกเขา

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

ดังตัวอย่างแสดงให้เห็นว่าเรามีตัวควบคุมหลักหนึ่งตัวที่มีฟังก์ชัน showLogin และเรามีสองโปรไฟล์ที่แตกต่างกัน (โทรศัพท์ / แท็บเล็ต) ทั้งสองโปรไฟล์มีฟังก์ชัน showLogin พร้อมรหัสที่แตกต่างกันเฉพาะสำหรับโปรไฟล์

ด้วยวิธีนี้เราสามารถแชร์ URL เดียวกันในอุปกรณ์โปรไฟล์หลายเครื่องพร้อมฟังก์ชันเฉพาะ

Sencha Touch ให้การกำหนดค่า XHR2 เพื่อทำงานร่วมกับการพัฒนา Ajax และ Ajax2

XHR2 คือ xmlHttpRequest ระดับ 2 ซึ่งใช้ในการร้องขอข้อมูลจากเซิร์ฟเวอร์ สำหรับเว็บแอปพลิเคชันใด ๆ ข้อมูลจะอยู่ที่เซิร์ฟเวอร์และเมื่อโหลดเพจแล้วควรเข้าถึงข้อมูลจากเซิร์ฟเวอร์ด้วยความช่วยเหลือของคำขอของ Ajax

XHR2 ใน Sencha Touch มีคุณสมบัติแถบความคืบหน้าซึ่งแสดงให้ผู้ใช้เห็นจำนวนข้อมูลที่ถ่ายโอนสำหรับคำขอเฉพาะ XHR2 ถูกเพิ่มเข้ามาใหม่ดังนั้นเราจึงต้องตรวจสอบว่าเบราว์เซอร์รองรับหรือไม่

ต่อไปนี้เป็นฟังก์ชั่นตรวจสอบว่าเบราว์เซอร์รองรับ XHR2 หรือไม่ -

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

เรายังสามารถตรวจสอบได้ว่าเบราว์เซอร์รองรับการอัปโหลดแบบโปรเกรสซีฟด้วย XHR2 หรือไม่

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

คุณสมบัติใหม่ของ XHR2 รวมอยู่ใน Sencha Touch

ซีเนียร์ No คุณสมบัติและคำอธิบาย
1

XHR2: true

ใช้เพื่อเปิดและปิดฟังก์ชัน XHR2 ในแอปพลิเคชัน
2

Ext.field.File

มีการเพิ่มฟิลด์ไฟล์ใหม่เพื่อเพิ่มความสามารถเพิ่มเติมเกี่ยวกับประเภทของฟิลด์
3

Ext.field.FileInput

สิ่งนี้เพื่อให้ FileInput
4

Ext.progressIndicator

นี่คือการระบุเปอร์เซ็นต์ที่แน่นอนของข้อมูลที่ถ่ายโอนในแง่ของแถบความคืบหน้า
5

xtype: fileinput

เพื่อสร้างอินสแตนซ์ของคลาส fileInput
6

xtype: filefield

เพื่อสร้างอินสแตนซ์ของคลาสไฟล์
7

responseType : value

พารามิเตอร์นี้อนุญาตให้มีการตอบกลับประเภทต่างๆเป็นข้อความเอกสารหยด ฯลฯ

ต่อไปนี้เป็นตัวอย่างในการส่งคำขอ ajax แบบธรรมดาที่มีและไม่มีพารามิเตอร์และการอัปโหลดไฟล์โดยใช้ ajax

คำขอ Ajax อย่างง่ายโดยไม่มีพารามิเตอร์ - สำเร็จ

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างข้างต้นแสดงการเรียก ajax ที่ประสบความสำเร็จเนื่องจาก URL ที่กล่าวถึงนั้นถูกต้อง ในตัวอย่างนี้เราไม่ได้ส่งผ่านพารามิเตอร์ใด ๆ แต่เป็นเพียงคำขอ ajax ธรรมดา ๆ ที่ตรงกับ URL ที่กล่าวถึง

หากคุณใช้เบราว์เซอร์ Chrome ในเครื่องมือสำหรับนักพัฒนาให้ไปที่ส่วนเครือข่ายคุณจะเห็นคำขอที่กำลังส่งและการตอบกลับที่เราได้รับ

คำขอ Ajax อย่างง่ายโดยไม่มีพารามิเตอร์ - ความล้มเหลว

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ในตัวอย่างข้างต้นเพียงเพื่อแสดงให้เห็นว่า ajax failure ทำงานอย่างไรเราได้กล่าวถึง URL ที่ไม่ถูกต้อง เปรียบเทียบสิ่งนี้กับตัวอย่างก่อนหน้านี้คุณจะพบความแตกต่าง

การส่งพารามิเตอร์ในคำขอ Ajax

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ในตัวอย่างนี้เรากำลังส่งผ่านพารามิเตอร์ด้วย ajax โดยใช้ data property ของ ajax call

การอัปโหลดไฟล์โดยใช้ Ajax

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างนี้แสดงวิธีการอัปโหลดข้อมูลโดยใช้ ajax call ในตัวอย่างนี้เรากำลังใช้ตัวบ่งชี้แถบความคืบหน้าเพื่อแสดงความคืบหน้าขณะอัปโหลดไฟล์

Sencha Touch มีส่วนประกอบ UI ที่หลากหลายซึ่งสามารถปรับแต่งได้ตามความต้องการ

ซีเนียร์ N0. ส่วนประกอบและคำอธิบาย
1 ม้าหมุน

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงภาพหมุน
2 รายการ

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงรายการ
3 รายการที่ซ้อนกัน

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงรายการที่ซ้อนกัน
4 แบบฟอร์ม

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงฟอร์ม
5 แผนภูมิ

องค์ประกอบ UI นี้ใช้เพื่อแสดงแผนภูมิประเภทต่างๆ
6 ส่วนประกอบลอยน้ำ

ส่วนประกอบ UI นี้ใช้เพื่อแสดงส่วนประกอบแบบลอย
7 แผงแท็บ

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงมุมมองแผงแท็บ
8 มุมมองการนำทาง

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงมุมมองการนำทาง
9 เมนูการดำเนินการ

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงแถบเมนูการทำงาน
10 มุมมองข้อมูล

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงมุมมองข้อมูล
11 แผนที่

คอมโพเนนต์ UI นี้ใช้เพื่อแสดงแผนที่ Google

Sencha Touch มาพร้อมกับคุณสมบัติบรรจุภัณฑ์ดั้งเดิม

ต่อไปนี้เป็นลิงค์สำหรับแนวคิดบรรจุภัณฑ์พื้นเมืองของ Sencha Touch

ซีเนียร์ ลิงก์แนวคิดและคำอธิบาย
1 การจัดเตรียมดั้งเดิมของ iOS
2 API ดั้งเดิม

แนวทางปฏิบัติที่ดีที่สุดของ JavaScript พื้นฐาน

เป็นแนวทางปฏิบัติที่ดีในการเก็บโค้ดที่เกี่ยวข้องกับ JavaScript ทั้งหมดแยกจากกัน js (external JS) แทนที่จะเขียนลงในไฟล์ <script> ภายใต้ส่วนหัวหรือ inline JavaScript ในเนื้อหาของเอกสาร

ทำการตรวจสอบค่าว่างเสมอก่อนที่จะใช้องค์ประกอบในตรรกะต่อไป

ปฏิบัติตามหลักการตั้งชื่อเสมอเนื่องจากโปรแกรมเมอร์คนอื่น ๆ จะเข้าใจโค้ดได้ง่าย

เพื่อให้โค้ดเข้าใจง่ายขอแนะนำให้เขียนความคิดเห็นสำหรับเมธอด JS ด้วยตรรกะที่ชัดเจนเบื้องหลังการทำงานของฟังก์ชัน

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Sencha Touch โดยเฉพาะ

ใช้โครงสร้างโฟลเดอร์ที่แนะนำของ Sencha Touch ซึ่งจะเป็นประโยชน์ในระหว่างการบีบอัด JS หรือการย่อขนาด

ขอแนะนำอย่างยิ่งให้ใช้ Listener (onclick / onblur ฯลฯ ) ในคอนโทรลเลอร์แทนการเขียนในหน้า html เอง

อย่าสร้างอินสแตนซ์ร้านค้าเมื่อร้านค้าถูกเรียกจากมุมมอง

เมื่อเราสร้างอินสแตนซ์ของร้านค้าเราควรทำลายมันเสมอเนื่องจากจะส่งผลกระทบต่อประสิทธิภาพการทำงาน

ในขณะที่ใช้ Sencha Touch อย่าระบุไฟล์ JavaScript ธรรมดาอื่น ๆ ใช้ฟังก์ชันทั้งหมดจากคลาส Ext (กล่าวถึงในคอนโทรลเลอร์หรือยูทิลิตี้)

เมื่อการแม็ปโมเดลและชื่อเหมือนกันอย่าระบุการแม็ป ชื่อเท่านั้นที่จะแก้วัตถุประสงค์

อย่าใช้คุณสมบัติที่ไม่จำเป็นในมุมมอง ใช้เฉพาะคุณสมบัติที่จำเป็นและค่าซึ่งแตกต่างจากค่าเริ่มต้น

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved