在用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
弄好以后就可以在页面中显示效果了。
分享到：
相关推荐
最后，可以在代码视图中查看生成的JavaScript代码，并进行进一步的优化。 4. **优势** - **提高效率**：通过图形化界面，开发者可以更快地实现界面原型，减少了手动编码的时间。 - **降低学习曲线**：对于EXT JS...
1. **代码生成器**：允许开发者通过图形化界面设计EXTJS组件，自动生成对应的JavaScript代码，避免手动编写繁琐的DOM结构和事件处理。 2. **智能提示和自动完成**：在编写EXTJS代码时，插件会提供类、方法和属性的...
这个界面生成器可能是为了简化和加速Ext组件的布局和配置，让开发者可以通过图形化界面来快速搭建网页界面，而不是手动编写复杂的JavaScript代码。 描述中提到的“Ext学习的好工具”，暗示了该软件对于初学者和有...
Ext JS是一个广泛使用的JavaScript库，它提供了丰富的用户界面组件和强大的数据管理功能，用于构建桌面级的Web应用。EXT Builder则是这个框架的一个配套开发工具，它简化了构建、调试和优化Ext JS应用的过程。 在...
6. **代码生成**："Ext Gui Builder"会自动生成Ext JS代码，开发者可以将这些代码整合到自己的项目中，快速构建前端应用的UI部分。 7. **集成开发环境**：了解如何将"Ext Gui Builder"与常用的IDE（如Eclipse、...
一旦安装成功，开发者可以在Eclipse的JavaScript编辑器中享受到专门为Ext JS定制的智能感知、代码导航和调试支持。 总的来说，这款Ext JS开发的Eclipse插件是提升Ext JS项目开发效率的有效工具，它将Eclipse的强大...
EXT界面设计器，也称为EXTBuilder，是一个可视化的设计工具，允许开发者通过拖放方式创建EXT组件和布局，而无需手动编写大量的HTML和JavaScript代码。EXTBuilder简化了EXT应用的开发流程，提高了开发效率，特别是...
前几天介绍过在2.X中可以使用extbuilder这个Eclipse插件来可视化开发ExtJs,今天又发现了一个在线版,唯一不同的是,在线版本只能导出json格式数据.最难得的是这一个项目也是采用ExtJs开发,并且全部代码开源. 设计器的...
是一个利用extbuilder插件，在eclipse下进行ext实例开发的一个简单例子！