Hyperlinks in ExtJS 2.x / 3.x. To help the young fighter
This post is a small and modest howto from the category "Mistress of the note."
When I first started to get acquainted with ExtJS, it was a bit crazy for me that such a large web development framework does not contain any means for using hyperlinks in the user interface (at least along with buttons, panels and other more complex controls that can be implemented please) As is often the case, a framework that provides a simple path for complex things creates difficulties in places where you don’t expect them.
Of course, using Ext.Element (cross-browser wrapper around dom-elements) you can inject in execution mode any HTML fragment, but the flexibility and ease with which other controls can be inserted, for example, into a toolbar, socket or another container, will be very complicated.
And recently, while working on a prototype of one application, I “accidentally” wrote such a component. It is very simple, but, as it seems to me, many could make life easier.
Below is attached its code and a brief analysis.
')
Such a hyperlink is added to the container just like any other standard component; interaction with the environment occurs in the usual event-oriented style.
The link is not tied to a predefined dom id, but it is syntactically guaranteed that the method called in the onclick link will be called on behalf of the correct component (as you know, when calling the method method in the form of A.method (), it is guaranteed that this inside method point to a)
Below is an example of the use of such a component.
Ideally, the hyperlink should be able to enable / disable the shielding of HTML unsafe characters when setting the text property. This is done trivially using the standard function Ext.util.Format.htmlEncode (). I offer this improvement to the reader as a small exercise.
When I first started to get acquainted with ExtJS, it was a bit crazy for me that such a large web development framework does not contain any means for using hyperlinks in the user interface (at least along with buttons, panels and other more complex controls that can be implemented please) As is often the case, a framework that provides a simple path for complex things creates difficulties in places where you don’t expect them.
Of course, using Ext.Element (cross-browser wrapper around dom-elements) you can inject in execution mode any HTML fragment, but the flexibility and ease with which other controls can be inserted, for example, into a toolbar, socket or another container, will be very complicated.
And recently, while working on a prototype of one application, I “accidentally” wrote such a component. It is very simple, but, as it seems to me, many could make life easier.
Below is attached its code and a brief analysis.
')
Custom.Hyperlink = Ext.extend(Ext.BoxComponent, { constructor: function (config) { config = config || {}; Ext.apply(this, config); Custom.Hyperlink.superclass.constructor.call(this, config); this.on('afterrender', this.createHref, this); this.addEvents('clicked'); }, hrefTpl: '<a href="#" onclick="Ext.getCmp(\'{0}\').notifyClicked(); return false;">{1}</a>', createHref: function () { var tpl = new Ext.Template(this.hrefTpl), html = tpl.apply([this.getId(), this.text]); this.el.update(html); }, notifyClicked: function () { this.fireEvent('clicked', this); } } ); Ext.reg('hyperlink', Custom.Hyperlink); Such a hyperlink is added to the container just like any other standard component; interaction with the environment occurs in the usual event-oriented style.
The link is not tied to a predefined dom id, but it is syntactically guaranteed that the method called in the onclick link will be called on behalf of the correct component (as you know, when calling the method method in the form of A.method (), it is guaranteed that this inside method point to a)
Below is an example of the use of such a component.
Custom.SearchPanel = Ext.extend(Ext.Panel, { initComponent: function () { Ext.apply(this, { … //skipped tbar: [{ xtype: 'hyperlink', text: 'Show advanced', listeners: { scope: this, clicked: this.showAdvancedForm } } ] } ); Custom.SearchPanel.superclass.initComponent.call(this); }, showAdvancedForm: function () { Ext.Msg.alert('Clicked!'); } } ); Ideally, the hyperlink should be able to enable / disable the shielding of HTML unsafe characters when setting the text property. This is done trivially using the standard function Ext.util.Format.htmlEncode (). I offer this improvement to the reader as a small exercise.
Source: https://habr.com/ru/post/128835/
All Articles