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.

Generate an empty application with a name and page using the CLI inside the framework folder, creating the app and its files for localhost hosting.

Explore your first Sencha Touch app inside a browser, run index.html, access via localhost, edit app view Main.js and refresh to see changes, and ensure JavaScript is enabled.

Explore the MVC architecture and core project structure of Sencha Ext JS apps, including models, views, stores, and forms, and examine editing workflows with WebStorm and Notepad Plus Plus.

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.

Connect the reset and submit buttons to action handlers on a form panel, enabling reset, data submission to a php file, and enter-to-submit behavior for a mobile-friendly interface.

Customize the first name field in a Sencha Ext JS form by enabling auto capitalization, setting max length, left alignment, and placeholder; also create a hidden text field.

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.

Configure a number field with min, max, and step values using Ext JS xtype, illustrated by age and salary examples, including default values and a live preview with up-down controls.

Learn how to add email and password fields in a Sencha Ext JS form, mark them as required with labels and names, and implement password masking.

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.

Configure a spinner field with max, step, default, and cycle options, then add a blog URL field to a subscribe form with reset and submit actions.

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.

Showcases implementing a toggle field in Sencha Ext JS, enabling notification with on/off values and default one, and introduces radio buttons and checkboxes for touch devices.

Explore how checkboxes enable users to select one or more items, using true or false values, default states, and the is confirmed example to illustrate checked status.

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.

Add a date picker with the Ext JS picker field for joining date. Customize date formats and time details to optimize subscription timing.

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 hbox layout in Sencha Ext JS to arrange buttons in a row, adjust icon positions with icon and link config, and style common buttons like home, compose, and back.

Learn how to use a segmented button to switch calendar views in a toolbar, with items for day, week, and month, and how to connect it to your app.

Enable multiple selections in segment buttons by setting allow multiple to true and using the toggle to drive content per option, with a reset button to return to default view.

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 how components render on a page using templates, show and hide, enable and disable; examine containers, panels, and layouts with box layout, fit layout, and cart layout.

Learn to create a fullscreen container with a blue border, apply border and style properties, and configure layouts to arrange child items in vertical, horizontal, or auto configurations.

Learn to add child items in a container, enable scrolling, and structure nested containers with layouts, x type elements, and buttons to build interactive web app components.

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.

discover how to customize the ux template with xtemplate by adding a div, setting background color, padding, margin, and a dotted border, then save and preview, and filter the data.

Add a JavaScript filter to a data view by creating a continent field, a toolbar, and a change listener to filter country data from a store.

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.

Enhance a data view list with the pull-to-refresh plugin to automatically reload content from the data store when the user pulls down, displaying new updates and a loading indicator.

Configure the index bar for the data view list to render an alphabetic navigation on the right, customize colors and zebra striping, and explore nested lists in Sencha Ext JS.

Learn to implement a nested list with a tree store, creating a hierarchical, full-screen navigation interface that loads nodes from a data model and store.

Configure data cards and listeners to display leaf-node details as users navigate a tree, showing data in a data card when a leaf item is clicked.

Explore how the navigation view acts as a container that pushes and pops views with animated transitions, enabling customizable toolbars, back button text, and advanced navigation in Sencha Ext JS.

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.

Explore the xt singleton and its global namespace, and learn to configure your app with xt define and xt create while organizing app.js, app.json, index.html, and the app folder.

Design and integrate the home view in a Sencha Ext JS app by adding home.js, defining a panel with a title and icon, and loading it in the main view.

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 blog view as a blocks panel, configure its title and icons, and declare it in app.js to load content on demand for a fast Ext JS web app.

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.

Explore building a post list with a post store and item template to display title, publisher, and content, using a local data storage approach in Ext JS.

Create a post model and post store, then load dynamic data from an external API via Ajax proxy with a Json reader and auto load.

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.

Navigate from a list item to a detail view by updating the item template and data view to show the file title and content, remove ellipses, and style headings.

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.

Export your Sencha touch app by building and packaging for Android, iOS, Windows Phone, or BlackBerry, using the command line, PhoneGap, or Cordova, with local property files for credentials.

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.

Produce the final production build by minifying the app, reducing size, and testing load times across browsers, with Firefox performing faster than Google Chrome for deployment on a server.

Explore the basics of Phonegap and Cordova, compare the desktop app and command-line interface, and learn installation steps using Node.js and npm to create cross-platform mobile apps.

Learn how to configure phonegap's config.xml and app.json, establish a unique com.yourname.app ID, and enable remote building with phone game using a local dot property file.

Build Android, iOS, and Windows Phone versions by configuring platforms, editing icons, and copying the config file. Zip the package and upload to the phone game world in the cloud.

Install the blog app on an Android device from the downloaded debug file, noting it isn’t from the Google Play Store, then view posts and customize blog name and picture.