Ext JS Masterclass: Build Enterprise-Grade Web Applications

Learn how to get started with sencha cmd by executing the build process for your first app, using up to start it, and using commands to discover options and parameters.

Learn how an Ext JS app boots from index.html to app.js, loads the up view and Main.js content, and uses the model view controller (MVC) pattern.

Understand the model-view-controller pattern, mapping models, views, and controllers to data, presentation, and interaction, and see how a store connects to models to drive the UI.

Learn to build your first Sencha Touch app, customize it, and use Sencha Docs to learn about forms, fields, and interfaces like the title bar.

Create a tab panel in Ext JS with X dot create and preview live results, exploring home, content, and contact layouts, then customize config and top bar position.

Create and configure text fields in a form panel using Ext JS by defining items with x-type textfield, labeling first name and last name, and preparing a subscribe button.

Learn to create x type buttons in the sunshine framework, use the file script alias, bind reset and submit actions, and test with live previews to debug and ensure functionality.

Create a select field in Sencha Ext JS with labeled options and gender value mappings, previewed live, and learn to disable auto select and use text-value pairs.

Add and configure a textarea field in a form using ext js, setting max rows, placeholder, label, and name, and demonstrate how row count affects the scroll bar.

Learn to implement a slider in a Sencha Ext JS app to let users select a value from a range, with min and max values, including single and double-value sliders.

Add and configure a radio field to let users pick one option from several colors, using a default selection and one-at-a-time checking, with examples like red, green, black, and white.

Learn to visually separate form elements with a field set in Sencha Ext JS, reordering fields such as email, password, and details for better readability.

Build a nested json form with x type items, brackets and braces, including first name, last name, gender, radio fields, and hidden items, shown in the json viewer.

Explore how to structure form field sets in Sencha Ext JS by adding titles to fields and labeling sections like registration details, personal information, and job information.

Rearranging buttons teaches how to customize a double button by wrapping it in an x type container with a horizontal box layout, setting margins, and adding items.

Add a file input inside a form to upload images to a remote server. Use accept to restrict uploads to images and enable multi-file selection with the multiple attribute.

Learn to implement form validation in a Sencha Ext JS app using JavaScript. Validate emails, names, file size, required fields, and restricted file types, then explore buttons and toolbars.

Create a new Button.js file and a container to hold x type buttons. Configure home, compose, and delete buttons with icons, and respect case sensitivity when wiring the view.

Add a badge text to the bottom home button, assign an item id, and configure a click handler to update the page text with each press.

Explore how to configure the Ext JS toolbar as a flexible container for buttons and other content, with items like home, next, and back, and customize its position and appearance.

Explore how to dock a toolbar in Ext JS, control its position (top, bottom, left, right) and layout with vbox, add back and forward buttons, and customize text with HTML.

Explore diverse Ext JS layouts, including box, vbox, hbox, and fit, and learn how to align and flex child items to fit containers, with live-preview examples.

Explore how to work with data using the data view in Sencha Ext JS, wiring a store, a model, and a template to display country data and capitals.

Create a new entry with the item template, customize the empty-continent message, and use toolbar buttons and a spacer to add China (Beijing) to the store.

Explore how to render a data view as a list in Ext JS using a country store with name, capital, and continent, including templates, sorting, and continent grouping.

Explore how to use a hash map to map continent codes to ids and group a data store with a grouper function, enabling labeled groups and headers in a list.

Enable on item disclosure in a data view list to show a disclosure icon and handle the disclose event with a scope and handler.

Explore action sheets, a fast pop-up dialog that presents a list of options—from selecting product colors to contextual actions—triggered by taps or long presses.

Explore how to implement and control the menu with an ext viewport, including show, hide, toggle, and left, right, or center positioning, and configure menu items.

Introduction to creating your first Sencha touch application, from generating a new app with a name to organizing its folder, configuring it, and preparing to customize.

Discover how to customize a Sencha Ext JS app by configuring panels with html content, layouts, and scrolling, and create a home page with centered red text and a paragraph.

Create a top title bar for the home and blog sections using x type and titlebar, set titles like home page and posts, save and reload to view the updates.

Define a post model to import blog data via Ajax, selecting title, content, and published date. Choose local or external storage and use a store to load data.

Learn how to create a data store for a post model, configure it with a proxy or local data, and load, sort, and filter posts for display in a blog.

Customize the template with HTML elements like h1 and h3, applying ellipses to truncate title and content. Show the date only and use CSS classes to enhance the look.

Style the post entry on the index page with native classes, h1/h3 headings, left float, margins, and font size, then preview across devices to ensure responsive layout.

Learn to implement a post detail flow by wiring a navigation view from the post list to a post container, so clicking a title opens full details.

Generate a controller with sunshine to handle item taps, route clicks to a post view, and configure the post container and blog list to load data and log item details.

Configure the itemtap event for a list to capture the index and target record, display the title, and navigate to a post. Debug with console logs and proper closing braces.

Configure a post navigation flow by referencing the post container, creating a data view, and pushing a detail view through the navigation view to display a selected post.

Scaffold a Sencha Ext JS app by wiring index, app.json, and app.js to load the Sunshine Touch library, and configure the main tab panel with home and post container.

Build the testing version of your Sencha Ext JS app by setting the environment to testing, enabling debug logs, and inspecting the testing folder containing app.js and resources.