群组首页 → Web前端 → EXT → 知识库 → Ext JS 可视化开发工具 - extbuilder
   阅读:26572次   评论:7条   更新时间:2011-05-26    
前几天介绍过Extjs3.0将会有官方的可视化工具支持.在2.X是没办法用的.今天无意中发现了extbuilder这个现在就可以使用的Eclipse插件.

官方详细介绍:
http://code.google.com/p/extbuilder/wiki/UserGuide

预览效果:





    * Login or register to post comments
    * 1799 reads

    * extjs可视化开发工具
    * ext可视化开发工具

Submitted by admin on Mon, 12/29/2008 - 10:01.
你好,我是初学者,不知道怎样做好的Ext显示出来
Submitted by lxcseac on Wed, 01/07/2009 - 12:42.

你好,我是初学者,不知道怎样做好的Ext显示出来

    * Login or register to post comments

贴出你的代码
Submitted by admin on Wed, 01/07/2009 - 15:27.

一般不出来的时候看一下有没有脚本错误,推荐使用firefox + firebug.

    * Login or register to post comments

就是这段代码要在html里显示出来
Submitted by lxcseac on Wed, 01/07/2009 - 15:41.

view plaincopy to clipboardprint?

   1. Ext.namespace('wh_main'); 
   2. wh_main.Query = function(config) { 
   3.     Ext.applyIf(this, config); 
   4.     this.initUIComponents(); 
   5.     wh_main.Query.superclass.constructor.call(this); 
   6. }; 
   7. Ext.extend(wh_main.Query, Ext.Window, { 
   8.     initUIComponents : function() { 
   9.         // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW 
  10.         Ext.apply(this, { 
  11.             width : 600, 
  12.             height : 400, 
  13.             items : [{ 
  14.                 frame : "true", 
  15.                 layout : "column", 
  16.                 items : [{ 
  17.                     columnWidth : "0.5", 
  18.                     layout : "form", 
  19.                     items : [{ 
  20.                         fieldLabel : "开始日期", 
  21.                         xtype : "datefield" 
  22.                     }, { 
  23.                         fieldLabel : "结束日期", 
  24.                         xtype : "datefield" 
  25.                     }] 
  26.                 }, { 
  27.                     columnWidth : "0.5", 
  28.                     layout : "form", 
  29.                     items : [{ 
  30.                         fieldLabel : "测试", 
  31.                         xtype : "combo" 
  32.                     }, { 
  33.                         fieldLabel : "测试", 
  34.                         xtype : "combo" 
  35.                     }] 
  36.                 }], 
  37.                 xtype : "form" 
  38.             }], 
  39.             xtype : "window" 
  40.         }); 
  41.         // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE 
  42.     } 
  43. }); 

Ext.namespace('wh_main');
wh_main.Query = function(config) {
Ext.applyIf(this, config);
this.initUIComponents();
wh_main.Query.superclass.constructor.call(this);
};
Ext.extend(wh_main.Query, Ext.Window, {
initUIComponents : function() {
// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
Ext.apply(this, {
width : 600,
height : 400,
items : [{
frame : "true",
layout : "column",
items : [{
columnWidth : "0.5",
layout : "form",
items : [{
fieldLabel : "开始日期",
xtype : "datefield"
}, {
fieldLabel : "结束日期",
xtype : "datefield"
}]
}, {
columnWidth : "0.5",
layout : "form",
items : [{
fieldLabel : "测试",
xtype : "combo"
}, {
fieldLabel : "测试",
xtype : "combo"
}]
}],
xtype : "form"
}],
xtype : "window"
});
// END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
}
});

    * Login or register to post comments

使用例子如下
Submitted by admin on Thu, 01/08/2009 - 18:48.

