Domhelper and template dynamically generate html

Domhelper and template dynamically generate html

Generating HTML elements with Dom has always been a headache. I used to listen to springside's instruction and use jstemplate and scriptaculous. Now in ext, let's look at its own implementation.

Domhelper is used to generate small fragments

Domhelper is very flexible and can generate various HTML fragments in a very simple way, depending on it in case of complexity.

This is probably the case.

VaR list = ext. domhelper. append ('parent', {Tag: 'div ', CLS: 'red '});
It adds a div element to the element id = parent.

As described in the document, in the second parameter {}, all except four special attributes are copied to the attributes of the newly generated element. These four special attributes are

Tag tells us what tag to generate, Div, span, and so on.

Don't tell me how many times have you learned HTML and CSS before you know these HTML tags? Did you fly over?

CLS refers to the class attribute in the <Div class = "red"> </div> label. Because class is a keyword, it should be written as classname normally, but Jack said that classname is too long, and it will eventually become Cls. -_-.

He is fond of this. He writes datastore as DS, domhelper as DH, element as El, columnmodel as cm, and selectionmodel as SM. Alas, there are many abbreviations for professional terms of invention.

Children refers to the child node. Its value is an array containing more nodes.

HTML, corresponding to innerhtml. I think it is too cumbersome to use children to describe the HTML content in the node directly.

In addition to append, domhelper also has several methods to specify the location where the new node is added.

To compare the results, first put an initial Page.

The original HTML is like this. A Div has four nodes, and the third subnode has its own subnode.

<Div id = "parent" style = "border: 1px solid black; padding: 5px; margin: 5px; Background: lightgray;">
<P id = "Child1"> Child1 </P>
<P id = "child2"> child2 </P>
<Div id = "Child3">
<P id = "Child5"> Inner child </P>
</Div>
<P id = "Child3"> Child4 </P>
</Div>
Append puts the new node at the end of the specified node.

Ext. domhelper. append ('parent', {Tag: 'P', CLS: 'red', HTML: 'append child '});

Insertbefore: The new node is inserted before the specified node.

Ext. domhelper. insertbefore ('parent', {Tag: 'P', CLS: 'red', HTML: 'insert before child '})

Insertafter: Insert the new node to the end of the specified node.

Ext. domhelper. insertafter ('parent', {Tag: 'P', CLS: 'red', HTML: 'insert before child '})

Overwrite replaces the innerhtml content of the specified node.

Ext. domhelper. Overwrite ('child3 ', {Tag: 'P', CLS: 'red', HTML: 'Overwrite child '})

It's boring to take a look at the usage of the children attribute.

Ext. domhelper. append ('parent ',{
Tag: 'ul ',
Style: 'background: White; List-style-type: disc; padding: 20px ;',
Children :[
{Tag: 'lil', HTML: 'li1 '},
{Tag: 'lil', HTML: 'li2 '},
{Tag: 'lil', HTML: 'li3 '}
]
});
In this way, a UL tag is added to the parent, and UL contains three li tags. Haha ~ Dazzling.

CodeSee lingo-Sample/1.1.1/08-03.html and lingo-Sample/2.0/08-03.html.

8.3.2. template is required for batch generation

Scenario Simulation: Currently, three men and two women have JSON data, which must be output in HTML format.

VaR DATA = [
['1', 'male', 'name1', 'desc1'],
['2', 'female ', 'name2', 'desc2'],
['3', 'male', 'name3', 'desc3'],
['4', 'female ', 'name4', 'scn4'],
['5', 'male', 'name5', 'desc5']
];
Copy the test data of grid. However, this time we will not use the DS, CM, or grid method to parse the output, but use the template to define the output format.

First, define a template.

VaR T = new Ext. template (
'<Tr> ',
'<TD> {0} </TD> ',
'<TD> {1} </TD> ',
'<TD> {2} </TD> ',
'<TD> {3} </TD> ',
'</Tr>'
);
T. Compile ();
The index starts from 0 and has a total of four elements. Then, when using it, this is the case.

For (VAR I = 0; I <data. length; I ++ ){
T. append ('some-element', data []);
}
This Code corresponds to a table in HTML. ID = "Some-element" is the ID of the tbody. We use the template to add four rows to the table.

<Table border = "1">
<Tbody id = "Some-element">
<Tr>
<TD> id </TD>
<TD> sex </TD>
<TD> name </TD>
<TD> descn </TD>
</Tr>
</Tbody>
</Table>
The final result is a table containing five rows of data:

When defining a template, you can use the tool method in Ext. util. format to format the data. Commonly used functions are trim removal of ending spaces and ellipsis (10). ellipsis determines that when the character length exceeds 10, it automatically truncates the string and adds a ellipsis at the end.

It's easy to use these functions in the template, but you still don't know, hey

VaR T = new Ext. template (
'<Tr> ',
'<TD> {0} </TD> ',
'<TD> {1: trim} </TD> ',
'<TD> {2: trim} </TD> ',
'<TD> {3: ellipsis (10)} </TD> ',
'</Tr>'
);
T. Compile ();
In this way, adding the function name to the colon can fulfill our wishes.

It's a pity that people do not count as much as they do. Jack is amazing and cannot consider all possibilities. For example, now we want to show pictures based on different genders. Jack is afraid that he wants to break his head, he couldn't think of this possibility, so he simply didn't want to, but left us an interface for user-defined functions.

var T = new Ext. template (
'',
' {0} ',
' {1: This. rendersex} ',
' {2: trim} ',
' {3: ellipsis (10) } ',
' '
);
T. rendersex = function (value) {
If (value = 'male') {
return " male ";
}else {
return" green female ";
}< BR >};
T. compile ();
the red, green, and female are shown in front of us as we expected.