使用Ext_Designer生成Ext JS代码的步骤解析

需积分: 11 176 浏览量更新于2024-09-14 收藏 125KB DOC 举报

"这篇文档介绍了如何使用Ext_Designer生成的JavaScript代码来创建基于Ext JS库的浏览器客户端界面。" 在开发Web应用时，Ext_Designer是一个强大的工具，它允许开发者通过图形化界面设计用户界面，并自动生成对应的JavaScript代码。这个桌面应用程序专门用于简化Ext JS库的使用，该库是一个广泛使用的JavaScript框架，用于构建富客户端应用程序。对于初学者来说，理解如何利用ExtDesigner生成的代码可能有些挑战，以下是一个详细的步骤指导： 1. 引入Ext JS库：首先，确保在HTML文件的头部正确地引入Ext JS库。这通常涉及添加对`ext-all.css`和两个JavaScript文件（`ext-base-debug.js`和`ext-all-debug.js`）的引用。引用的路径应当根据你的项目结构调整，以确保文件能够被浏览器正确加载。 ```html <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/> <title>ExtJS</title> <link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="../ext-3.2.0/ext-all-debug.js"></script> </head> ``` 2. 添加ExtDesigner生成的代码：在HTML文件中，创建一个JavaScript块，将ExtDesigner生成的代码粘贴到此处。这段代码定义了用户界面的结构，包括组件类型、配置和布局等。 ```html <script type="text/javascript"> Ext.onReady(function(){ MyTabsUi = Ext.extend(Ext.TabPanel, { renderTo: "placeholder", activeTab: 2, width: 400, height: 250, initComponent: function(){ this.items = [ // ...此处应包含ExtDesigner生成的具体面板和控件配置 ]; } }); new MyTabsUi(); }); </script> ``` 3. 添加必要的初始化代码：在JavaScript块中，你需要初始化由ExtDesigner生成的组件。上述代码中的`Ext.onReady`函数确保在DOM加载完成后再执行，避免了可能出现的未定义错误。 4. 创建占位符：在`<body>`标签内，添加一个与`renderTo`属性匹配的`div`元素作为Ext JS组件的渲染目标。例如，如果`renderTo`是"placeholder"，则需要如下代码： ```html <body> <div id="placeholder"></div> </body> ``` 在这个例子中，Ext_Designer生成的代码创建了一个带有多标签页（TabPanel）的界面，其中包含了两个标签页，每个标签页内部又分别包含了一个文本区域（TextArea）和一个列表视图（ListView）。通过这种方式，开发者可以快速构建出复杂的交互式用户界面，而无需手动编写大量的JavaScript代码。总结起来，Ext_Designer通过图形化设计界面，简化了Ext JS应用的开发流程，让开发者能够更专注于业务逻辑，而不是UI布局的细节。通过正确引用库文件、插入生成的代码、初始化组件和设置占位符，可以有效地将设计转化为实际的Web应用程序。

Ext Designer 是一个生成 Javascript 代码的桌面程序。这些代码基于 Ext JS 库，描述了浏

览器客户端界面。

它的作用相当于 Visual Studio 的资源编辑器。

新手一般都不知道 Ext Designer 生成的代码怎么用，下面给出一个具体的例子。

1. 添加对 Ext JS 库的引用。注意路径必须使用正确的相对路径。[紫色部分]

2. 添加一个 Javascript 块。把 Ext Designer 生成的代码粘贴过来。

3. 添加红色的代码。

4. 在 body 中添加占位符代码，注意 div 的 id 必须和 renderTo 的值一样。【绿色部分】

<html>

<head>

<title>ExtJS</title>

Ext.onReady(function () {

MyTabsUi = Ext.extend(Ext.TabPanel, {

renderTo: "placeholder",

activeTab: 2,

width: 400,

height: 250,

initComponent: function() {

this.items = [

{

xtype: 'panel',

title: 'Tab 1',

items: [

{

xtype: 'textarea',

fieldLabel: 'Label',

width: 399,

height: 222

}

]

{

xtype: 'panel',

title: 'Tab 2',

items: [

{

下载后可阅读完整内容，剩余6页未读，立即下载

wuyanwen88

粉丝: 4
资源: 4

使用Ext_Designer生成Ext JS代码的步骤解析

Ext_Designer汉化教程与安装步骤解析

精通EXT_JS：从基础到实践

EXT_JS实用开发指南：个人整理笔记和示例代码

EXT可视化工具，Ext_Designer_Preview附带安装说明

Ext_Designer_Preview汉化包+变正版

EXT可视化工具，Ext_Designer_Preview附带安装说明.rar

EXT_IDE环境代码查看补丁

Ext Designer Preview 代码生成补丁

Ext Designer Preview3.0汉化版,可生成代码

jsp+ext4(js部分由Ext Designer生成)

最新资源