技术咨询：如何将Ext-4库升级至Ext-6并更换项目表单Triton主题

Hey there! Let me walk you through upgrading your Ext JS 4 project to Ext JS 6 and switching to the Triton theme—this is a common transition, and I’ve helped a few teams work through it smoothly. Here’s a step-by-step breakdown:

First, let’s lay the groundwork to avoid headaches later:

• Backup your project: Make a full copy of your current codebase (or create a new branch in version control) so you can roll back if something breaks.
• Brush up on Ext JS 6 changes: Ext JS 6 splits into Classic and Modern toolkits. Since Triton is a Classic toolkit theme, stick with Classic for compatibility with your Ext JS 4 forms. Note key shifts like deprecated components, updated MVC/MVVM patterns, and API adjustments.
• Update Sencha Cmd (if used): Ext JS 6 requires Sencha Cmd 6.x or later. If you’re on an older version, install the latest compatible release first.

The process varies based on whether you use Sencha Cmd or manual asset loading:

For Sencha Cmd Projects #

• Run this command in your project root to upgrade the SDK:

  sencha app upgrade /path/to/ext-js-6-sdk
  

• This updates your project config files (like app.json) and replaces old Ext JS 4 files with Ext JS 6 assets.

For Manual Asset Loading #

• Delete your existing Ext JS 4 files (e.g., the extjs/ folder).
• Copy the Ext JS 6 SDK files into your project.
• Update HTML references to point to Ext JS 6 core files:

  <!-- Replace old Ext JS 4 CSS -->
  <link rel="stylesheet" href="extjs/packages/classic-theme-triton/build/resources/ext-theme-triton-all.css">
  <!-- Replace old Ext JS 4 JS -->
  <script src="extjs/ext-all.js"></script>
  

Triton is the modern-looking default theme for the Classic toolkit, so switching is straightforward:

For Sencha Cmd Projects #

• Open app.json, find the theme configuration, and replace your old theme (e.g., classic-theme-neptune) with:

  "theme": "classic-theme-triton"
  

• Run a build to compile the theme and update assets:

  sencha app build
  

For Manual Projects #

• As noted in the library replacement step, just reference the Triton theme CSS instead of your old theme’s file. Double-check the path points to ext-theme-triton-all.css in the Ext JS 6 SDK’s packages/classic-theme-triton/build/resources/ folder.

While Ext JS 6’s Classic toolkit is mostly backward-compatible with Ext JS 4, you’ll need to fix a few common form-related issues:

• Replace deprecated APIs: For example, Ext.form.Action is deprecated—use Ext.data.Store or direct AJAX calls instead. Watch the browser console for deprecation warnings to spot these.
• Tweak form layouts: The form layout works similarly, but nested fieldsets or complex layouts might need minor adjustments. Ensure form panels use layout: 'form' (or 'anchor'/'hbox' as needed) and field widths align with Triton’s compact styling.
• Update field configurations: Most fields (like Ext.form.field.Text, Ext.form.field.ComboBox) work the same, but some properties were renamed. Confirm validation settings like msgTarget behave as expected in the new theme.
• Adjust custom button styles: Triton has a distinct button design—if you’ve added custom CSS for buttons, update it to match Triton’s class names (e.g., x-btn-default).

Don’t skip this critical step! Validate every part of your forms and theme:

• Functional testing: Verify form submission, data loading, validation, and error handling work exactly as before.
• Visual testing: Check that all form elements (inputs, labels, buttons, error messages) render correctly in Triton—look for misaligned fields, missing styles, or odd hover/focus states.
• Browser compatibility: Test on all supported browsers (Chrome, Firefox, Edge, etc.)—Triton is consistent across modern browsers, but older IE versions might need polyfills for newer JS features.
• Debug console checks: Keep dev tools open to catch JS errors or deprecation warnings. Fix critical issues first, then tackle minor warnings.

Pro Tips #

• For large projects, upgrade incrementally: get Ext JS 6 running with your old theme first, then switch to Triton once everything works.
• Use sencha app lint (for Cmd projects) to automatically scan for deprecated APIs and common code issues.
• Adjust form padding/margins to match Triton’s clean, spaced-out typography for a polished look.

内容的提问来源于stack exchange，提问作者Hemant