Ext.js - การเข้าถึง
โดยทั่วไปความสามารถในการเข้าถึงหมายถึงความพร้อมใช้งานเนื้อหาสามารถเข้าถึงได้หมายความว่ามีเนื้อหา
ในแง่ของซอฟต์แวร์แอปพลิเคชันสามารถเข้าถึงได้หมายความว่าแอปพลิเคชันนี้มีให้สำหรับทุกคน ในที่นี้หมายถึงผู้พิการผู้พิการทางสายตาหรือผู้ที่ใช้โปรแกรมอ่านหน้าจอเพื่อใช้คอมพิวเตอร์หรือผู้ที่ต้องการนำทางโดยใช้แป้นพิมพ์แทนการใช้เมาส์ การนำทางด้วยแป้นพิมพ์แทนการใช้เมาส์
แอปพลิเคชันที่สามารถเข้าถึงได้เรียกว่า ARIA (Accessible Rich Internet Applications)
การเข้าถึงใน Ext JS
Ext JS ได้รับการออกแบบมาเพื่อให้ทราบว่าควรใช้งานได้กับการนำทางแป้นพิมพ์ทั้งหมด มีการสร้างดัชนีแท็บในตัวและความสามารถในการโฟกัสและจะเปิดใช้งานตามค่าเริ่มต้นเสมอดังนั้นเราจึงไม่จำเป็นต้องเพิ่มคุณสมบัติใด ๆ เพื่อเปิดใช้งานฟังก์ชันนี้
ฟังก์ชันนี้ช่วยให้ส่วนประกอบที่เปิดใช้งานแป้นพิมพ์ทั้งหมดสามารถโต้ตอบกับผู้ใช้เมื่อถูกแท็บเข้าไป ตัวอย่างเช่นเราสามารถใช้แท็บเพื่อไปยังส่วนประกอบถัดไปแทนเมาส์ ในทำนองเดียวกันเราสามารถใช้ shift + tab เพื่อเลื่อนไปข้างหลังและใช้ enter บนแป้นพิมพ์เพื่อคลิกเป็นต้น
เน้นสไตล์และแท็บ
โฟกัสถูกสร้างขึ้นใน Extjs เมื่อใช้การกดแป้นพิมพ์สำหรับการแท็บ
ตัวอย่างต่อไปนี้แสดงวิธีการเปลี่ยนสไตล์เมื่อโฟกัสเปลี่ยนไปพร้อมกับแท็บ
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript">
Ext.onReady(function(){
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('button1'),
text: 'Button1',
listeners: {
click: function() {
Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');
}
}
});
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('button2'),
text: 'Button2',
listeners: {
click: function() {
Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');
}
}
});
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('button3'),
text: 'Button3',
listeners: {
click: function() {
Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');
}
}
});
});
</script>
</head>
<body> <p>Please click the button to see event listener:</p>
<span id = "button3"/>
<span id = "button2"/>
<span id = "button1"/>
</body>
</html>หากต้องการดูเอฟเฟกต์ให้ใช้แท็บสำหรับการย้ายจากปุ่มถัดไปและแท็บ shft + สำหรับการโฟกัสย้อนกลับ ใช้ Enter และดูว่าการแจ้งเตือนที่เกี่ยวข้องของปุ่มโฟกัสจะปรากฏขึ้นอย่างไร
ธีม ARIA
ExtJS จัดเตรียมธีมสำหรับผู้พิการทางสายตา
ตัวอย่างต่อไปนี้แสดงธีม aria ซึ่งสามารถเข้าถึงได้ง่ายสำหรับผู้พิการทางสายตา
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript">
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
// Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
Ext.onReady(function() {
// Store data
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// Creation of first grid store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel',
data: myData
});
// Creation of first grid
var firstGrid = Ext.create('Ext.grid.Panel', {
store : firstGridStore,
columns :
[{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1,
sortable: true
},{
header: "Age",
dataIndex: 'age',
flex: .5,
sortable: true
},{
header: "Marks",
dataIndex: 'marks',
flex: .5,
sortable: true
}],
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
// Creation of a panel to show both the grids.
var displayPanel = Ext.create('Ext.Panel', {
width : 600,
height : 200,
layout : {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo : 'panel',
defaults : { flex : 1 },
items : [
firstGrid
]
});
});
</script>
</head>
<body>
<div id = "panel" > </div>
</body>
</html>โปรแกรมข้างต้นจะให้ผลลัพธ์ดังต่อไปนี้ คุณสามารถใช้ปุ่มแท็บและเมาส์ขึ้นและลงเพื่อเลื่อนโฟกัสข้ามเส้นตารางและธีมนี้มีไว้สำหรับผู้พิการทางสายตาโดยทั่วไป