ExtJS Self-Study Tutorial (2): Viewing from the DOM ExtJS

"II" from the DOM view ExtJS

Look at the title may be asked, why do good examples do not look, you have to look at the DOM? The answer is that the goal is only for one: self-running results see ExtJS more clearly.

First of all, to see the point of the tool, with a little magnifying glass what? Right. The tool we need is internet Explorer Developer Toolbar (iedevtoolbar), an IE tool that looks at the structure of the DOM, and features a style trace,debug style that is powerful. We analyze the DOM structure under IE, that's it. Of course, if you choose Firefox,firebug is also a good choice, but usually customer requirements are preferred to support IE, then or in IE debugging good.

So, simply talk about the use of Iedevtoolbar, see:



The leftmost is the DOM tree viewing area of the page, in the middle is the property and style editing area, which can add and modify the attributes and styles of an element, so that you can quickly debug a property, show read-only properties can see the read-only property. The right side is the current style view. Show Default Value allows you to view the defaults for CSS styles. In the current style, there is also a very special function, that is, the right-click on a style information, you can trace the style, so that the style is tracked by which CSS control, so you can quickly navigate to a style of debugging need to modify which CSS. Selecting an element allows you to select either the Arrow Selection tool (the first row of toolbars on the ID Developer toolbar), or you can select a node directly in the DOM tree. The nodes selected in the DOM tree will blink for a while in the HTML page and then appear as a blue box. With the mouse tool selected, a blue box is added directly.

A brief introduction, the next. We need to use this tool to solve some of the problems that exist.

First, write a small piece of code to achieve a simple panel display:

New Ext.panel ({  renderto: ' Paneldiv ',  title: ' title ',  width:200,   height:200,  frame:true,  items:[{    xtype: ' button ',    text: ' Buttons '  },{    HTML: ' Some text '  }],  buttons:[{    text: ' Bottom button '  }]});

The results are as follows:



This is one of the most common implementations of EXT panel related applications. Open to see that the original Div has not changed, just add a series of div within it. So you know, Renderto didn't change the original object. Instead, it generates a series of panel formations within it that form the effects of the components we see. Look at the class name of each Div, you will find that the ext CSS naming is very reasonable. With the xtype name of the current object, for example, the panel is now "X-panel".

Well, the div is not inside for a moment. Now that we have to solve the problem, then we first "make" a bit of trouble (generally want to become a master all have to find trouble, for example, follow not go backwards and so on).

A very small change, the frame:true to remove, look at the rendering, see what kind of:



, "Some text" was framed by an ugly box. Now we're going to start analyzing. Start from <div id=paneldiv> to find the <div class= "X-panel" id=ext-comp-1003> this, look at the shape of the selection. It's almost the same box as the problem. The name used by this class is X-panel and the source code appears. The Chosen one is the code:
{html: ' some text '}
This part of the build. The next step is to track this part of the pattern and see where the problem is. From id=ext-comp-1003 this departure to subordinates on 3 nodes, find up also relatively fast.

Understand the point of CSS know, if not the internal cover color, then the border effect is border made out. View shapes with Iedevtoolbar selection (select node View shape this is useful to help us quickly navigate to the processing node), not by covering the color of the border effect. Then it must be the problem of border-color manufacturing. Tracking the first level, the current style in the Border-width are 0, tracking the second level, there is no definition of border-width, then continue to look down. Tracking the third level, the problem is found.


Looking at the circled part, due to setting the border to 1px, led to the appearance of the unsightly border we found. This is the idea of setting a style, according to the name of class, we speculate that the body style of the problem. So "take it for granted", let's set bodystyle to see:

  },{    bodystyle: ' Border:none ',    HTML: ' Some text '  }],

It's OK! is not a sense of accomplishment. First cheers a bit ~

....
....

Then I regret to tell you that the API has actually been said in detail:

Bodyborder:boolean
True to display a interior border on the BODY element of the panel, false to hide it (defaults to true). This is applies when border = = True. If border = = true and Bodyborder = = False, the border would display as a 1px wide inset border, giving the entire body elem Ent an inset appearance.

That is, the border of the handle element is set to false, and the problem is resolved.

Discover the importance of the API? In fact, a lot of problems, the document has been detailed said, only blame you did not look carefully:), but don't be annoyed, this is not to bluff you, just tell you, there is a way to solve the problem. The so-called all roads to Rome, with the perspective of the DOM to analyze the ExtJS, there is a solution to the problem. The solution to the problem is a sexual solution, as to which one is best, it depends on your own more "honed". For example, adjusting the label width of the form layout and the appropriate element position will make it much more convenient to have Iedevtoolbar help.

In this two chapters, the tutorial will be completed. Using ExtJS from the API is to write the function code to generate the function page, and this chapter is to reverse the analysis function code by the page result. One is opposite, the contrast learns.

ExtJS Self-Study Tutorial (2): Viewing from the DOM ExtJS