View Full Version : How to overwrite a class with another class ?

9 May 2011, 1:43 AM
It may sound a little bit strange, but I would overwrite a class with an other class.
For example I want that all my Ext.form.Textarea objects to be transformed into Ext.form.Htmleditor .
In this way all my textareas in my api will be transformed in htmleditor object, without replacing them in the whole api. And later, if I want to disable this, simple I take out the overwriting and all the textareas will be normal again.

Only I don't know how to do this. Could you maybe add a syntax example here?

Thanks a lot.

9 May 2011, 4:32 AM
Here's a functional example which declares xtype 'mytexteditor' for the component. All you have to do is change the Ext.extend target class name to Ext.form.HtmlEditor to get the desired effect.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" id="theme" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';


com.myApp.ux.MyTextEditor = Ext.extend(Ext.form.TextArea, {
constructor: function(config) {
config = Ext.apply(this, config);
com.myApp.ux.MyTextEditor.superclass.constructor.call(this, config);

Ext.reg('mytexteditor', com.myApp.ux.MyTextEditor);

var form = new Ext.form.FormPanel({
height: 200,
renderTo: 'contentDiv',
width: 600,
items: [{
xtype: 'mytexteditor',
fieldLabel: 'Text Editor',
height: 150,
width: 450

<div id="contentDiv"></div>