ExtJs之Ext.core.DomQuery

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_34404393

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量60

点赞数

文章标签： javascript ViewUI

本文演示了如何使用 ExtJS 进行DOM操作，包括选择元素、过滤元素及判断元素是否存在等。通过一个简单的例子展示了Ext.core.DomQuery的各种用法。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
		<script type="text/javascript" src="ExtJs/ext-all.js"></script>
		<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
		<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
			Ext.onReady(function(){
        var panel = new Ext.Panel({
          title: 'SAMPLE',
          renderTo: 'sub1',
          width: '500px',
          html: '<div id="div0" style="height:260px;padding:5px"><div id="div1">我是第一个DIV的文本</div><div id="div2">' +
                '<div id="div3">我是第一个DIV的内容</div></div></div>'
          });
          var tarArry = Ext.query('#div0 div');
          var except = Ext.core.DomQuery.filter(tarArry, "#div1", true);
          var include = Ext.core.DomQuery.filter(tarArry, "#div1", false);
          var isInclude = Ext.core.DomQuery.is(except, '#div0');
          var selectNode = Ext.core.DomQuery.selectNode("div0 div");

          function retStr(array){
            var str = "";
            for(var i=0;i<array.length;i++){
              if(i<array.length-1)
                str +=(array[i].id + ";");
              else {
                str += array[i].id;
              }
            }
            return str;
          }
        Ext.Msg.alert('返回结果', "不包含ID为DIV1的所有DIV的ID为： " + retStr(except) +
        "<br>包含ID为DIV1的所有DIV的ID为： " + retStr(include) +
        "<br>通过EXT.CORE.DOMHELPER.IS(EXCEPT, #DIV0的返回结果:)" + isInclude +
        ",<br>表示" + retStr(except) + "是否包含ID为DIV的节点:" +
        "<br>在ID为DIV0的第一个节点的ID是： " + selectNode);
      });
    </script>
</head>
<body>
<div id=sub1></div>
</body>
</html>