ExtJS Several classes of DOM operations

ExtJS provides a very well-developed dom operation method that allows the DOM to be manipulated conveniently. In addition, ExtJS can easily query DOM elements and encapsulate these DOM elements as ext.element objects, and we can manipulate DOM elements through the element object. Let's take a look at several classes of ExtJS manipulating the DOM:

ext.element, Ext.domhelper, ext.domquery three pillars of the library .

ExtJS is currently the latest version of EXTJS5, and the take-off network offers the latest EXTJS5 tutorials, welcome to visit.

Ext.element

Ext.Element.get () shortcut Ext.get (), can only take the DOM ID as the parameter to get the Ext.element object (Ext.get Returns the result is an instance of the Ext.element object. Dom is the native DOM). All components in Ext are ID, this ID can be specified manually, or it can be generated automatically by the ID generation mechanism of ext.

Ext.domhelper

The main operation is DOM.

Ext.DomHelper.append () is a very common method, it is worth mentioning that because the Ext adopts the object caching mechanism, in the MVC mode, if the DOM is re-rendered when different tab switches, use Ext.DomHelper.append () The added elements are not lost, but the use of native or other frameworks (such as JQ) is lost. That's one of the reasons I said she was like a wife. See a few uses:

First, direct string

Ext.DomHelper.append (element ID, ' <a href= ' # ' > Hello </a> ');

Second, the object

Ext.DomHelper.append (element id,{tag:ul,children:[{tag:li,html: ' A UL list of the first '},{...}]});

Ext.DomHelper.insertHtml () Another very common method

Ext.DomHelper.insertHtml (positional parameters, Dom, ' <a href= ' # ' > Hello </a> ');

Position parameters: Beforebegin, Afterbegin, BeforeEnd, Afterend

Ext.DomHelper.overwrite (DOM ID, ' <a href= ' # ' > Hello </a> '); equivalent to native. innerhtml= ""; so it's rewriting the contents of the container.

var TPL = Ext.DomHelper.createTemplate ("<li>{content}</li>");

Tpl.overwrite (domid,{content: ' content '});

There is a problem with the reference file, error

There is another way to use it:

var TPL = new Ext.DomHelper.createTemplate ({tag: "Li", html: "{content}"}), the same error ... Who's the great God passing by?

If it's a list, it's going to be append with a for loop.

Ext.domquery find a weapon for DOM elements

Ext.query (' div '), ext.query (' [id= ' Domid "] '), Ext.query (' Div:first-child '). Support for most CSS3 selectors

Ext.query () is a shortcut to Ext.DomQuery.select () and returns to the standard DOM.

The above describes the simple usage, more ExtJS resources, welcome to visit more ExtJS tutorials.

ExtJS Several classes of DOM operations