endual
- 浏览: 3558588 次
- 性别:
- 来自: 杭州
-
文章分类
- 全部博客 (1491)
- Hibernate (28)
- spring (37)
- struts2 (19)
- jsp (12)
- servlet (2)
- mysql (24)
- tomcat (3)
- weblogic (1)
- ajax (36)
- jquery (47)
- html (43)
- JS (32)
- ibatis (0)
- DWR (3)
- EXTJS (43)
- Linux (15)
- Maven (3)
- python (8)
- 其他 (8)
- JAVASE (6)
- java javase string (0)
- JAVA 语法 (3)
- juddiv3 (15)
- Mule (1)
- jquery easyui (2)
- mule esb (1)
- java (644)
- log4j (4)
- weka (12)
- android (257)
- web services (4)
- PHP (1)
- 算法 (18)
- 数据结构 算法 (7)
- 数据挖掘 (4)
- 期刊 (6)
- 面试 (5)
- C++ (1)
- 论文 (10)
- 工作 (1)
- 数据结构 (6)
- JAVA配置 (1)
- JAVA垃圾回收 (2)
- SVM (13)
- web st (1)
- jvm (7)
- weka libsvm (1)
- weka屈伟 (1)
- job (2)
- 排序 算法 面试 (3)
- spss (2)
- 搜索引擎 (6)
- java 爬虫 (6)
- 分布式 (1)
- data ming (1)
- eclipse (6)
- 正则表达式 (1)
- 分词器 (2)
- 张孝祥 (1)
- solr (3)
- nutch (1)
- 爬虫 (4)
- lucene (3)
- 狗日的腾讯 (1)
- 我的收藏网址 (13)
- 网络 (1)
- java 数据结构 (22)
- ACM (7)
- jboss (0)
- 大纸 (10)
- maven2 (0)
- elipse (0)
- SVN使用 (2)
- office (1)
- .net (14)
- extjs4 (2)
- zhaopin (0)
- C (2)
- spring mvc (5)
- JPA (9)
- iphone (3)
- css (3)
- 前端框架 (2)
- jui (1)
- dwz (1)
- joomla (1)
- im (1)
- web (2)
- 1 (0)
- 移动UI (1)
- ｊａｖａ (1)
- jsoup (1)
- 管理模板 (2)
- javajava (1)
- kali (7)
- 单片机 (1)
- 嵌入式 (1)
- mybatis (2)
- layui (7)
- asp (12)
- asp.net (1)
- sql (1)
- c# (4)
- andorid (1)
- 地价 (1)
- yihuo (1)
- oracle (1)
最新评论
-
endual：
https://blog.csdn.net/chenxbxh2 ...
IE6 bug -
ice86rain：
你好，ES跑起来了吗？我的在tomcat启动时卡在这里Hibe ...
ES架构技术介绍 -
TopLongMan：
...
java public ,protect,friendly,private的方法权限（转） -
贝塔ZQ：
java实现操作word中的表格内容，用插件实现的话，可以试试 ...
java 读取 doc poi读取word中的表格(转) -
ysj570440569：
Maven多模块spring + springMVC + JP ...
Spring+SpringMVC+JPA
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>
分享到：
发表评论
-
extjs4 ajax 同步设置
2012-08-31 13:42 1961// 把新的数据发送到服务端去，保存 E ... -
extjs4 bug查询
2012-08-25 15:57 5048Bug Fixes Fix tabs mouseo ... -
ExtJS4学习笔记八－－Template的使用(转)
2012-08-24 13:32 1630http://hnhnhnhnhn.iteye ... -
ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器(转)
2012-08-22 12:44 2720ASP.NET+ExtJs4.0+表单提交submi ... -
EXTJS 4 form population with JSON read
2012-08-22 12:31 1853EXTJS 4 form population wi ... -
ExtJS Tree same parentNode
2012-08-19 17:22 1618ExtJS Tree same parentNode ... -
extjs4 一个很专业demo的博客
2012-08-19 16:57 1944http://extjstutorial.info/extjs ... -
ExtJs 4 – XTemplates
2012-08-18 20:34 1636Home › post › ExtJs 4 – XTe ... -
extjs4 tree操作
2012-08-18 20:25 5194Extjs tree 如何获得选中的节点 ... -
extjs4 打开pdf文件
2012-08-18 20:09 5882buttons: [{ text :'OPE ... -
cannot read property 'flex' of undefined
2012-08-18 13:45 7162Extjs的一个错误，谷歌浏览器捕获到的， 后来查了下原因， ... -
extjs4 初始化的一个方法
2012-08-17 21:03 1744initComponent : function() { ... -
extjs4 tree2
2012-08-16 15:26 1370http://blog.csdn.net/clskkk2222 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2012-08-16 13:36 1611Ext中的get、getDom、getCmp、g ... -
extjs4 学习博客
2012-08-12 16:03 1441http://blog.csdn.net/zhaoqilian ... -
extjs4 上传文件
2012-08-11 23:23 1607http://blog.sina.com.cn/s/blog_ ... -
extjs4 struts2 grid 新增、删除、修改
2012-08-11 20:22 2081http://blog.csdn.net/dys1990/ar ... -
extjs4做的grid，带分页，搜索 (转)
2012-08-11 14:32 2236【原创】extjs4做的grid，带分页，搜索 最 ... -
extjs4 tree
2012-08-11 09:27 1972How To Use ExtJS 4 TreePan ... -
ExtJs xtype
2012-08-10 21:45 1672ExtJs xtype一览 (2012-06-2 ...
相关推荐
### Ext_Designer生成代码的使用详解 #### 引言 在现代Web开发领域，JavaScript框架如雨后春笋般涌现，其中Ext JS以其强大的组件库和灵活性在企业级应用开发中占据一席之地。然而，对于初学者或不熟悉Ext JS语法的...
4. **生成代码**：Ext Designer的一大优势在于它可以生成Ext JS的源代码，这些代码反映了在设计视图中创建的布局和组件。这使得开发者可以深入理解生成的代码，并根据需要进行修改和优化。 在实际开发中，使用Ext ...
在使用这个资源包时，首先需要安装Ext Designer，然后应用中文补丁以实现本地化，最后利用代码生成补丁将设计结果导出为实际的代码。这样，即使是对Ext JS不太熟悉的开发者，也能借助这个工具快速上手并创建出高质量...
此外，EXT Designer还提供了代码生成功能，将设计直接转化为EXT JS的源代码，极大地提高了开发效率。 总的来说，EXT Designer在线版是一个强大的工具，它简化了EXT JS应用程序的前端设计过程，促进了开发流程的流畅...
1.Ext Designer生成的代码，如何使用；通过实例化来使用。 2.Ext 的model,store,grid使用,store如何接收json数据 3.form.Panel的分离，如何引用。 4.Ext.define的命名包含了namespace。 *本例子是简单的实现了一下...
2. **ExtJS兼容**：作为ExtJS的配套工具，ExtDesigner生成的代码是与ExtJS框架完全兼容的。这意味着设计出的界面可以直接融入到ExtJS应用中，无需额外调整。 3. **控件库**：ExtDesigner包含了丰富的ExtJS组件库，...
EXT Designer 是一个强大的网页设计工具，专为生成JSON代码而设计。这个工具允许用户通过直观的界面来构建和调整网页布局，极大地提升了开发效率，尤其是对于EXTJS框架的应用开发而言。EXTJS是一种流行的JavaScript...
8. **兼容性**：EXT Designer生成的代码兼容EXT JS框架的多个版本，确保设计的可移植性。 文件“Ext Designer Preview.7z”可能包含EXT Designer的演示或预览资源，比如示例设计文件、教程或者演示项目的源代码。...
将文件夹内文件替换Ext Designer中的原有文件
通过这种方式，开发者可以直接在代码编辑器中使用生成的代码，进一步定制和优化，从而大大提高了开发效率。EXT Designer支持拖放组件、调整布局、设置属性等操作，使得非程序员也能轻松创建复杂的EXT JS用户界面。 ...
5. **学习路径**：对于新手，可能需要先了解JavaScript基础和Ext JS的基本概念，然后再学习如何使用Ext Designer。对于有经验的开发者，可能更关注如何利用此工具提高开发效率，减少手动编码的工作量。 总的来说，...
在官方的EXT Designer Preview版本中，虽然提供了直观的图形化界面，允许开发者通过拖拽和配置组件来构建EXT JS应用的UI，但遗憾的是，它并不支持直接导出生成的代码。这对于开发者来说，意味着他们需要手动将设计的...
6. **代码导出**：设计完成后，Designer能够生成高质量的Ext JS代码，方便集成到项目中。 **三、汉化过程** 对于非英语用户来说，汉化Ext Designer能提高工作效率。本资源内附带了汉化补丁包，步骤如下： 1. **下载...
用户可以通过拖拽组件到设计画布上，调整其大小、位置和属性，然后自动生成对应的Ext JS代码。这对于快速创建和预览用户界面非常有用，同时也降低了学习曲线，尤其是对初学者。 在文章中，博主可能详细介绍了如何...
EXT Designer生成的前端代码可以与C#编写的服务器端代码无缝配合，构建出完整的Web应用程序。 总的来说，EXT Designer是一款强大的EXT JS开发辅助工具，它通过可视化界面设计提高了开发效率，尤其对于不熟悉...
设计完成后，ExtDesigner会生成相应的Ext JS代码，这些代码可以直接集成到Web应用的源码中。 在开发过程中，ExtDesigner提供了一种可视化的方式来编辑和预览界面，这大大降低了前端开发的复杂性。同时，它的代码...
3. **代码生成功能**：完成设计后，Ext Designer会自动生成对应的Ext JS代码，这些代码遵循最佳实践，结构清晰，易于理解和维护。 4. **集成开发环境**：与IDE的集成使得开发者能够在熟悉的环境中工作，如Eclipse或...
4. **代码生成与集成**：完成设计后，Designer 可以自动生成高质量的Ext JS源代码，这些代码可以直接导入到开发环境中，与现有的项目无缝集成。这极大地减少了手动编码的工作量，降低了出错的可能性。 5. **版本...
物以稀为贵，请大家抛开金钱观念！...2009.11.06 最新战况--------------------------发布设计器的补丁，支持显示生成代码、保存代码，另外做了部分汉化。 地址：http://download.csdn.net/source/1796765
3. **代码生成功能**：在设计完成后，EXT Designer会自动生成EXTJS的源代码，这使得开发者能够理解设计背后的代码结构，同时也方便了进一步的手动调整和优化。 4. **版本控制集成**：EXT Designer支持与常见的版本...