Ext JS DomHelper操作类

最新推荐文章于 2021-06-18 00:35:01 发布

wangchunbo007

最新推荐文章于 2021-06-18 00:35:01 发布

阅读量474

点赞数

分类专栏： ExtJS-Tutorial翻译文章标签： ext

ExtJS-Tutorial翻译专栏收录该内容

16 篇文章

订阅专栏

前言：DomHelper类用来对原生DOM进行操作的工具类。
Ext.dom.Helper 这个类允许我们在HTML文档上进行DOM元素的追加、修改和删除操作。该类通过JSON（特定的标签组成）数据来操作元素，结合例子来看一下其中部分属性。例子向id=”div1”的div里面加了无序列表：

属性	描述
Tag	填写想要创建HTML标签。例子里面的*ul标签*。
Children(简写：cn)	一组相同类型的子标签。例子里面的*li标签*。也可以是不一样类型。
Cls	元素的class属性。
Html	元素的innerHTML值。
id	元素的id属性。

例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>
    <script>
        Ext.onReady(function () {

            var dh = Ext.DomHelper; // ExtJS DomHelper Utility Class 
            var listItems = {
                id: 'dhlist',
                tag: 'ul',
                children: [{
                    tag: 'li',
                    html: 'item 1'
                }, {
                    tag: 'li',
                    html: 'item 2'
                }, {
                    tag: 'li',
                    html: 'item 3'
                }]
            }

            dh.append("div1", listItems);
        });
    </script>
</head>
<body>
    <div id="div1">

    </div>
</body>
</html>

可以在这里试一下。