Extjs self-study tutorial (2): View extjs from Dom

 

Ii. View extjs from Dom

Someone may ask, why don't I have to look at the title from Dom? The answer is that the goal is only one: to better understand extjs in self-running results

First, you have to rely on the dot tool. What should I do with a dot-magnifier? Yes. The tool we need is Internet Explorer developer toolbar (iedevtoolbar for short), which is a tool for IE to view the DOM structure. It also has the style trace and debug style functions, which are powerful. We analyze the DOM structure in IE, relying on it. Of course, if you choose Firefox, firebug is also a good choice, but the customer usually requires priority to support IE, so it is better to debug in IE.

Then, let's briefly talk about the use of iedevtoolbar. See:

The leftmost part is the DOM tree display area of the page. The middle part is the attribute and style editing area. In this area, you can add and modify attributes and styles of an element, in this way, you can quickly debug a property. Show read-only properties can be used to view the read-only property. View the current style on the right. Show default value allows you to view the default CSS style. In the current style, there is also a very special function, that is, right-click a style information, you can trace the style, so as to track which CSS controls the style, in this way, you can quickly locate the CSS to be modified for debugging a style. To select an element, you can use the arrow selection tool (first in the first row of the tool bar in the ID developer toolbar) or directly select a node in the DOM tree. The Node Selected in the DOM tree will first flash the border for a while on the HTML page, and then display it as a blue box. If you select it using the mouse tool, a blue box is directly added.

The following is a brief introduction. We need this tool to solve some existing problems.

First, write a short piece of code to implement a simple panel display:

New Ext. panel ({renderto: 'paneldiv ', Title: 'title', width: 200, height: 200, frame: True, items: [{xtype: 'click', text: 'button '}, {HTML: 'Some text'}], buttons: [{text: 'bottom click'}]});

The running effect is as follows:

This is the most common implementation of ext panel-related applications. The opening shows that the original Div has not changed, but a series of divs are added to it. Now you know that renderto does not change the original object. Instead, a series of panels are generated internally to form the component effects we see. View the class names of each DIV in sequence, and you will find that the CSS names of ext are reasonable. All contain the xtype name of the current object. For example, the current Panel becomes "X-panel ".

Okay, I will not elaborate on the inside of the div. Now that we want to solve the problem, we need to "make" The trouble first (generally, we have to be able to find something to do if we want to become a master, for example, keep going backwards ).

A very small change, remove frame: True, and look at rendering to see what it looks like:

The "some text" section is framed by an ugly box. Next, we will begin to analyze. Find the <Div class = x-panel id = ext-comp-1003> level from the <Div id = paneldiv> to see the selected shape. It is similar to the box with the problem. According to the class name X-panel and source code. The code is selected:
{HTML: 'Some text '}
This part is generated. Next, we need to track this part of the style to see what went wrong. Starting from the id = ext-comp-1003, the subordinate has three nodes, and it is faster to find them.

If you understand CSS, you will know that if it is not an internal covering color, then the border effect is made by border. View the shape by choosing iedevtoolbar (selecting nodes to view the shape is very useful and can help us quickly locate the processing node), rather than the border effect by overwriting the color. So it must be a border-color manufacturing problem. Tracking Level 1, border-width in current style are all 0, tracking Level 2, which does not define border-width at all, then continue to find down. Level 3 of tracking. The problem is found.

Looking at the circle, the border is set to 1px, leading to the appearance of the ugly border we found. In this way, we thought about setting the style. According to the class name, we guess it is the style of the body. Let's take it for granted. Let's set bodystyle to see:

}, {Bodystyle: 'border: none', HTML: 'Some text'}],

OK! Is it a sense of accomplishment. Cheers first ~

....
....

Then, I am sorry to tell you that the API actually details:

Bodyborder: Boolean
True to display an interior border on the Body element of the panel, false to hide it (defaults to true ). this only applies when border = true. if border = true and bodyborder = false, the border will display as a 1px wide inset border, giving the entire body element an inset appearance.

That is to say, the problem is solved by setting the border of the child element to false.

Have you found the importance of the API? In fact, many questions have been mentioned in detail in the document. I only blame you for not reading it carefully :). But don't be annoyed. It's not just a flicker, just to tell you, there is only one way to solve the problem. There is a solution to the problem when we analyze extjs from the DOM perspective. All solutions that can solve the problem are feasible solutions. As for the best solutions, you have to "hone" on your own. For example, you can adjust the label width of form layout and the proper element location. With the help of iedevtoolbar, it will become much more convenient.

Now the two chapters are complete. Using extjs from API is to write functional code to generate functional pages, while this chapter is to reverse analyze functional code by PAGE results. Comparison and learning.