Uncaught TypeError: Cannot read property 'createChild' of undefined

最新推荐文章于 2025-07-02 15:05:54 发布

最新推荐文章于 2025-07-02 15:05:54 发布 · 719 阅读

文章标签：

#ExtJS

前端Error 专栏收录该内容

1 篇文章

订阅专栏

本文分析了在使用ExtJS创建表单时遇到的TypeError错误，并提供了修正代码示例。错误原因是JS代码未放入Ext.onReady函数中。修正后的代码确保DOM完全加载后再初始化组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误为：Uncaught TypeError: Cannot read property 'createChild' of undefined
一、原因分析：
没有把js代码放到Ext.onReady函数中，深层次的原因还没搞明白。。。

二、错误错码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk">
	<title>表单与输入控件</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript" src="Chinese.js"></script>
    <script type="text/javascript">
    	var form = new Ext.form.FormPanel({
			title : 'form',
			defaultType : 'textfield',
			buttonAlign : 'center',
			frame : true,
			width : 220,
			fieldDefaults : {
				labelAlign : 'right',
				labelWidth : 70
			},
			items : [{
				fieldLabel : '文本框'
			}],
			buttons : [{
				text : '按钮'
			}]
		});

	form.render("form");
    </script>
	</head>
	<body>
	       <div id="form"></div>
	</body>
</html>

三、修正后代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gbk">
	<title>表单与输入控件</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript" src="Chinese.js"></script>
    <script type="text/javascript">
    	Ext.onReady(function() {
			var form = new Ext.form.FormPanel({
				title : 'form',
				defaultType : 'textfield',
				buttonAlign : 'center',
				frame : true,
				width : 220,
				fieldDefaults : {
					labelAlign : 'right',
					labelWidth : 70
				},
				items : [{
					fieldLabel : '文本框'
				}],
				buttons : [{
					text : '按钮'
				}]
			});

			form.render("form");
		})

	form.render("form");
    </script>
	</head>
	<body>
	       <div id="form"></div>
	</body>
</html>