博客分类：
Ext Designer生成代码的使用
Ext Designer是一个生成Javascript代码的桌面程序。这些代码基于Ext JS库，描述了浏览器客户端界面。
它的作用相当于Visual Studio的资源编辑器。
新手一般都不知道Ext Designer生成的代码怎么用，下面给出一个具体的例子。
1. 添加对Ext JS库的引用。注意路径必须使用正确的相对路径。[紫色部分]
2. 添加一个Javascript块。把Ext Designer生成的代码粘贴过来。
3. 添加红色的代码。
4. 在body中添加占位符代码，注意div的id必须和renderTo的值一样。【绿色部分】
<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>
<script type="text/javascript">
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: [
{
xtype: 'listview',
columnSort: false,
columns: [
{
xtype: 'lvcolumn',
header: '名称',
dataIndex: 'string',
width: 0.25
},
{
xtype: 'lvcolumn',
header: '文件类型',
dataIndex: 'string'
},
{
xtype: 'lvcolumn',
header: '大小',
dataIndex: 'string'
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab 3',
items: [
{
xtype: 'treepanel',
title: 'My Tree',
root: {
text: 'Root Node'
},
loader: {
}
}
]
}
];
MyTabsUi.superclass.initComponent.call(this);
}
});
var ui = new MyTabsUi();
});
</script>
</head>
<body>
<div id=" placeholder ">
</div>
</body>
</html>
它的作用相当于Visual Studio的资源编辑器。
新手一般都不知道Ext Designer生成的代码怎么用，下面给出一个具体的例子。
1. 添加对Ext JS库的引用。注意路径必须使用正确的相对路径。[紫色部分]
2. 添加一个Javascript块。把Ext Designer生成的代码粘贴过来。
3. 添加红色的代码。
4. 在body中添加占位符代码，注意div的id必须和renderTo的值一样。【绿色部分】
<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>
<script type="text/javascript">
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: [
{
xtype: 'listview',
columnSort: false,
columns: [
{
xtype: 'lvcolumn',
header: '名称',
dataIndex: 'string',
width: 0.25
},
{
xtype: 'lvcolumn',
header: '文件类型',
dataIndex: 'string'
},
{
xtype: 'lvcolumn',
header: '大小',
dataIndex: 'string'
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab 3',
items: [
{
xtype: 'treepanel',
title: 'My Tree',
root: {
text: 'Root Node'
},
loader: {
}
}
]
}
];
MyTabsUi.superclass.initComponent.call(this);
}
});
var ui = new MyTabsUi();
});
</script>
</head>
<body>
<div id=" placeholder ">
</div>
</body>
</html>
相关推荐
2. **插入JavaScript代码块**：将Ext Designer生成的代码复制到页面中适当的JavaScript区块。这些代码通常包含创建Ext JS组件（如TabPanel、FormPanel等）的逻辑。 3. **添加额外的初始化代码**：根据项目需求，...
Ext Designer 是一个强大的图形用户界面（GUI）设计工具，专门用于创建基于Ext JS的Web应用程序。Preview 3.0是该软件的一个版本，它提供了更先进的功能和改进的用户体验。汉化版使得中国用户能够更加方便地使用这个...
这个工具使得开发者无需编写大量的HTML、CSS和JavaScript代码，就能构建出复杂的Web应用程序界面。它允许用户通过拖放组件、调整大小和设置属性来设计布局，极大地提高了开发效率。 在"Ext Designer+中文补丁+代码...
1.Ext Designer生成的代码，如何使用；通过实例化来使用。 2.Ext 的model,store,grid使用,store如何接收json数据 3.form.Panel的分离，如何引用。 4.Ext.define的命名包含了namespace。 *本例子是简单的实现了一下...
此外，EXT Designer还提供了代码生成功能，将设计直接转化为EXT JS的源代码，极大地提高了开发效率。 总的来说，EXT Designer在线版是一个强大的工具，它简化了EXT JS应用程序的前端设计过程，促进了开发流程的流畅...
2. **ExtJS兼容**：作为ExtJS的配套工具，ExtDesigner生成的代码是与ExtJS框架完全兼容的。这意味着设计出的界面可以直接融入到ExtJS应用中，无需额外调整。 3. **控件库**：ExtDesigner包含了丰富的ExtJS组件库，...
8. **兼容性**：EXT Designer生成的代码兼容EXT JS框架的多个版本，确保设计的可移植性。 文件“Ext Designer Preview.7z”可能包含EXT Designer的演示或预览资源，比如示例设计文件、教程或者演示项目的源代码。...
3. **JSON代码生成**：完成设计后，EXT Designer会自动生成对应的JSON代码，这是EXTJS应用程序的核心配置文件，定义了组件的结构、属性和事件处理。 4. **代码编辑与导入导出**：用户可以编辑生成的JSON代码，进行...
EXT设计器是Sencha公司开发的一款强大的前端开发工具，专门用于构建基于EXT JS的富客户端应用程序。EXT JS是一个JavaScript库，提供了丰富的用户界面组件和数据绑定机制，广泛应用于企业级Web应用开发。EXT Designer...
EXT JS是一种基于JavaScript的富客户端应用开发框架，它提供了一系列强大的组件和API，用于创建交互式、数据驱动的Web应用程序。EXT Designer是Sencha公司开发的一款预览版设计工具，旨在帮助开发者更高效地设计和...
Ext Designer 是一个强大的可视化界面构建工具，主要用于创建基于Ext JS框架的应用程序。这款设计工具让开发者无需编写大量的HTML和JavaScript代码，就能通过拖拽组件、调整布局和设置属性来构建复杂的用户界面。...
Ext JS是一个用于构建富互联网应用程序（RIA）的JavaScript框架，它提供了一套完整的组件库，包括表格、树形视图、菜单、按钮等，使得开发者能够创建功能丰富的、交互性强的Web应用。 然后，我们转向Ext Designer。...
EXT Designer生成的前端代码可以与C#编写的服务器端代码无缝配合，构建出完整的Web应用程序。 总的来说，EXT Designer是一款强大的EXT JS开发辅助工具，它通过可视化界面设计提高了开发效率，尤其对于不熟悉...
Ext Designer是一款强大的基于Web的图形化用户界面设计工具，主要用于创建Ext JS应用程序。这款软件让开发者无需编写大量的JavaScript代码，就能构建出复杂的用户界面。在"Ext Designer Preview3.0汉化版及教程"中，...
设计完成后，ExtDesigner会生成相应的Ext JS代码，这些代码可以直接集成到Web应用的源码中。 在开发过程中，ExtDesigner提供了一种可视化的方式来编辑和预览界面，这大大降低了前端开发的复杂性。同时，它的代码...
3. **代码生成功能**：完成设计后，Ext Designer会自动生成对应的Ext JS代码，这些代码遵循最佳实践，结构清晰，易于理解和维护。 4. **集成开发环境**：与IDE的集成使得开发者能够在熟悉的环境中工作，如Eclipse或...
EXT Designer是EXT_IDE的一个组件，它允许用户通过图形化界面来设计和构建EXT JS应用，无需手动编写大量JavaScript代码。然而，原始的代码生成和查看功能可能无法满足所有开发者的需求，特别是在复杂项目中，对源码...
4. **代码生成与集成**：完成设计后，Designer 可以自动生成高质量的Ext JS源代码，这些代码可以直接导入到开发环境中，与现有的项目无缝集成。这极大地减少了手动编码的工作量，降低了出错的可能性。 5. **版本...
6. **代码生成与编辑**：在可视化设计的同时，Ext Designer会自动生成对应的Ext JS代码，开发者可以查看和编辑这些代码，以进行更高级的定制。这种代码-视图的双向同步增强了开发效率。 7. **项目管理**：Designer...
3. **代码生成**：在设计完成后，ExtDesigner会自动生成Ext JS的源代码，包括布局、组件定义和事件处理。这意味着开发者可以专注于设计，而不用关心底层实现细节，减少了手动编码的工作量。 4. **预览功能**："Ext ...