Ext.js - คำถามและคำตอบ

Ext JS ย่อมาจาก JavaScript แบบขยาย เป็นกรอบงาน JavaScript เพื่อพัฒนาแอปพลิเคชันเดสก์ท็อปบนเว็บ UI

เป็นผลิตภัณฑ์ Sencha ที่ขยายมาจาก YUI (ส่วนต่อประสานผู้ใช้ Yahoo)

ไฟล์เหล่านี้เป็นไฟล์หลักที่จะรวมไว้ในหน้า HTML เพื่อเรียกใช้โค้ด Ext JS -

• Ext-all.js
• Ext-all.css

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

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

• เพิ่มประสิทธิภาพการทำงานของทีมพัฒนาโดยการรวมเข้ากับสภาพแวดล้อมการพัฒนาองค์กรผ่านปลั๊กอิน IDE

• ช่วยลดต้นทุนในการพัฒนาเว็บแอปพลิเคชัน

• เพิ่มขีดความสามารถให้ทีมสร้างแอปด้วยประสบการณ์ผู้ใช้ที่น่าสนใจ

• มีชุดวิดเจ็ตสำหรับทำให้ UI มีประสิทธิภาพและใช้งานง่าย

• เป็นไปตามสถาปัตยกรรม MVC ดังนั้นโค้ดที่อ่านได้สูง

• ขนาดของห้องสมุดมีขนาดใหญ่ประมาณ 500 KB ซึ่งทำให้เวลาในการโหลดครั้งแรกมากขึ้นและทำให้แอปพลิเคชันช้า

• HTML เต็มไปด้วยแท็ก <DIV> ทำให้ซับซ้อนและแก้ไขจุดบกพร่องได้ยาก

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

• บางครั้งสำหรับการโหลดแม้แต่สิ่งง่ายๆก็ต้องใช้การเข้ารหัสไม่กี่บรรทัดซึ่งง่ายกว่าใน html หรือ Jquery ธรรมดา

• ต้องการนักพัฒนาที่มีประสบการณ์มากในการพัฒนาแอปพลิเคชัน Ext JS

Ext JS รองรับความเข้ากันได้ข้ามเบราว์เซอร์รองรับเบราว์เซอร์หลักทั้งหมดเช่น -

• IE 6 ขึ้นไป
• Firefox 3.6 ขึ้นไป
• Chrome10 ขึ้นไป
• Safari 4 ขึ้นไป
• Opera 11 ขึ้นไป

Ext JS 4+ รองรับสถาปัตยกรรม MVC (Model view controller) จาก Ext JS 5 เริ่มรองรับ MVVM (Model View Viewmodel) ด้วย

Ext JS 6 เป็น Ext JS เวอร์ชันล่าสุดซึ่งมีประโยชน์หลักที่สามารถใช้ได้กับทั้งเดสก์ท็อปและแอพพลิเคชั่นมือถือ โดยทั่วไปจะเป็นการรวม Ext JS (แอปพลิเคชันเดสก์ท็อป) และ Sencha touch (แอปพลิเคชันมือถือ)

Ext JS เป็นเฟรมเวิร์ก JavaScript ดังนั้นในการเริ่มใช้งานคุณควรใช้ความรู้ HTML และ JS มาก่อน (ไม่ใช่ระดับผู้เชี่ยวชาญ แต่ควรมีความเข้าใจพื้นฐาน) จากนั้นจึงต้องทำความเข้าใจพื้นฐานดังนั้นให้เวลาและค่อยๆเรียนรู้

ทั้งสองเฟรมเวิร์กแตกต่างกันมากเราสามารถเปรียบเทียบ Ext JS และ jQuery UI ได้เนื่องจาก Ext JS เป็นเฟรมเวิร์ก UI ที่สมบูรณ์แบบ แต่ Ext JS ยังมีส่วนประกอบอีกมากมายจากนั้น jQuery UI

Ext JS 1.1

