DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Express JS Conditional Routing: How to Route Multiple Payment Gateways
  • DataWeave Dynamic Evaluate Component Explained
  • Freedom to Code on Low-Code Platforms
  • The Emergence of Cloud-Native Integration Patterns in Modern Enterprises

Trending

  • Beyond the Prompt: Unmasking Prompt Injections in Large Language Models
  • Introduction to ESP32 for Beginners Using the Xedge32 Lua IDE
  • The Promise of Personal Data for Better Living
  • No Spark Streaming, No Problem
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. ExtJS5—Codemirror Integration

ExtJS5—Codemirror Integration

Balagangadhar Addanki user avatar by
Balagangadhar Addanki
·
Jan. 27, 15 · Interview
Like (1)
Save
Tweet
Share
3.51K Views

Join the DZone community and get the full member experience.

Join For Free

Being one of the leading frameworks for RIA, I was expecting ExtJS 5 to have an inbuilt code editor. There are some add-ons available for ExtJS3 and ExtJS4 by extending the form field base so that they can make it in par with form. But it is more restricted using in that way. We need to compromise with the layout if you are not using it on any other component. Instead we can use a simple hack to make it work seamlessly on any ExtJS components.

Since code mirror requires div or textarea, we can make use of ExtJS' 'box' to get handle of div. Next level complexity comes with form support and layouting. Here is the idea

  • Create a custom component by extending container of panel(As per requirement)
  • Use codemirror's configs as configs of custom component
  • Add following components as items
    • box : Since it provides a div, we can use it to render code mirror component
    • field: Add this item to your custom component and make it hidden. Replicate all the changes/actions on this field component whenever there are changes/actions on the codemirror. 
  • Initialize codemiror field 'afterrender' of custom component with the configs that are defined on it. 
Form Support

ExtJS form comes with the additional properties like dirty change, load/get/update Record features  so that we can load the model into the form and work with it. Whenever we add our custom component to form, form will be able to identify the field item which is the part of our custom component. Since ExtJS form fires every action on our field, we can get the handle form actions. 

For example if there is a change event on code mirror, we will be able to find out whether its a dirty or not but how can we tell form that it is dirty? Thats where we bring our field into action. Call setDirty function of field and fire dirty change event from that. Rest will be taken care by form. Sam e applies with the other actions. 

Layout Support

Since it is our custom component, we don't need to worry much. 

Controlling Size

Code mirror has a pre-configured height(300) in its css and there is a method to set custom height and width. We can pass these values as configs to our custom component and call setSize method of codemirror. 

I have tried a custom component with remote validation features. You can find source code at the following location. This is just a prototype code to show how we can make codemirror work with ExtJS without affecting much from its version changes. You can take the idea and customize it as per your needs.
Form (document) Integration

Opinions expressed by DZone contributors are their own.

Related

  • Express JS Conditional Routing: How to Route Multiple Payment Gateways
  • DataWeave Dynamic Evaluate Component Explained
  • Freedom to Code on Low-Code Platforms
  • The Emergence of Cloud-Native Integration Patterns in Modern Enterprises

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: