Extjs: How to extend a component 2010/01/21
As extjs is a powerful javascript framework, sometimes we wanna do some extends for some reasons. But how to extend a component in extjs?
I take a extended TextField named as “xTextField” for example. The “xTextField” is inherited from “Ext.form.TextField”, code like below:
<script type="javascript">
Sm = {}; Sm.form = {};
Sm.form.xTextField = Ext.extend(Ext.form.TextField, {
fieldLabel: '',
name: '',
anchor: '95%',
initComponent: function() {
var config = {
fieldLabel: this.fieldLabel,
name: this.name,
xtype: 'textfield',
allowBlank: false,
anchor: this.anchor
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Sm.form.TextField.superclass.initComponent.apply(this, arguments);
}
});
Ext.ComponentMgr.register('xtextfield', Sm.form.xTextField);
</script>
Sm = {}; Sm.form = {};
Sm.form.xTextField = Ext.extend(Ext.form.TextField, {
fieldLabel: '',
name: '',
anchor: '95%',
initComponent: function() {
var config = {
fieldLabel: this.fieldLabel,
name: this.name,
xtype: 'textfield',
allowBlank: false,
anchor: this.anchor
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Sm.form.TextField.superclass.initComponent.apply(this, arguments);
}
});
Ext.ComponentMgr.register('xtextfield', Sm.form.xTextField);
</script>
or
<script type="javascript">
Sm = {}; Sm.form = {};
Sm.form.xTextField = Ext.extend(Ext.form.TextField, {
fieldLabel: '',
name: '',
anchor: '95%',
constructor: function(config) {
Ext.apply(this, {
// Put your pre-configured config options here
fieldLabel: this.fieldLabel,
name: this.name,
xtype: 'textfield',
allowBlank: false,
anchor: this.anchor
});
Sm.form.xTextField.superclass.constructor.apply(this, arguments);
}
});
Ext.ComponentMgr.register('xtextfield', Sm.form.xTextField);
<script>
Sm = {}; Sm.form = {};
Sm.form.xTextField = Ext.extend(Ext.form.TextField, {
fieldLabel: '',
name: '',
anchor: '95%',
constructor: function(config) {
Ext.apply(this, {
// Put your pre-configured config options here
fieldLabel: this.fieldLabel,
name: this.name,
xtype: 'textfield',
allowBlank: false,
anchor: this.anchor
});
Sm.form.xTextField.superclass.constructor.apply(this, arguments);
}
});
Ext.ComponentMgr.register('xtextfield', Sm.form.xTextField);
<script>
I hope this will be helpful for you .
I am reading this article second time today, you have to be more careful with content leakers. If I will fount it again I will send you a link