Ext JS เวอร์ชันแรกได้รับการพัฒนาโดย Jack Slocum ในปี 2549 เป็นชุดของคลาสยูทิลิตี้ซึ่งเป็นส่วนเสริมของ YUI เขาตั้งชื่อห้องสมุดว่า YUI-ext

Ext JS 2.0

Ext JS เวอร์ชัน 2.0 เปิดตัวในปี 2550 เวอร์ชันนี้มีเอกสาร API ใหม่สำหรับแอปพลิเคชันเดสก์ท็อปที่มีคุณสมบัติ จำกัด เวอร์ชันนี้ไม่มีความเข้ากันได้แบบย้อนหลังกับ Ext JS เวอร์ชันก่อนหน้า

Ext JS 3.0

Ext JS เวอร์ชัน 3.0 เปิดตัวในปี 2009 เวอร์ชันนี้ได้เพิ่มคุณสมบัติใหม่เป็นแผนภูมิและมุมมองรายการ แต่ด้วยราคาที่รวดเร็ว มันเข้ากันได้กับเวอร์ชัน 2.0

Ext JS 4.0

หลังจากการเปิดตัว Ext JS 3 ผู้พัฒนา Ext JS มีความท้าทายที่สำคัญในการเพิ่มความเร็ว Ext JS เวอร์ชัน 4.0 เปิดตัวในปี 2554 มีโครงสร้างที่ได้รับการแก้ไขอย่างสมบูรณ์ซึ่งตามด้วยสถาปัตยกรรม MVC และแอปพลิเคชันที่รวดเร็ว

Ext JS 5.0

Ext JS เวอร์ชัน 5.0 เปิดตัวในปี 2014 การเปลี่ยนแปลงที่สำคัญในรุ่นนี้คือการเปลี่ยนสถาปัตยกรรม MVC เป็นสถาปัตยกรรม MVVM รวมถึงความสามารถในการสร้างแอปเดสก์ท็อปบนอุปกรณ์ที่รองรับระบบสัมผัสการเชื่อมโยงข้อมูลสองทางเค้าโครงที่ตอบสนองและคุณสมบัติอื่น ๆ อีกมากมาย

Ext JS 6.0

Ext JS 6 ผสานกรอบ Ext JS (สำหรับแอปพลิเคชันเดสก์ท็อป) และ Sencha touch (สำหรับแอปพลิเคชันมือถือ)

Ext JS มีส่วนประกอบ UI ที่หลากหลายส่วนประกอบที่ใช้หลัก ๆ ได้แก่ -

• Grid
• Form
• กล่องข้อความ
• แถบความคืบหน้า
• เคล็ดลับเครื่องมือ
• Window
• ตัวแก้ไข HTML
• Charts

xType กำหนดประเภทของคอมโพเนนต์ Ext JS UI ซึ่งถูกกำหนดระหว่างการแสดงผลของคอมโพเนนต์ เช่น textField, Numeric, button เป็นต้น

นี่คือประเภทการตรวจสอบที่สามารถปรับแต่งได้อย่างง่ายดาย ประเภท vType ไม่กี่รายการที่ Ext JS มีให้คือ -

alphanumText - สิ่งนี้จะคืนค่าเป็นเท็จหากข้อความที่ป้อนมีสัญลักษณ์อื่นที่ไม่ใช่ค่าตัวอักษรหรือตัวเลข

emailText - สิ่งนี้จะส่งกลับเท็จหากข้อความไม่ใช่ที่อยู่อีเมลที่ถูกต้อง

ใช่ Ext JS สามารถรวมกับ Ajax การใช้งานเป็น: สมมติว่าในกล่องข้อความบางส่วนหลังจากเบลอจะต้องตรวจสอบความถูกต้องของข้อมูลจากเซิร์ฟเวอร์เพื่อให้เราสามารถมี Ajax call onblur / onchange เป็นรหัสกล่องข้อความเพื่อตรวจสอบว่าข้อมูลที่ป้อนในกล่องข้อความมีอยู่ในเซิร์ฟเวอร์ / ฐานข้อมูลหรือไม่ .

