extbuilder生成的js代码如何使用
日期：2014-05-16 浏览次数：20413 次
extbuilder生成的js代码怎么使用
在用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
弄好以后就可以在页面中显示效果了。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
