First, we recommend that you download the code in this example in combination with the text description. Here is a valid example.
Step 1: Your HTML Template
The first step is nothing special. Here, HTML is used to format your data. The keywords in curly braces are the containers (placeholder) of {ID}, {URL}, and {text} in your data ). You can also use pure numbers {0}, {1}, {2}, but the keyword naming method will make your code more readable.
Now we load the HTML template, create a template object (the fifth line), and compile it (the sixth line ). Although the compilation template is not necessary, it can always improve the performance.
VaRHtml = '<a id = "{ID}" href = "{URL}" class = "nav"> {text} </a> <br/> ';
VaRTPL =NewExt. template (HTML );
TPL. Compile ();
Step 2: add data to the template
Here we will use the append method to add two rows of data. As you can see, the "ID", "url", and "text" of the element correspond to the container of the preceding template.
TPL. append ('blog-roll ',{
ID: 'link1 ',
URL: 'http: // www.jackslocum.com /',
Text: "Jack's site"
});
TPL. append ('blog-roll ',{
ID: 'link2 ',
URL: 'http: // www.extjs.com /',
Text: "Jack's new site"
});
This is the basic knowledge point of the template. Is it very easy for you to come here?
Next step
If you want to change the location, the document area is a great place. Let's take a look at the sample feed viewer, which uses a lot of templates.