ใช่ Ext JS สามารถรวมเข้ากับเฟรมเวิร์กฝั่งเซิร์ฟเวอร์อื่น ๆ เช่น Java, .net, Ruby บนราง, PHP, ColdFusion เป็นต้น

Ext JS สามารถนำไปใช้กับสภาพแวดล้อมการพัฒนารวม (IDE) ที่เป็นที่นิยมเช่น Eclipse, Aptana, Sublime, Webstrom เป็นต้น

ต่อไปนี้เป็นสองสามวิธีในการเข้าถึงองค์ประกอบ DOM ใน Ext JS -

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

สถาปัตยกรรม MVVM คือ Model View Viewmodel ในตัวควบคุมสถาปัตยกรรม MVVM ของ MVC จะถูกแทนที่ด้วย ViewModel

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

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () เป็นวิธีแรกที่เรียกเมื่อ DOM โหลดเต็มที่เพื่อให้องค์ประกอบใด ๆ ที่คุณต้องการอ้างถึงจะพร้อมใช้งานเมื่อสคริปต์ทำงาน

Ext.select('div').on('click', function(){
// statement to perform logic
});

กล่องแจ้งเตือนประเภทต่างๆใน Ext JS ได้แก่ -

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

คลาสพื้นฐานสำหรับ Store คือ Ext.data.Store

สำหรับรุ่นคือ Ext.data.Model

สำหรับ Controller คือ Ext.app.controller

นี่คือวิธีต่างๆในการจัดการเหตุการณ์ -

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

Store.getCount() - สำหรับบันทึกที่เก็บไว้

Store.getTotalCount() - สำหรับจำนวนระเบียนทั้งหมดในฐานข้อมูล

Store.getModifiedRecords () ใช้เมธอดเพื่อรับเร็กคอร์ดที่แก้ไข

Store.commitChanges () วิธีการอัปเดตการเปลี่ยนแปลงที่เก็บ

ถ้าเรามี grid Id: Ext.getCmp ('gridId'). getStore (). getAt (index);

ถ้าเรามี Store Id: Ext.getStore ('storeId'). getAt (index);

Store.load ();

• คลาสพื้นฐานสำหรับ Grid - Ext.grid.GridPanel
• สำหรับแบบฟอร์ม - Ext.form.Panel
• สำหรับแผง - Ext.panel.Panel
• สำหรับแผนภูมิ - Ext.chart.Chart
• สำหรับต้นไม้ - Ext.tree.Panel

เลย์เอาต์ประเภทต่างๆ ได้แก่ -

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

สามารถทำได้โดยใช้ pagingToolbar () เป็น -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Loadmask ใช้เพื่อป้องกันการดำเนินการอื่น ๆ โดยการแสดงการโหลด (หรือข้อความที่กำหนดเอง) ให้กับผู้ใช้จนกว่าข้อมูลจะถูกส่งไปยังกริด Loadmask: จริง; เป็นคุณสมบัติในการแสดง loadmask ในขณะที่ข้อมูลถูกแสดงไปยังกริด

Renderer ใช้เมื่อเราต้องการจัดการข้อมูลที่ได้รับจากร้านค้าเพื่อแสดงข้อมูลที่ปรับเปลี่ยนตามเกณฑ์บางอย่าง เป็นคุณสมบัติของคอลัมน์ที่สามารถใช้เป็น -

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). getValue ();

ซ่อน: จริง;

เรียงได้: จริง; ซึ่งเป็นค่าเริ่มต้นจริง

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 มีชุดเครื่องมือซึ่งสามารถรวมองค์ประกอบภาพของทั้งกรอบงาน (Ext JS และ Sencha Touch)

สามารถเพิ่มเป็น -

'toolkit': 'classic', // หรือ 'modern'

หากชุดเครื่องมือเป็นแบบคลาสสิกจะมีเฟรมเวิร์กแอปพลิเคชันเดสก์ท็อป Ext JS

และหากชุดเครื่องมือทันสมัยก็จะรวมเฟรมเวิร์กแอปพลิเคชันมือถือ sencha touch