<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>我的测试</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// HtmlEditor需要这个
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 50,
width: 600,
title: 'form',
frame: true,
items: [{
layout: 'column',
items: [{
columnWidth:.7,
xtype:'fieldset',
checkboxToggle:true,
title: '单纯输入',
autoHeight:true,
defaults: {width: 300},
defaultType: 'textfield',
items: [{
fieldLabel: '文本',
name: 'text'
},{
xtype: 'numberfield',
fieldLabel: '数字',
name: 'number'
},{
xtype:"combo",
fieldLabel: '选择',
name: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['value1', 'text1'],
['value2', 'text2']
]
}),
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText:'请选择'
},{
xtype: 'datefield',
fieldLabel: '日期',
name: 'date'
},{
xtype: 'timefield',
fieldLabel: '时间',
name: 'time'
},{
xtype: 'textarea',
fieldLabel: '多行',
name: 'textarea'
},{
xtype: 'hidden',
name: 'hidden'
}]
},{
columnWidth:.3,
layout:'form',
items:[{
xtype:'fieldset',
checkboxToggle:true,
title: '多选',
autoHeight:true,
defaultType: 'checkbox',
hideLabels: true,
style: 'margin-left:10px;',
bodyStyle: 'margin-left:20px;',
items: [{
boxLabel: '首先要穿暖',
name: 'check',
value: '1',
checked: true,
width: 'auto'
},{
boxLabel: '然后要吃饱',
name: 'check',
value: '2',
checked: true,
width: 'auto'
},{
boxLabel: '房子遮风避雨',
name: 'check',
value: '3',
width: 'auto'
},{
boxLabel: '行路方便',
name: 'check',
value: '4',
width: 'auto'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
title: '单选',
autoHeight:true,
defaultType: 'radio',
hideLabels: true,
style: 'margin-left:10px;',
bodyStyle: 'margin-left:20px;',
items: [{
boxLabel: '渴望自由',
name: 'rad',
value: '1',
checked: true,
width: 'auto'
},{
boxLabel: '祈求爱情',
name: 'rad',
value: '2',
width: 'auto'
}]
}]
}]
},{
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'htmleditor',
fieldLabel: '在线编辑器',
id: 'editor',
anchor: '98%'
}]
}],
buttons: [{
text: '保存'
},{
text: '读取'
},{
text: '取消'
}]
});
form.render("form");
});
</script>
</head>
<body>
<script type="text/javascript" src="js/examples.js"></script>
<div id="form" style="margin:20px;"></div>
</body>
</html>
这是一个很不错的ext编辑器！希望大家学习学习！
分享到：
相关推荐
Ext 编辑器，一款很强大的Ext可视化编辑器的开发工具。很大程度提高开发效率。
"EXT编辑器"是一款专为EXT框架设计的可视化开发工具，它旨在简化和加速EXT应用的构建过程。EXT是一个强大的JavaScript库，主要用于创建富互联网应用程序（RIA），它提供了丰富的组件库，包括表格、面板、菜单、窗口...
EXT编辑器充分利用了EXT库的功能，提供了一个直观的拖放界面，允许用户通过简单的操作来构建复杂的前端应用。 1. **EXT库**：EXT是一个功能丰富的JavaScript库，提供了多种UI组件，如表格、面板、菜单、表单等，...
在使用"带插图功能的EXT编辑器"时，需要注意兼容性问题，确保它与EXT的版本兼容，并且在不同的浏览器环境中表现稳定。同时，后端的文件存储和处理策略也需谨慎设计，以确保安全性和性能。 总之，"带插图功能的EXT ...
EXT中文可视化编辑器是一款专为EXT框架开发设计的可视化开发工具，它提供了便捷的界面，使得开发者无需编写复杂的JavaScript代码，就能创建出丰富的Web应用程序。EXT Design中文版将原本复杂的过程简化，使得开发者...
结合EXT可视化编辑工具，开发者可以利用这个平台快速开发后端服务，并通过EXT编辑器创建精美的前端界面，实现完整的Web应用开发流程。 综上所述，EXT可视化编辑工具是提高前端开发效率的有效工具，尤其适合EXT JS...
EXT可视化编辑器 Ext Designer Preview 破解版， EXT的可视化编辑，实现直接拖动即可生成EXTJS代码，方便快捷。 安装后直接使用，如需导出代码，请下载本人发布的代码生成补丁。
这篇文档将深入探讨如何将FCKEditor与EXT结合，以解决EXT编辑器的局限性，提升Web应用的用户体验。 **1. FCKEditor简介** FCKeditor（现称为CKEditor）是一款开源的JavaScript富文本编辑器，它提供了丰富的文本格式...
EXT图形界面编辑器是一款强大的前端开发工具，专为创建丰富的用户界面而设计。EXT是一个基于JavaScript的框架，它提供了一套完整的组件库，用于构建高度交互的、数据驱动的Web应用程序。EXT图形界面编辑器充分利用了...
通过这个“Ext编辑表格视频教程”，学习者将能够熟练掌握如何创建交互式、可编辑的表格，以及如何与服务器进行数据交换，提升Web应用的功能和用户体验。记得下载提供的`ext.exe`和`extdwrgrid.zip`文件，跟随教程...
Editor] - 李林峰的园子 - 博客园.rar"这个文件很可能是EXT JS初学者的教程资源，它可能详细介绍了EXT Editor的使用方法和示例代码，帮助开发者快速掌握如何在EXT应用中集成和使用文本编辑器。 "LitJSON.rar"文件则...
Ext IDE 是一个强大的可视化编辑器，专为EXTJS框架设计，极大地简化了EXTJS应用的开发过程。EXTJS是一个流行的JavaScript库，用于构建富客户端Web应用程序，它提供了丰富的组件库和灵活的布局管理。在传统的EXTJS...
在Row Editor中，每个列对应一个编辑器字段（例如，`Ext.form.field.Text`、`Ext.form.field.Date`等）。这些字段在用户选择编辑时动态插入到行中，并在编辑完成后更新数据。 3. **事件处理** Row Editor的源码中...
- **代码编辑器集成**：对于需要自定义的JavaScript逻辑，提供了内置的代码编辑器，支持代码高亮和自动补全。 - **多文档界面**：允许多个项目同时打开和编辑，提高了工作效率。 - **汉化界面**：本地化的中文...
EXT Designer编辑器的核心功能包括： 1. **可视化设计**：通过直观的拖放界面，开发者可以快速创建EXTJS应用的布局和组件，减少了手动编写HTML和CSS的工作量。你可以调整组件大小、位置，设置属性，以及配置事件...
在提到的"Ext 制作的CSS布局编辑器"中，我们可以推断这是一个基于ExtJS开发的工具，允许用户可视化地设计和编辑CSS布局。 CSS布局是网页设计的核心，它决定了元素在页面上的排列方式。传统的CSS布局方法包括流式...
这篇博客文章“在EXT中使用FCKEditor编辑器例子”可能探讨了如何将FCKEditor集成到EXT应用中，为用户提供一个方便的文本编辑界面。 在EXT中集成FCKEditor，首先你需要理解EXT的基本概念，如组件（Component）、布局...
本文将详细解析"ext + json HTML编辑器中上传图片"这一主题，以及如何在MyEclipse中运行相关的源码。 首先，我们要理解EXT是一个强大的JavaScript框架，由Sencha公司开发，用于构建富客户端应用。EXT提供了丰富的...
Ext制作的布局编辑器,很强的; 用Ext框架编写的,很好!
在这个例子中，`columns`数组包含了多个对象，每个对象代表一列，其中`editor`属性指定了该列的编辑器，如`TextField`（文本框）、`ComboBox`（下拉框）和`NumberField`（数字输入框）。 - `TextField`允许用户...