Ext.js Tutorial
Ext.js Useful Resources
Selected Reading
- Ext.js - Methods
- Ext.js - Debugging Code
- Ext.js - Accessibility
- Ext.js - Localization
- Ext.js - Drawing
- Ext.js - Style
- Ext.js - Fonts
- Ext.js - Data
- Ext.js - Custom Events and Listeners
- Ext.js - Themes
- Ext.js - Drag & Drop
- Ext.js - Components
- Ext.js - Layouts
- Ext.js - Containers
- Ext.js - Class System
- Ext.js - First Program
- Ext.js - Architecture
- Ext.js - Naming Convention
- Ext.js - Environment Setup
- Ext.js - Overview
- Ext.js - Home
Ext.js Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ext.js - Accessibility
Ext.js - Accessibipty
In general accessibipty means availabipty, the content is accessible means the content is available.
In software terms, the apppcation is accessible means the apppcation is available for all. Here, all means the persons with disabipties, the visually impaired or those who use screen readers to use a computer or those who prefer to navigate using the keyboard instead of using a mouse. navigation with keyboard instead of using a mouse.
Apppcations which are accessible are called ARIA (Accessible Rich Internet Apppcations).
Accessibipty in Ext JS
Ext JS is designed to keep this in mind that it should work with all keyboard navigations. It has built-in tab indexing and focus-abipty, and it is always on by default so we do not need to add any property to enable this functionapty.
This functionapty allows all keyboard-enabled components to interact with the user when tabbed into. For example, we can use tab for moving on to the next component instead of a mouse. Same way, we can use shift+tab for moving backward and use enter on the keyboard to cpck, etc.
Focus Stypng and Tabs
Focus is inbuilt in Extjs when using keystroke for tabbing.
Following example shows how to the style changes, when the focus changes with the tabs.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/pbs/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 ,
psteners: {
cpck: function() {
Ext.MessageBox.alert( Alert box , Button 1 is cpcked );
}
}
});
Ext.create( Ext.Button , {
renderTo: Ext.getElementById( button2 ),
text: Button2 ,
psteners: {
cpck: function() {
Ext.MessageBox.alert( Alert box , Button 2 is cpcked );
}
}
});
Ext.create( Ext.Button , {
renderTo: Ext.getElementById( button3 ),
text: Button3 ,
psteners: {
cpck: function() {
Ext.MessageBox.alert( Alert box , Button 3 is cpcked );
}
}
});
});
</script>
</head>
<body> <p>Please cpck the button to see event pstener:</p>
<span id = "button3"/>
<span id = "button2"/>
<span id = "button1"/>
</body>
</html>
To see the effect, use tab for moving from the next button and shft+tab for focusing backward. Use enter and see how the focused button s related alert would pop up.
ARIA Theme
ExtJS provides the theme aria for the visually impaired.
Following example shows the aria theme which is easily accessible for the visually impaired.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/pbs/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 : "Manap", 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 ,
apgn: stretch ,
padding: 5
},
renderTo : panel ,
defaults : { flex : 1 },
items : [
firstGrid
]
});
});
</script>
</head>
<body>
<span id = "panel" > </span>
</body>
</html>
The above program will produce the following result. You can use tab and mouse up and down keys for moving the focus across the grid and the theme is basically for the visually impaired people.
Advertisements