Migrating Ext JS Projects into Sencha Architect

Migrating Ext JS Projects into Sencha Architect

Overview

Migrating an existing Ext JS project into Sencha Architect lets you combine hand-written code with Architect’s visual tools, improve maintainability, and speed up UI changes. The process involves preparing your codebase, importing or recreating app structure inside Architect, integrating custom code, and testing thoroughly.

Pre-migration checklist

• Ext JS version: Confirm project’s Ext JS version is supported by your Sencha Architect version.
• Backup: Create a full project backup or branch.
• Dependencies: List third-party libraries, custom themes, and build tools (Sencha Cmd version).
• Code organization: Identify app entry (app.js), folder structure (app/, resources/), and custom overrides.
• Sencha Cmd: Install matching Sencha Cmd and ensure Node/Java versions meet requirements.

Migration steps

1. Create a new Architect project

   • In Architect, choose the matching Ext JS version and create a new app with the same app name and namespace as your existing project.

2. Recreate app structure

   • Use Architect to add core app components: Application, Viewport/Controllers, Models/Stores, Views.
   • Match folder/namespace layout to minimize path conflicts.

3. Import static resources

   • Copy resources (images, CSS, themes) into the Architect project’s resources folder. Add custom Sass/variables to the theme if applicable.

4. Move JavaScript class files

   • Copy existing app classes (models, stores, controllers, views) into the Architect app folder.
   • For each class, ensure the Ext.define namespace matches the Architect project’s namespace and conforms to the folder path.

5. Integrate custom code into Architect

   • For classes you want Architect to manage, open/create the corresponding component in Architect and paste custom code into the component’s code editor or convert portions into Architect properties/events where feasible.
   • For highly custom or non-visual modules, keep them as plain JS files and include them via requires or app.json entries.

6. Handle overrides and xtype/component configs

   • Register custom xtypes and ensure any overrides are loaded in the correct order. Use Architect’s Requires/Dependencies settings to control load order.

7. Adjust app.json and index.html

   • Merge necessary app.json entries (paths, bundles, resources) and ensure index.html references are correct. Architect generates its own app.json—update it with any custom build settings.

8. Configure Sencha Cmd builds

   • Run Sencha Cmd generate or refresh commands if required. Build and run a development build to catch missing requires or path issues:
     • sencha app refresh
     • sencha app watch (or sencha app build development)

9. Resolve class loading and requires errors

   • Fix any missing Ext.require/uses by adding explicit requires in classes or updating class paths. Use console errors as guidance.

10. Test thoroughly

    • Test navigation, component behavior, data loading, and theming across browsers and devices used by your project.

Common pitfalls & fixes

• Namespace mismatches: Ensure folder structure matches Ext.define namespaces; otherwise classes won’t load.
• Sencha Cmd version mismatch: Use the Cmd version compatible with your Ext JS release.
• Missing requires: Add explicit requires to avoid dynamic loading issues in production builds.
• Theme/Sass differences: Recreate or merge custom themes carefully; run compass/sass builds when needed.
• Overwriting by Architect: Architect-managed components may overwrite manual edits—keep custom code in separate files or use Architect’s custom code regions.

Post-migration suggestions

• Use Architect for UI/layout tasks and keep complex logic in separate JS modules.
• Add version control commits after each major migration step.
• Document any changes to build or load order for future maintenance.

If you want, I can provide a step-by-step checklist tailored to your project—tell me your Ext JS version and approximate project size.