| Course Code: |
IN 781 |
| Course Abstract: |
This course provides instruction and practical exercises using the ExtJS JavaScript Library. The first day of this course examines the core features of the library which include the important Element object, event handling capabilities, and other utilities such as those for working with arrays, strings, and other data types. The second day introduces ExtJS Ajax capabilities, layouts, Panels, form components, and DataViews and begins to introduce the data-riven components such as TreePanels and ComboBoxes. The third day places heavy emphasis on using the GridPanel, TabPanels, and DataReaders. This day also features hands-on exercises for extending and creating custom components. Discussions on library loading techniques, performing custom builds, and creating custom themes also occur on this last day. This course does not cover JavaScript Fundamentals or any modern practices of JavaScript, such as OO best practices or advanced JavaScript language features. It focuses solely on the ExtJS library. Participants are responsible for being familiar with modern JavaScript concepts and practices before taking this course. Participants not familiar with modern JavaScript practices should take the 1-day course entitled: Modern JavaScript and Ajax Fundamentals.
|
| Audience: |
Primary audience: Developers interested in leveraging ExtJS in Web Applications Secondary: Server-side developers, other programmers interested in JavaScript or client-side frameworks
|
| Duration: |
3 days |
| Learning Outcomes: |
Upon completion of this course, the participant will be able to:
> Successfully implement the ExtJS JavaScript solutions in front-end applications > Utilize different ExtJS core functions including Ajax, DOM, and Event utilities > Incorporate (and extend) various components and layouts into applications > Customize and optimize solutions for tailored use |
| Course Topics: |
Introducing ExtJS ExtJS Overview Working with ExtJS The Underlying Core Library Setting up ExtJS ExtJS and Licensing The ExtJS Element Object Wrapping a DOM Node The ExtJS Event Model AJAX and ExtJS Introducing ExtJS Components Ext Buttons Ext MessageBox Introducing XTemplates Using Firebug with ExtJS Debugging ExtJS Apps Exercise – A First ExtJS Application
DOM, Events and Core Language Extensions The Ext Global Object Using DOMHelper Working with DOMQuery Selecting and Querying Nodes The Powerful Element Object Unwrapping the DOM Node from Element The ExtJS EventObject Event Handling and EventObject Using Ext.onReady() Events across browsers Browser Detection Inheritance Mechanisms in ExtJS Extending and Overriding More with XTemplates Arrays and Utility Functions Encoding/Decoding JSON CSS and Box Model Manipulation Number/Date/Currency/String Formatting Working with Forms Data Form Validation Exercise – Harnessing the Core ExtJS Features
Effects, Animation, and Drag-and-Drop Animations and Visual Effects Common Effects: Wipes, Fades, and Slides Drag-and-Drop Drag-and-Drop Examples
ExtJS and AJAX Introducing Ext.Ajax.request() Handling Responses Handling Errors Passing Parameters Rolling Forms Setting timeouts Canceling requests Evaluating JSON Data Dealing with Caching Exercise – Forms and Ajax
Working with Layouts Using Components Understanding the ExtJS Component Model Working with Layouts BorderLayouts FormLayouts Accordions Creating Toolbars and Actions Exercise – Creating an ExtJS Layout
Data Components Working with Ext.data DataReaders Records Using a JSONReader Data Stores Using Templates with Components Ext ComboBox Using Panels Various Panel Options DataViews TabPanels Dynamic TreePanels Exercise – Using a Tree Component QuickTips Using the Grid Dynamic Grids Advanced Grid Features Creating Custom Components Exercise – Using the Grid Component
Performance and Customization How to Create Custom Components Using Different Themes Customizing Component Look and Feel Creating New Themes Performance Considerations Improving Load Times Developing the Full-Featured ExtJS-based Front-End Application |
| Prerequisites: |
Required: Strong OO Skills, HTML, and JavaScript Language Fundamentals such as DOM and event handling Highly Recommended: CSS Fundamentals
|