上面了解了一下window了之后..直接取下同事项目添加操作.再自己搞了个例子!
addCategory.js
var categoryName = new Ext.form.TextField({
fieldLabel: '类别名',
emptyText: '请输入类别的名字',
allowBlank: false,
name:'categoryName',
msgTarget: 'under'// 验证错误信息显示地点,加上这个属性,才会有验证效果
});
从上面代码中 可以发现组件FormPanel和TextField2个主要的组件.先说下TextField
顾名思义TextFeild就是和Html的那个text属性是差不多的!不过ext提供了一个可以直接验证的效果。其下面的几个属性:
1.fieldLabel: //文本框提示名字,
2.emptyText: //'请输入类别的名字',
3.allowBlank: //是否允许为空.默认情况下为true.
4.name://用于别的容器对其添加,
5.msgTarget: //验证错误信息显示地点,加上这个属性,才会有验证效果
这是一个文本框组件对象。现在可以将组件对象向formPanel进行添加
addCategory.js
var addcategoryForm = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'textfield',
items: [
categoryName,//通过名字获取到相应的组件添加到该容器中
categoryDescription
]
});
属性的解析:
//input的各种类型(这个大家都知道,就只列了几个典型的)
radio
check
text(默认)
file
password等等
1.labelAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"
2.labelWidth:fieldlabel的占位宽
3.method:"get"或"post"
4.url:"提交的地址"
5.submit:提交函数 //这里是后面window调用该submit的函数进行使用
var addCategoryWin = new Ext.Window({
title: '添加类别',
width: 260,
height:240,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
closeAction :'hide',
listeners:{
"close":function(){
// addWindow.hide();
}
},
bodyStyle:'padding:5px;',
closable :true,// 窗体右上角是否有关闭按钮
buttonAlign:'center',// 窗体中按钮的摆放方式
items: addcategoryForm,
buttons: [{
text: '确定',
handler:function(){// 按钮点击后的响应函数
// 提交数据
if(addcategoryForm.getForm().isValid()) // 判断验证是否过关
{
addcategoryForm.getForm().submit({// 提交细节
waitMsg : '请稍等一下',
waitTitle:'等待',
method:'POST',
url:'/struts2_ext/ext/core/ajax/addCategory.action',// 提交的目标地址,这是一个url,
// 提交结果成功返回后自动触发的函数
success :function(form,action)
{
// 获取后台响应回来的JSon格式的String
var msg = action.response.responseText;
// 将JSon格式的String转换成JavaScript格式的对象
var obj = Ext.decode( msg );
var msgData = obj.resultMsg;
Ext.Msg.alert("提示", msgData );
},
// 提交结果失败后自动触发的函数
failure :function(form,action)
{
// 获取后台响应回来的JSon格式的String
var msg = action.response.responseText;
// 将JSon格式的String转换成JavaScript格式的对象
var obj = Ext.decode( msg );
var msgData = obj.resultMsg;
Ext.Msg.alert("提示", msgData );
}
});
addCategoryWin.hide();
} else {
Ext.MessageBox.alert( "验证失败" );
}
}
},{
text: '取消',
handler:function(){
// 隐藏窗体
addCategoryWin.hide();
}
}]
});
属性上篇文章做了解析就不多说.说下一些操作!
进度条的显示
waitTitle:进度条的标题
waitMsg:进度条的内容
其中的一些响应是通过json传输数据到struts2进行解析.
效果为
下面提供源码下载.
- 大小: 11.3 KB
- 大小: 4 KB
- 大小: 4.8 KB
分享到:
相关推荐
Ext GWT(GWT eXtension)是Google Web Toolkit(GWT)的一个扩展库,它为GWT添加了更多的组件和功能,使得开发者能够创建出更富交互性和美观的用户界面。在2.0版本中,Ext GWT引入了许多新特性,提升了性能和可用性...
`ext-core-debug.js`和`ext-study.zip`可能包含EXT的核心库和学习资源,`resources`文件夹则包含了CSS样式和图片等资源。 总结来说,EXT2.0.2的表格间数据拖拽涉及到EXT Grid、DataStore、DragDrop和DropTarget的...
在这个名为"EXT学习小例子"的项目中,我们将深入探讨EXTJS如何实现数据的增加、删除和修改功能。 EXTJS的核心是其组件系统,它提供了各种UI组件,如表格、表单、面板、树形视图等,这些组件可以方便地组合在一起...
Grid是Ext Js中用于展示和操作表格数据的关键组件。`Ext.grid.GridPanel`允许你以表格的形式展示数据,支持排序、分组和分页。例如,以下代码创建了一个简单的Grid,显示了用户ID、用户名和密码: ```javascript ...
### EXT学习文档知识点详解 #### 1. EXT简介 EXT是一个功能强大的JavaScript库,用于构建交互式的Web应用程序。它提供了一系列工具和API,使得开发者能够更容易地创建动态且丰富的用户界面。EXT支持多种浏览器,并...
EXT3.3学习文档主要涉及的是Linux操作系统中的EXT3文件系统的一个特定版本——EXT3.3。EXT3,全称为“Third Extended File System”,是Linux系统中广泛使用的日志文件系统之一,尤其在早期的发行版中非常常见。EXT...
这个项目不仅提供了理论知识的学习,还提供了实际操作的平台,是EXT学习的一个很好的起点。通过实际动手,你可以更深入地理解EXT的工作原理,并提升你的前端开发技能。在实践中遇到问题时,可以查阅EXT的官方文档,...
在EXT JS这个强大的JavaScript库中,树形组件(Tree)是一种常见的UI元素,常用于展现层级结构的数据。本文将深入探讨如何处理无限级JSON数据格式并实现动态加载,以优化EXT树的性能。 首先,我们要理解EXT树的基本...
这个压缩包文件“ExtProject”显然是一个基于Ext框架的项目,它涵盖了数据库操作、Ajax请求以及Store的使用,是初学者学习Ext的理想资源。 首先,让我们深入了解一下Ext中的"增删改查"(CRUD)操作。CRUD代表创建...
通过Demo,你可以学习如何创建表单、添加输入字段、验证用户输入,以及如何与服务器进行数据交互。 5. **图表和图形**:Ext包含了一个强大的图表组件库,支持各种类型的图表,如线图、柱状图、饼图等。这些Demo将...
EXT Grid 是一个强大的数据网格组件,广泛应用于EXT JS框架中,用于展示和操作大量结构化数据。表头的三层插件则是EXT Grid的一种扩展功能,它允许用户在表头部分实现更为复杂和多层次的布局,以更好地管理和组织...
总结来说,Ext3.3完整包是针对Linux操作系统的Ext3文件系统的优化版本,提供了日志式文件系统、事务处理、元数据备份等特性,以保证数据安全和系统稳定性。尽管现代系统可能更倾向于使用更新的文件系统,但对于了解...
EXT不仅提供了丰富的组件库,还有一套完整的事件处理机制和数据绑定功能,使得与服务器端的数据交互变得更加便捷。 目录结构: EXT中文手册涵盖了EXT的基本概念、下载安装、快速入门、核心组件、事件处理、Ajax通信...
【标题】与【描述】中提到的"Ext学习资料适合入门"是指ExtJS框架的学习资源,适合初学者使用。ExtJS是一个用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件和API,能够帮助开发者创建功能强大的交互式...
根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...
4. **强大实用的工具封装**:EXT不仅提供了丰富的UI组件,还封装了许多实用的功能,如数据绑定、数据网格处理、拖放操作等,简化了开发过程。 5. **开源GPL**:EXT遵循GPL许可协议,允许开发者免费使用和修改代码,...
3. Ext.data.Store:数据存储,与数据源进行交互,支持远程数据加载和本地数据存储。 4. Ext.grid.GridPanel:表格组件的主要类,包含了数据绑定、列配置、行处理等功能。 5. Ext.layout.ContainerLayout:容器布局...
树形控件允许用户进行添加、删除和修改节点的操作,这在许多业务场景中非常常见。 1. **树的增删改操作**: - **增加**:在树中增加新节点通常通过`treePanel.getRootNode().appendChild(node)`或者`treePanel....