ExtJs之Ext.core.DomHelper.append

最新推荐文章于 2025-11-24 02:17:16 发布

转载最新推荐文章于 2025-11-24 02:17:16 发布 · 126 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个使用 ExtJs 框架动态更新页面内容的示例。通过 ExtJs 的 Panel 组件和 DomHelper 方法实现了 HTML 内容的动态加载与追加。此示例展示了如何在页面中指定位置渲染面板并追加文本。

<!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: '300px',
          html: '<div id="div1" style="height:160px;padding:5px">原文本</div>'
        });
        Ext.core.DomHelper.append(Ext.get("div1"), "<br>新追加了文本", true);
      });
    </script>
</head>
<body>
<div id=sub1></div>
</body>
</html>