Ext.js - पहुंच-योग्यता
सामान्य पहुंच में उपलब्धता का मतलब है, सामग्री सुलभ है मतलब सामग्री उपलब्ध है।
सॉफ्टवेयर के संदर्भ में, आवेदन सुलभ है मतलब सभी के लिए आवेदन उपलब्ध है। यहां, सभी का अर्थ है विकलांग व्यक्ति, दृष्टिबाधित या जो स्क्रीन रीडर का उपयोग कंप्यूटर का उपयोग करने के लिए करते हैं या जो माउस का उपयोग करने के बजाय कीबोर्ड का उपयोग करके नेविगेट करना पसंद करते हैं। माउस का उपयोग करने के बजाय कीबोर्ड के साथ नेविगेशन।
जो एप्लिकेशन सुलभ हैं उन्हें ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) कहा जाता है।
एक्सटी जेएस में पहुंच
Ext JS को इस बात को ध्यान में रखकर बनाया गया है कि इसे सभी कीबोर्ड नेवीगेशन के साथ काम करना चाहिए। इसमें अंतर्निहित टैब इंडेक्सिंग और फ़ोकस-क्षमता है, और यह हमेशा डिफ़ॉल्ट रूप से होता है इसलिए हमें इस कार्यक्षमता को सक्षम करने के लिए किसी भी संपत्ति को जोड़ने की आवश्यकता नहीं है।
यह कार्यक्षमता सभी कुंजीपटल-सक्षम घटकों को उपयोगकर्ता के साथ बातचीत करने की अनुमति देती है, जब टैब किया जाता है। उदाहरण के लिए, हम माउस के बजाय अगले घटक पर जाने के लिए टैब का उपयोग कर सकते हैं। उसी तरह, हम पीछे जाने के लिए शिफ्ट + टैब का उपयोग कर सकते हैं और क्लिक करने के लिए कीबोर्ड पर एंटर का उपयोग कर सकते हैं, आदि।
फोकस स्टाइलिंग और टैब्स
टैबिंग के लिए कीस्ट्रोक का उपयोग करते समय फ़ोकस को एक्सटज में इनबिल्ट किया जाता है।
निम्न उदाहरण दिखाता है कि शैली कैसे बदलती है, जब टैब के साथ फ़ोकस बदलता है।
<!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>प्रभाव को देखने के लिए, अगले बटन से आगे बढ़ने के लिए टैब का उपयोग करें और पीछे की ओर ध्यान केंद्रित करने के लिए + टैब पर जाएं। एंटर का उपयोग करें और देखें कि फ़ोकस किए गए बटन का अलर्ट कैसे पॉप अप होगा।
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>उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा। ग्रिड पर ध्यान केंद्रित करने के लिए आप टैब और माउस अप और डाउन कीज़ का उपयोग कर सकते हैं और थीम मूल रूप से दृष्टिहीन लोगों के लिए है।