ExtJS: VS component VS element different

Question

I have been working with ExtJS for several months, but I do not have a clear map of what is going on behind the scenes. I am just talking about the building blocks of a structure and their basic functions.

• Ext.Component
• Ext.Element
• DOM.Element
• DOM.Node (?)
• Composite element (?)
• Whatever (?)

For each of the above, I would like to know:

• How to choose : by identifier, by class, through parent, find (OR or OR OR), siblings, ComponentQuery, DOM request, CSS request, etc.

• How to manipulate in a tree : create, add, add, insert after this brother, go to this parent, delete, destroy, etc.

• How to manipulate the screen : show, hide, fade, slide, move up, down, resize, etc.

• How to identify related to each other : find DOM.Element, knowing its Ext.Component, find Ext.Component, knowing its DOM.Element, etc.

• What is the relationship between them : what happens to the DOM.Element if its Ext.Component is hidden / destroyed / modified / moved, what happens to the Ext.Component if its Ext.Element is hidden / destroyed / changed / moved, etc.

I am looking for a methodological and logical scheme of how everyone should be used and is expected to behave. I also hope that the described functionality can be grouped into appropriate categories, for example. it would be nice to see methods of moving .up() and .down() objects next to each other, rather than alphabetically from each other. Of course, links and examples (which

Answer 1

You can learn a lot about ExtJS building blocks (known as Ext Core) from the manual for this: http://docs.sencha.com/core/manual/ . I will try to add some knowledge and highlight some key points, but you should definitely read this for a very informative review.

Ext.Component
Building block for OOP paradigm within ExtJS. In essence, this is an object that contains inherited functionality that serves as the basis for a specialized component that will be transformed by the framework into DOM elements that display as HTML.

Sencha's documentation is great for this. Here are some good places to start: http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers http://docs.sencha.com/extjs/4.2.1/#!/guide/ components

Ext.Element vs DOM Element
JavaScript is known that a DOM element is just a JS object that represents a tag in an HTML document. Essentially, Ext.Element is a wrapper object for a DOM element that allows ExtJS to manage the object. Any DOM element on a page can be wrapped as Ext.Element to enable this additional functionality.

For example, take this HTML tag:

 <div id="myDiv">My content</div> 

You can access this using

 var el = document.getElementById('myDiv') 

and use the basic built-in JavaScript DOM functions on el . You can also access this using

 var el = Ext.get('myDiv') 

and have a whole additional set of functions available to apply to this element using the ExtJS library

Sencha docs are also great for this. See All Available Functions for Ext.Element here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element

miscellanea
You can get Ext.Element from a component using the getEl() method:

 var myComponent = Ext.create('Ext.Component', { html: 'my component' }); var el = myComponent.getEl(); 

You rarely needed to go the other way to determine a component from a DOM element. There are not many use cases unless you really hacked something. The main reason for using a framework like ExtJS is to prevent the need to do something like this; if it is to be fully developed in JavaScript, you should avoid referencing the DOM element where you need to get its containing ExtJS component.

Niklas answered quite well how to choose components and elements. The only thing I would like to add is that you can use up() and down() to select relative to the component. Thus, you should use itemId for components, not for the global id (using id can lead to debugging errors if you reuse components with the same identifier).

In addition, to add to Niklas the answer about showing / hiding components, the framework will really add some CSS to the component of the element, depending on what hideMode for the component. You can learn more about this property here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-hideMode

A great way to learn more is to look at all the examples that are part of the framework. Open the examples in your browser, then review the code to see how everything is done. It will be easier for you to learn this, rather than reading it on paper or on a website. Nothing beats experience when it comes to learning something new.

Answer 2

How to choose: by identifier, by class, through parent, find (OR children OR request or select? WTF), brothers and sisters, ComponentQuery, DOM request, CSS request, etc.

 Ext.ComponentQuery.query("*") // get all Ext.ComponentQuery.query("button") // all buttons Ext.ComponentQuery.query("#myid") // all controls / components myid Ext.ComponentQuery.query("#myid", rootelement) // all controls / components myid with rootelement Ext.ComponentQuery.query("#myid,button") // all buttons or controls / components myid 

How to manipulate in a tree: create, add, add, insert after this brother, go to this parent, delete, destroy, etc.

Adding a button to the View:

 Ext.ComponentQuery.query("#viewId")[0].add(new Ext.Button({ text: 'test'})); 

There is also insert , remove , etc. depending on the request you are requesting.

How to manipulate the screen: show, hide, fade, slide, move up, down, resize, etc.

 Ext.ComponentQuery.query("button").forEach(function(button){ button.hide(); }) // hide all buttons 

There is also show , disable , enable , etc. depending on the control you are requesting.

How to identify each other: find DOM.Element, knowing its Ext.Component, find Ext.Component, knowing its DOM.Element, etc.

Finding Ext.Component , knowing that its Dom.Element pretty simple, you just take the ID from the DOM element and use Ext.ComponentQuery.query("#id") . There is also Ext.select('#id') to get the object from the identifier.

With the element property, you can get the DOM:

 var dom = Ext.ComponentQuery.query("button")[0].element.dom // Getting the DOM from the first button var dom2 = component.element.dom // does also work as long as component is a valid sencha touch component 

What is the relationship between them: what happens to the DOM.Element if its Ext.Component is hidden / destroyed / changed / moved, what happens to the Ext.Component if its Ext.Element is hidden / destroyed / changed / moved, etc.

I think I'm not sure if you call .hide , for example, some CSS: display: none will be applied to the DOM. Inside, they can use some framework, for example jQuery , for this or the old school version of document.getElementById('id').css , etc. If you call .show , it can change to display: block or to any other type that was previously (this can be stored in the Sencha Touch class).

I do not know what will happen if the DOM element is destroyed. Probably this element too, and then the garbage collector, needs to be worked on.

If there are any other questions / something was unclear or insufficient, feel free to ask.

Answer 3

The attempt to answer the question itself.

Since there is no TABLE markup support on this website , I put my answer in this general table . Pay attention to the comments about moving the mouse.

This is just a sample at the moment. He needs work to get clearer and more complete. Feel free to comment or ask if you want to edit it.