The Ultimate Guide to Sencha Cmd: Installation, Scaffolding, and Builds
Sencha Cmd is the cornerstone of modern Ext JS development. It automates lifecycle tasks from bootstrapping a fresh application to optimizing production builds. This guide provides a comprehensive walkthrough for setting up Sencha Cmd, creating standard scaffolding, and running optimized builds. 1. Prerequisites and Installation
Before installing Sencha Cmd, ensure your environment meets the necessary system requirements. Step 1: Install Java Development Kit (JDK)
Sencha Cmd relies heavily on Java for build optimization and compilation.
Download and install Java 8 or Java 11 (LTS versions are highly recommended).
Verify your installation by running java -version in your terminal. Step 2: Download and Run the Sencha Cmd Installer
Navigate to the official Sencha Support Portal or the public Sencha Cmd download page.
Download the installer tailored to your operating system (Windows, macOS, or Linux).
Run the installer and follow the on-screen prompts. Ensure the option to “Add Sencha Cmd to the system PATH” remains checked. Step 3: Verify the Installation
Open a new terminal window and execute the following command: sencha which Use code with caution.
If successful, this command returns the installed version number and the absolute path to the Sencha Cmd directory. 2. Application Scaffolding
Scaffolding eliminates manual configuration by generating a standardized, best-practice Model-View-Controller-ViewModel (MVC/MVVM) architecture. Generating a New Application
To generate a new Ext JS application, navigate to your desired workspace directory and run the sencha generate app command. sencha -sdk /path/to/ext-js-sdk MyApp ./myapp Use code with caution.
-sdk: Specifies the absolute path to your unzipped Ext JS SDK directory. MyApp: Defines the namespace of your application.
./myapp: Specifies the target directory where the code will be generated. Exploring the Scaffolding Structure
The generated directory contains several key directories and files:
app/: Contains your application’s core logic (Models, Views, Controllers, and Stores). app.js: The main entry point that launches the application.
app.json: The central configuration file managing dependencies, themes, and build settings.
workspace.json: Configures multi-app settings if you share packages or code across projects. 3. Developing and Scaffolding Components
Sencha Cmd accelerates day-to-day development by scaffolding individual components directly into your application structure. Run these commands from the root directory of your app. Generating a View sencha generate view MainTabs Use code with caution.
This creates a new view directory with a corresponding view component and layout baseline. Generating a ViewController and ViewModel
To bind logic and data to your new view, generate its companion pieces:
sencha generate controller MainTabs sencha generate model MainTabs Use code with caution. 4. Building the Application
When development is complete, Sencha Cmd compiles your code, processes themes, trims unused framework classes via tree-shaking, and minifies assets. Development Testing (The Built-In Web Server)
Instead of manually deploying to an external server during development, utilize the built-in jetty server: sencha app watch Use code with caution.
This command starts a local server (typically at http://localhost:1841) and watches your source files. Any saved change triggers an automatic, incremental background compilation. Testing Builds
To test your application in a state that mimics production but retains debugging flags and readable source code, run: sencha app build testing Use code with caution. Production Builds
To generate a fully minified, production-ready distribution package, execute: sencha app build production Use code with caution.
This produces an optimized build inside the build/production/MyApp/ folder. The directory contains an optimized index.html, minified CSS files, and a single compiled JavaScript file containing only the classes your application actually uses. Move the contents of this folder directly to your production web server (Nginx, Apache, or IIS). If you want to dive deeper, please let me know:
Which Ext JS version (Classic or Modern toolkit) you are targeting.
If you need assistance configuring custom themes in app.json. Whether you are setting up a multi-application workspace.
Leave a Reply