extbuilder生成的js代码怎么使用

最新推荐文章于 2021-06-17 08:26:36 发布

原创最新推荐文章于 2021-06-17 08:26:36 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #CSS #JavaScript #Eclipse #HTML #ViewUI

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用ExtBuilder Eclipse插件生成的代码，并将其应用到JSP页面中进行显示。通过修改生成的ExtJS代码并结合HTML结构，实现页面组件的成功展示。

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

在用extbuilder eclipse插件的时候，自动生成的代码，如何把他放在jsp中进行显示，这个问题，对于初用extbuilder 的人可能不太会，我在网上找到，自己试了，可以显示出来。这里先记来了。

这里是生成的代码。

Ext.namespace('test');
test.test = function(config) {
	Ext.applyIf(this, config);
	this.initUIComponents();
	test.test.superclass.constructor.call(this);
};
Ext.extend(test.test, Ext.Panel, {
	initUIComponents : function() {
		// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
		Ext.apply(this, {
			items : [{
				frame : "true",
				layout : "form",
				items : [{
					xtype : "textfield"
				}, {
					xtype : "textfield"
				}, {
					xtype : "datefield"
				}],
				xtype : "form"
			}]
		});
		// END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
	}
});

非常简单的代码。

下面来看我们的页面，我这里用的是html，因为没有动态yuan素

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>test</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />
<mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../ext-lang-zh_CN.js" mce_src="ext-lang-zh_CN.js" charset="utf-8"></mce:script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" mce_href="shared/examples.css" />

<mce:script type="text/javascript"><!--
Ext.namespace('test');
test.test = function(config) {
	Ext.applyIf(this, config);
	this.initUIComponents();
	test.test.superclass.constructor.call(this);
};
Ext.extend(test.test, Ext.Window, {
	initUIComponents : function() {
		// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
		Ext.apply(this, {
		el:'test',            
		width :600,            
		height :400,
			items : [{
				frame : "true",
				layout : "form",
				items : [{
					xtype : "textfield"
				}, {
					xtype : "textfield"
				}, {
					xtype : "datefield"
				}],
				xtype : "form"
			}]
		});
		// END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
	}
});


	Ext.onReady(function(){     
	var tt = new test.test({      
	el:'test'   
	}); 
	tt.show();
	}); 
// --></mce:script>

    
<body>

<div id='test' name="test"></div> 


</body>
</html>

这样就OK了。这里给大家指出改动的地方。

自动生的是：

Ext.extend(test.test, Ext.Panel, {
initUIComponents : function() {
// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
Ext.apply(this, {
items : [{

改动成：

Ext.extend(test.test, Ext.Window, {
initUIComponents : function() {
// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
Ext.apply(this, {
el:'test',
width :600,
height :400,
   items : [{

最后要加上这段：

Ext.onReady(function(){
var tt = new test.test({
el:'test'
});
tt.show();
});

html中只有一个div，id是test

弄好以后就可以在页面中显示效果了。