view plaincopy to clipboardprint?

   1. <html> 
   2. <head> 
   3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   4. <title>power by extjs.org.cn</title> 
   5. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> 
   6. <link rel="stylesheet" type="text/css" href="../examples/examples.css" /> 
   7. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> 
   8. <script type="text/javascript" src="../ext-all.js"></script> 
   9. <script type="text/javascript"> 
  10. Ext.namespace('wh_main'); 
  11. wh_main.Query = function(config) { 
  12.     Ext.applyIf(this, config); 
  13.     this.initUIComponents(); 
  14.     wh_main.Query.superclass.constructor.call(this); 
  15. }; 
  16. Ext.extend(wh_main.Query, Ext.Window, { 
  17.     initUIComponents : function() { 
  18.         // BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW 
  19.         Ext.apply(this, { 
  20.         el:'fatjames', 
  21.             width : 600, 
  22.             height : 400, 
  23.             items : [{ 
  24.                 frame : "true", 
  25.                 layout : "column", 
  26.                 items : [{ 
  27.                     columnWidth : "0.5", 
  28.                     layout : "form", 
  29.                     items : [{ 
  30.                         fieldLabel : "开始日期", 
  31.                         xtype : "datefield" 
  32.                     }, { 
  33.                         fieldLabel : "结束日期", 
  34.                         xtype : "datefield" 
  35.                     }] 
  36.                 }, { 
  37.                     columnWidth : "0.5", 
  38.                     layout : "form", 
  39.                     items : [{ 
  40.                         fieldLabel : "测试", 
  41.                         xtype : "combo" 
  42.                     }, { 
  43.                         fieldLabel : "测试", 
  44.                         xtype : "combo" 
  45.                     }] 
  46.                 }], 
  47.                 xtype : "form" 
  48.             }], 
  49.             xtype : "window" 
  50.         }); 
  51.         // END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE 
  52.     } 
  53. }); 
  54.  
  55. Ext.onReady(function(){ 
  56.     var tt = new wh_main.Query({ 
  57.         el:'fatjames' 
  58.     }); 
  59.     tt.show(this); 
  60. }); 
  61. </script> 
  62. </head> 
  63. <body> 
  64.  
  65. <div id='fatjames' name="fatjames"></div> 
  66.  
  67. </body> 
  68. </html> 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>power by extjs.org.cn</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.namespace('wh_main');
wh_main.Query = function(config) {
Ext.applyIf(this, config);
this.initUIComponents();
wh_main.Query.superclass.constructor.call(this);
};
Ext.extend(wh_main.Query, Ext.Window, {
initUIComponents : function() {
// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
Ext.apply(this, {
el:'fatjames',
width : 600,
height : 400,
items : [{
frame : "true",
layout : "column",
items : [{
columnWidth : "0.5",
layout : "form",
items : [{
fieldLabel : "开始日期",
xtype : "datefield"
}, {
fieldLabel : "结束日期",
xtype : "datefield"
}]
}, {
columnWidth : "0.5",
layout : "form",
items : [{
fieldLabel : "测试",
xtype : "combo"
}, {
fieldLabel : "测试",
xtype : "combo"
}]
}],
xtype : "form"
}],
xtype : "window"
});
// END OF CODE GENERATION PARTS, DON'T DELETE CODE ABOVE
}
});

Ext.onReady(function(){
var tt = new wh_main.Query({
el:'fatjames'
});
tt.show(this);
});
</script>
</head>
<body>

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

</body>
</html>

    * Login or register to post comments

你好
Submitted by lxcseac on Fri, 01/09/2009 - 09:33.

我在IE6.0试了一下还是出错:'style'为空或不是对象

    * Login or register to post comments

Sorry,多了一个this
Submitted by admin on Fri, 01/09/2009 - 12:22.

把
view plaincopy to clipboardprint?

   1. Ext.onReady(function(){ 
   2.     var tt = new wh_main.Query({ 
   3.         el:'fatjames' 
   4.     }); 
   5.     tt.show(this); 
   6. }); 

Ext.onReady(function(){
var tt = new wh_main.Query({
el:'fatjames'
});
tt.show(this);
});

改为

view plaincopy to clipboardprint?

   1. Ext.onReady(function(){ 
   2.     var tt = new wh_main.Query({ 
   3.         el:'fatjames' 
   4.     }); 
   5.     tt.show(); 
   6. }); 

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

即可.

预览效果:
http://extjs.org.cn/extjs/forfriendexample/node_292_0001.html
评论 共 7 条 请登录后发表评论
7 楼 wyl8491797 2010-05-10 22:32
Click Browse button to select your Ext home directory.
那个路径目录  是指向哪的呀？
6 楼 wyl8491797 2010-05-10 22:18
我在建 项目的时候   点击完成  有这个错误 
internal err:attempted to beginrule:r/,does not match outer scope rule:p/test

请问怎么处理呀
5 楼 atgoingguoat 2010-03-21 21:04
ExtBuilder 垃圾。根本没什么用。
4 楼 torycatkin 2009-08-13 10:36
导出来的页面不支持firefox
3 楼 whutsun 2009-06-06 20:58
2.x不可以吗？
2 楼 fight86 2009-04-28 13:36
extbuilder的拖放方式比较特别,就是点击一下就可以了
1 楼 wg2993 2009-03-23 17:07
请求帮助：我装了extbuilder插件后，无法通过拖动来编辑

发表评论

您还没有登录,请您登录后再发表评论

文章信息

知识库: EXT
Global site tag (gtag.js) - Google Analytics