<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Checkbox TreePanel</title>
<link rel="stylesheet" type="text/css" href="/ext/docs/resources/ext-all.css" />
<script type="text/javascript" src="/ext/docs/resources/ext-base.js"></script>
<script type="text/javascript" src="/ext/docs/resources/ext-all.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var form1 = new Ext.form.FormPanel({
baseCls : 'x-plain',
labelWidth : 70,
fileUpload : true,
defaultType : 'textfield',
items : [{
xtype : 'textfield',
fieldLabel : '姓名',
name : 'username',
id : 'username',
allowBlank:false,
blankText : 'you must input sth .',
anchor : '100%' // anchor width by percentage
}]
});
var win = new Ext.Window({
title : '表单提交',
width : 400,
height : 100,
minWidth : 300,
minHeight : 100,
layout : 'fit',
plain : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
items : form1,
buttons : [{
text : '普通方式提交',//这种方式 后台页面要跳转 ，就和平时jsp页面上的form一样
handler : function() {
if ( form1.form.isValid() ) {
var form = form1.getForm().getEl().dom;
form.action = '/aicpa/aicpaTest_uploadFile.action'
//form.method = 'GET';//GET、POST
form.submit();
}
}
},{
text : 'Ajax方式提交',
handler : function() {
if ( form1.form.isValid() ) {
form1.getForm().submit({
url : '/aicpa/aicpaTest_uploadFile.action',
method : 'POST',
waitTitle:'提示',
waitMsg:"提交中。。。。。",
success : function(form, action) { //返回值 {success:true}
Ext.Msg.alert('Message', action.result.success); //服务端所有的字符串
alert(action.response.responseText);
//win.close();
},
failure : function(form, action) {
Ext.Msg.alert('Error', action.result.errormsg );
alert(action.result.errormsg);
}
})
}
},
},{
text : 'Connect方式', //数据返回格式 随意
handler : function() {
if ( form1.form.isValid() ) {
var conn = new Ext.data.Connection();
conn.request({
url:'/aicpa/aicpaTest_uploadFile.action',
method:'POST',
params:form1.form.getValues(),
success:function(response , opts ){
alert(response.responseText );
}
});
}
},
},{
text : 'Ajax方式', //数据返回格式 随意
handler : function() {
if(form1.form.isValid() ) {
Ext.Ajax.request({
url:'/aicpa/aicpaTest_uploadFile.action',
method:'post',
//jsonData://指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
//xmlData://指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
params:form1.form.getValues(),
callback:function(options,success,response ){
if(success){
Ext.Msg.alert('success',response.responseText);
}
}
});
}
},
}, {
text : '关闭',
handler : function() {
win.close();
}
}]
});
win.show();
});
</script>
相关推荐
ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式，它允许开发者在运行时动态地创建、修改或加载表单组件，以适应不同场景下的数据输入需求。在Web应用开发中，动态表单通常用于处理不...
此外还可以选择其他几种方式，例如“title”、“under”或“side”，甚至可以指定一个元素ID来作为提示目标。 #### 三、Extjs 验证方法 Extjs提供了多种内置验证方法以及自定义验证功能，使得开发者可以非常方便地...
这里的`form`对象实际上是`Ext.form.BasicForm`类型，它包含了`load`和`submit`两种方法，用于完成数据的加载和提交工作。 ### load和submit方法 - **load方法**：该方法主要用于从服务器端加载数据并填充到表单中...
9. **主题与皮肤**：该版本可能包含了几种预定义的主题，允许开发者更改UI外观，满足不同设计需求。 10. **API文档**：虽然没有提供官方中文文档，但英文API文档详细介绍了每个类、方法和属性，是学习和使用ExtJS的...
在EXTJS中，MVC模式的应用主要体现在以下几个方面： 1. **模型（Model）**：负责处理和存储数据，与后端服务器进行交互。EXTJS的Model类定义了数据字段、验证规则以及数据操作方法，如load、save等。 2. **视图...
在深入探讨Extjs表单中...以上就是Extjs表单中常用的几种组件，通过合理的组合和配置，可以构建出功能丰富、用户体验良好的表单界面。在实际开发中，开发者可以根据具体需求灵活选择和应用这些组件，以满足项目的需求。
3. **Ajax提交**：由于文件上传可能涉及较大的数据量，ExtJS通常使用异步（Ajax）方式提交文件。这需要使用`Ext.Ajax.request`方法，设置适当的URL、method（通常是POST）以及包含文件数据的form对象。 4. **...
8. **表单组件**：ExtJS 3.4.0 包含各种表单字段（如文本框、下拉列表、日期选择器等），以及表单验证和提交功能，使得创建交互式表单变得容易。 9. **数据存储**：提供了本地存储（Local Storage）和远程存储...
- **行选择模型**: 介绍了几种不同的行选择模型及其应用场景。 - **Grid视图**: 讲解了如何配置Grid视图，包括排序、过滤等功能。 #### GridPanel分页 当表格中的数据量较大时，分页功能就显得尤为重要。 - **...
7. **表单（Forms）**：EXTJS2提供了强大的表单组件和表单处理功能，支持各种输入类型，可以进行验证和数据提交。 8. **图表（Charts）**：EXTJS2包含一套完整的图表组件，可以创建各种类型的统计图表，如柱状图、...
3. **布局管理**：EXTJS提供了多种布局方式，如Fit布局、Border布局、Form布局等，可以根据需要调整组件的排列和大小。 4. **表单组件**：EXTJS包含一系列表单控件，如文本字段（TextField）、选择框（ComboBox）、...
3. **布局管理（Layouts）**：EXTJS支持多种布局方式，如Fit、Border、Form、Table等，可以方便地组织和调整组件的布局。 4. **Ajax和数据存储（Ajax and Data Stores）**：提供了XML、JSON等格式的数据读取和写入...
- **HTML表单提交**：通过构建一个隐藏的HTML表单，并设置合适的属性（如`enctype="multipart/form-data"`），来实现文件的上传。 - **AJAX请求**：通过Ajax发送异步请求到服务器端，处理文件上传过程中的各种逻辑。...
ExtJS是一种基于JavaScript的富客户端应用开发框架，它提供了丰富的组件和强大的数据处理能力，使得开发者可以构建功能复杂的Web应用程序。本压缩包包含了ExtJS 2.0和3.0两个版本的中文API文档，以及对应的中英文...
ExtJS是一种基于JavaScript的开源富客户端框架，专为构建企业级Web应用程序而设计。它提供了丰富的组件库，包括数据网格、图表、表单、菜单等，使得开发者可以创建功能强大且用户界面友好的Web应用。本教程将带你...
3. **布局管理**：ExtJS支持多种布局方式，如表布局（Table Layout）、流式布局（Form Layout）、绝对布局（Absolute Layout）等，可以根据不同场景灵活选择，满足各种布局需求。 4. **Ajax和数据接口**：ExtJS内置...
6. **事件处理**：利用ExtJS的事件模型，可以轻松实现用户交互，如按钮点击、表单提交等，这些事件可以通过Ajax调用Struts2 Action进行处理。 7. **错误处理和验证**：Struts2提供了全局和局部的验证机制，可以对...
5. **创建组件**：EXTJS提供了大量的预定义组件，如面板（Panel）、表格（Grid）、树形控件（Tree）、表单（Form）等。在`app`目录下创建对应的类文件，如`views/MyPanel.js`，定义组件的配置和行为。 6. **数据...
Spinner插件通常与Ext.form.NumberField一起使用，提供一种用户友好的交互方式来调整数值。它的主要特点包括： 1. **数值控制**：Spinner提供了最小值、最大值、步长和增量的设定，确保用户在设定范围内调整数值。 ...
这个简易图书管理系统正是利用了ExtJS的强大力量，为用户提供了一种直观且美观的方式来管理和查看图书信息。 首先，我们来看看ExtJS的核心特性。ExtJS提供了一个完整的组件模型，包括各种UI控件，如表格（Grid）、...