ExtJS Basic Knowledge Summary: Dom, iframe, and Treepanel (iii)

Overview

　　ExtJS is another kind of class library that encapsulates JavaScript and is similar to jquery. Therefore, the operation of the DOM is also supported, such as modifying the contents of the div inside the HTML operations. There are a few questions to consider:

　　1. ExtJS also supports the operation of IFRAME, but how can I access the ExtJS object of the external parent of the IFRAME?

　　2, in ExtJS, we can use Treepanel as the navigation menu, but the Treepanel root node in the merge and expand the two states show the icon is not the same, how to set the expansion and merge when the icon consistency?

In fact, ExtJS can solve the above problems through simple setup.

ExtJS manipulating the DOM

　　ExtJS provides ext.element, Ext.domhelper, and Ext.domquery three class libraries to complete the operation of the DOM.

　　1, Ext.element

The Ext.Element.get () shortcut Ext.get (' element ID ') only takes the DOM ID as a parameter to get the Ext.element object. 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.

　　2, Ext.domhelper

Ext.domhelper primarily operates the DOM, modifying the HTML content of the DOM object for the specified ID. Common methods for appending, inserting, and re-element HTML content functionality　

1, Ext.DomHelper.append (element ID,'HTML content ');2, Ext.DomHelper.append (element id,{tag:ul,children:[{tag:li,html:'the first item of a UL list'},{...}]});3, Ext.DomHelper.insertHtml (positional parameters, Dom,'HTML content'); //DOM objects can be obtained by ext.get (element ID), positional parameters: Beforebegin, Afterbegin, BeforeEnd, afterend;4, Ext.DomHelper.overwrite (element ID,'HTML content'); //re-element HTML content, equivalent to the original. innerhtml= ""; so it's rewriting the contents of the container. 5,varTPL = Ext.DomHelper.createTemplate ("<li>{parameter}</li>"); Tpl.overwrite (domid,{parameter:'parameter value 1'})

　　3, Ext.domquery

Ext.domquery also gets DOM objects, Ext.query () is a shortcut to Ext.DomQuery.select (), and the common method satisfies the DOM query

 1   Ext.query (  '  ) //  get Dom  3   Ext.query ( "  div:first-child  ) //  get DOM through pseudo class, support most of CSS3 selector  

　4.ExtJS Operation Dom and CSS supplement

There are many ways to ExtJS the DOM, and here's a quick addition. Select gets Dom,extjs in the fly and get get DOM objects are different, get in the cache and fly using the enjoy meta mode.

1,//querying ID=DIV1 elements, returning a collection ext.compositeelement type that satisfies a conditionExt.Select("#div1"); //Query Property Title=d1 Div, return the collection ext.compositeelement type that satisfies the criteriaExt.Select("div[title= ' D1 ']");2,Get(EL): Ext.dom.Element uses a caching mechanism to improve the efficiency of getting DOM nodes Fly (DOM, [named]): Ext.dom.Element.Fly uses JavaScript's classic-mode to boost efficiency, saving memory and reducing carbonation

　　ExtJS Manipulating CSS and properties

    varE = Ext.Select("Div[title=t1]"); //Property Manipulation//returns the Title property of the first matching elementAlert (E.first (). getattribute ("title")); //sets the title property of the first matching elementE.first ().Set({"title":"Newtitle" }); //CSS class actions//Add a C2 style to the first matching elementE.ADDCLS ("C2"); //removed fromE.REMOVECLS ("C1"); //ReincarnationE.TOGGLECLS ("C2"); //Check if the C2 style existsE.HASCLS ("C2"); //Html//Get HTMLE.first (). dom.innerhtml; //Update HTMLE.first (). Update ("<b> html</b> after the update"); //valueE = Ext.Get("Text1");      E.getvalue (); E.Set({value: Max});

ExtJS object for the IFRAME operation classification

　　A page HTML nested in the other B page of the IFRAME, a page of JS how to invoke the B page ExtJS object that? In fact, after the study, you will find that only need to add the following sentence can be.

var pdom=window.parent.ext.getcmp (' element ID');

Set the parent node expansion and Treepanel icon in the

　Treepanel by default, the parent node with child has an inconsistent button icon style when expanded and closed, and how to set the icon style has been that, in fact, for the later version of ExtJs5.0 only need to set the following CSS.

　　1. Set the icon style first

    . iconbg1  {        background-image:url (/resource/images/menu/group_gear.png);        Background-repeat:no-repeat;    }    . X-grid-tree-node-expanded. iconbg1     {       /**/        Background-image:url (/resource/images/menu/group_gear.png);      Background-repeat:no-repeat;    }     . Iconbg1_1  {        background-image:url (/resource/images/menu/cog.png);        Background-repeat:no-repeat;    }

　　2. Set the Iconcls property value of Treepanel in ExtJS

[  {    "Id":3,    "Iconcls":"Iconinsysmgr",    "Mname":"System Tools",    "URL":"",    "Children": [      {        "Id":3,        "Iconcls":"iconinsysmgr_1",        "Mname":"clean up the cache configuration",        "Parentmenuid":"3",        "URL":"/tool/index/",        "Leaf":"true"      }    ]  }]

Reference documents

1, extjsdom Operation Http://blog.csdn.net/lovesomnus/article/details/38687711?utm_source=tuicool

2, ExtJS Dom operation of several classes http://www.cnblogs.com/youring2/p/3962764.html

ExtJS Basic Knowledge Summary: Dom, iframe, and Treepanel (iii)