Mastering Ext JS - Second Edition
eBook - ePub

Mastering Ext JS - Second Edition

Loiane Groner

Share book
  1. 400 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

Mastering Ext JS - Second Edition

Loiane Groner

Book details
Book preview
Table of contents
Citations

About This Book

About This Book

  • Build a complete application with Ext JS from scratch to the production build
  • Excellent tips and tricks to make your web applications stand out
  • Written in an engaging and easy-to-follow conversational style, with practical examples covering the server side as well as MySQL

Who This Book Is For

If you are a developer who is familiar with Ext JS and want to augment your skills to create even better web applications, this is the book for you. Basic knowledge of JavaScript/HTML/CSS and any server-side language (PHP, Java, C#, Ruby, or Python) is required.

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Mastering Ext JS - Second Edition an online PDF/ePUB?
Yes, you can access Mastering Ext JS - Second Edition by Loiane Groner in PDF and/or ePUB format, as well as other popular books in Ciencia de la computación & Programación en JavaScript. We have over one million books available in our catalogue for you to explore.

Information

Mastering Ext JS Second Edition


Table of Contents

Mastering Ext JS Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Sencha Ext JS Overview
Understanding Sencha Ext JS
Architecture of Ext JS applications
Ext JS overview
Basic tutorial
Class system
Components
The component hierarchy
GridPanel
TreePanel
Forms
Other components
Layouts
Data package
The MVC and MVVM architectures
Look and feel of Ext JS applications
Installing Ext JS
Prerequisites for Ext JS and Sencha Cmd
Downloading Ext JS and Sencha Cmd
Offline documentation
IDE
Summary
2. Getting Started
Preparing the development environment
Presenting the application and its capabilities
The splash screen
The login screen
The main screen
User administration
MySQL table management
Content management control
Charts
Creating the application with Sencha Cmd
A quick word about MVC
Creating the application
Looking out for changes with the watch command
Applying the first changes in our app
Understanding the Application.js file
Creating the loading page
Summary
3. The Login Page
The Login screen
Creating the Login screen
Client-side validations
Creating custom VTypes
Adding the toolbar with buttons
Running the code
A quick overview about Ext JS dynamic class loading
Adding Font Awesome support (Glyph icons)
Creating the Login Controller
Introducing the MVVM architecture
Creating the ViewController for Login View
Binding the ViewController to the View
Listening to the button click event
Cancel Button Listener implementation
Submit Button Listener implementation
Creating the User and Groups tables
Handling the Login page on the server
Connecting to the database
Login.php
Handling the return of the server – logged in or not?
Reusing code by creating a Util class
Enhancing the Login screen
Applying a loading mask on the form while authenticating
Form submit on Enter
Caps Lock warning message
Summary
4. The Logout and Multilingual Capabilities
The base of the application – view/main/Main.js
The Viewport
Using the Viewport plugin
Organizing the main screen using the Border layout
Creating the main TabPanel component
Creating the footer
A quick word about modular CSS
Creating the Header class
Creating the Header CSS
Customizing the Font Awesome icon colors
The main screen and MVVM
The main ViewModel
Logout capability
Handling the logout on the server
Ajax request success versus failure
Client-side activity monitor
The multilingual capability
Creating the change language component
Adding the CSS – country flags
Using the translation component
Creating the multilingual files
Applying the translation on the application's components
HTML5 local storage
Handling change language in real time
The early life of the ViewController
Using locale files to translate Ext JS
Summary
5. Advanced Dynamic Menu
An overview of the dynamic menu
Ext JS TreePanel
Accordion layout
The database model – groups, menus, and permissions
The dynamic menu – an MVC approach
Creating the models
Working with the hasMany association
Creating the store-loading menu from the server
Handling the dynamic menu on the server
Fetching the user permissions
Fetching the modules the user is entitled to
Fetching the menu options based on modules and permissions
Creating the menu with the Accordion layout and TreePanel
Creating the menu Controller
Rendering the menu from nested JSON (the hasMany association)
Using glyphs in TreePanel – working with overrides
Menu locale support
Opening a menu item programmatically
Summary
6. User Management
Managing users
Listing all the users using a simple GridPanel
Creating a User Model
Working with schemas
Defining store-less grids with Users GridPanel
The Users screen
Working with docked items
Working with singletons – Ext JS class system
Panel versus Container versus Component
Declaring the User ViewModel
Working with ViewModel data binding
Creating the User ViewController
Adding and editing a new user
Creating the Edit View – form within a window
Creating the Group Model
The Groups Store
Controller – listening to the Add button
Controller – listening to the Edit button
Controller – listening to the Cancel button
Controller – saving a user
Using Model validators
Previewing a file before uploading
Deleting a user
Displaying the group name in the Grid
Summary
7. Static Data Management
Presenting the tables
Creating a Model
Abstract Model
Adapting the Base Model schema
Specific models
Creating a Store
Abstract Store
Specific Store
Creating an abstract GridPanel for reuse
To initComponent or not?
Handling the Widget Column in the MVC architecture
Live Search plugin versus Filter plugin
Specific GridPanels for each table
Adding the Live Search CSS
Generic Controller for all tables
Finding the correct selector
Using itemId versus id – Ext.Cmp is bad!
Adding a new record on the GridPanel
Editing an existing record
Deleting the handling Widget Column in the Controller
Saving the changes
Validating cellediting in GridPanel
Model validators
The autoSync configuration
Canceling the changes
Clearing the filter
Listening to Store events in the Controller
Debug tip – Sencha extension for Chrome
Firefox extension – Illuminations for Developers
Summary
8. Content Management
Managing information – films
Displaying the Film data grid
The Film Model
Films ModelView
Film data grid (wit...

Table of contents