Ext4.2学习之实用工具类

最新推荐文章于 2024-07-29 11:53:27 发布

lang20150928

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量82

点赞数

分类专栏： extjs 文章标签： js javascript

本文链接：https://blog.csdn.net/m0_37607945/article/details/115141991

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

通过Ext.each函数遍历数组
通过DomHelper动态生成HTML,比如append、insertBefore、insertAfter、overwrite等
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <title>06.dnd</title>
    <style type="text/css">
        .red {
            background: red;
        }
    </style>
    <script type="text/javascript">
        // 数组迭代1
        var array = [1, 2, 3, 4];
        var sum = 0;
        Ext.each(array, function (item) {
            sum += item;
        });
        console.log(sum);

        // 数组迭代2
        App = {
            sum: 0,
            fn: function (item) {
                this.sum += item;
            }
        };
        Ext.each(array, App.fn, App);
        console.log(App.sum);

        // 数组迭代3
        sum = 0
        /**
         * item表示当前迭代循环得到的元素
         * index代表当前的循环索引值
         * allArray代表正在执行循环的整体数组
         */
        Ext.each(array, function (item, index, allArray) {
            sum += item * index + allArray.length;
        });
        console.log(sum);

        function appendChildren() {
            Ext.DomHelper.append('parent', {
                tag: 'ul',
                style: 'background: white;list-style-type: disc;padding: 20px;',
                children: [
                    {tag: 'li', html: 'li1'},
                    {tag: 'li', html: 'li2'},
                    {tag: 'li', html: 'li3'}
                ]
            });
        }
    </script>
</head>
<body>
<input type="button" value="append"
       onclick="Ext.DomHelper.append('parent', {tag: 'p', cls: 'red', html: 'append child'})">
<input type="button" value="insertBefore"
       onclick="Ext.DomHelper.insertBefore('parent', {tag: 'p', cls: 'red', html: 'insert before child'})">
<input type="button" value="insertAfter"
       onclick="Ext.DomHelper.insertAfter('parent', {tag: 'p', cls: 'red', html: 'insert after child'})">
<input type="button" value="overwrite"
       onclick="Ext.DomHelper.overwrite('child3', {tag: 'p', cls: 'red', html: 'overwrite child'})">
<input type="button" value="appendChildren" onclick="appendChildren()">
<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="child4">child4</p>
</div>
</body>
</html>

通过DomHelper函数可以为指定的DOM元素设置指定的样式

 Ext.DomHelper.applyStyles("child1", "background-color:red;");
    Ext.DomHelper.applyStyles("child2", {
        'background-color':'green',
        'font-weight':'bold',
        'font-style':'italic',
        'text-decoration':'line-through'
    });
    Ext.DomHelper.applyStyles("child3", function() {
        var time = new Date().getTime();
        if (time % 2 == 0) {
            return "background-color:yellow";
        } else {
            return "background-color:blue";
        }
    });

lang20150928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext4.2学习之实用工具类

通过Ext.each函数遍历数组通过DomHelper动态生成HTML,比如append、insertBefore、insertAfter、overwrite等<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
复制链接

扫一扫