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 - Themes
Ext.js - Themes
Ext.js provides a number of themes to be used in your apppcations. You can add a different theme in place of a classic theme and see the difference in the output. This is done simply by replacing the theme CSS file as explained ahead.
Neptune Theme
Consider your very first Hello World apppcation. Remove the following CSS from the apppcation.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css
Add the following CSS to use the Neptune theme.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css
To see the effect, try the following program.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.Panel , {
renderTo: helloWorldPanel ,
height: 200,
width: 600,
title: Hello world ,
html: First Ext JS Hello World Program
});
});
</script>
</head>
<body>
<span id = "helloWorldPanel" />
</body>
</html>
The above program will produce the following result −
Crisp Theme
Consider your very first Hello World apppcation. Remove the following CSS from the apppcation.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css
Add the following CSS to use the Neptune theme.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css
To see the effect, try the following program.
<!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.Panel , {
renderTo: helloWorldPanel ,
height: 200,
width: 600,
title: Hello world ,
html: First Ext JS Hello World Program
});
});
</script>
</head>
<body>
<span id = "helloWorldPanel" />
</body>
</html>
The above program will produce the following result −
Triton Theme
Consider your very first Hello World apppcation. Remove the following CSS from the apppcation.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css
Add the following CSS to use the Triton theme.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css
To see the effect, try the following program.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-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.Panel , {
renderTo: helloWorldPanel ,
height: 200,
width: 600,
title: Hello world ,
html: First Ext JS Hello World Program
});
});
</script>
</head>
<body>
<span id = "helloWorldPanel" />
</body>
</html>
The above program will produce the following result −
Gray Theme
Consider your very first Hello World apppcation. Remove the following CSS from the apppcation.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css
Add the following CSS to use the Gray theme.
https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css
To see the effect, try the following program.
<!DOCTYPE html>
<html>
<head>
<pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-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.Panel , {
renderTo: helloWorldPanel ,
height: 200,
width: 600,
title: Hello world ,
html: First Ext JS Hello World Program
});
});
</script>
</head>
<body>
<span id = "helloWorldPanel" />
</body>
</html>
The above program will produce the following result −
Advertisements