Ext JS Learning 14th Day Ext Foundation of Ext.domhelper

This article is used to record learning notes

• We have learned the element class, which is undoubtedly very powerful, which provides a wealth of methods for us to use, but ext in order to make it easier for us to manipulate DOM elements, we provide domhelper this auxiliary tool class. Let's learn the next Domhelper. First, from the API, the public method exposed by this class is not very much. Just 13 ways. If you want to generate DOM nodes, it is not recommended to use native methods to generate DOM nodes, because the code is relatively large when the performance is low, and the other is to assemble their own HTML strings more trouble. In ext, the Domhelper object is similar to an element generator, which is used to solve such problems. A generic JavaScript framework will have a similar function for generating HTML code at the bottom. Domhelper Common methods: –createhtml or Markup method –createdom method –append Method –inserthtml Method –overwrite method –createtemplate Method – Applystyles way to raise a lot of chestnuts

Ext.onready (function () {    //preparatory workExt.create (' Ext.panel.Panel ', {title:' Use of the domhelper-element generator ', Width:' 90% ', Height:400, RenderTo:Ext.getBody (), HTML:' <div id=d1> I'm d1</div> '    }); //Domhelper    //1:createhtml or Markup method    //Configuration Item Description:    //the name of the tag element    //CHILDREN/CN represents a child element    //CLS represents style    //HTML: Text content        varHTML =Ext.DomHelper.createHtml ({tag:' Ol ', cn:[{tag:' Li ', HTML: ' item1 '}, {tag:' Li ', HTML: ' item2 '}            ]        });        Console.info (HTML); varHTML =Ext.DomHelper.createHtml ({tag:' Div ', children:[{tag:' A ', HTML: ' BJSXT website ', href: ' www.bjsxt.cn '}, {tag:' Input ', value: ' Click ', type: ' button ' }            ]        });    Console.info (HTML); //2:createdom Method (this method is to generate native DOM nodes, not recommended)        varDom =Ext.DomHelper.createDom ({tag:' Div ', HTML:' I'm the div '        });    Console.info (DOM);    alert (dom.nodename); //3:append MethodExt.DomHelper.append (' D1 ', {tag:' UL ', Cn:[{tag:' Li ', HTML: ' 1111 '},{tag: ' li ', HTML: ' 2222 '}]        }); Ext.DomHelper.append (' D1 ', ' <span> I am span content </span> '); //4:inserthtml Method//This method is to manipulate the native node nodes    //parameter Description: string where, Htmlelement/textnode el, string HTMLExt.DomHelper.insertHtml (' Beforebegin ', ext.getdom (' D1 '), ' )    //5:overwrite MethodExt.DomHelper.overwrite (' D1 ', {tag: ' span ', HTML: ' I'm covered span '}); Ext.DomHelper.overwrite (' D1 ', ' AAAAA '); //6:createtemplate Method        varTP = Ext.DomHelper.createTemplate (' //return ext.templateTp.overwrite (' D1 ', {text: ' I was replaced by the content! ', Text2: ' I am also the content of the replacement! ')}); //7:applystyles MethodExt.DomHelper.applyStyles (' D1 ', {width:' 100px ', Height:' 100px ', BackgroundColor:' Green '        });});

To recommend an article network www.fishcmonkey.com, learning to improve the literary accomplishment;

Ext JS Learning 14th Day Ext Foundation of Ext.domhelper