wangmengbk
- 浏览: 292339 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
菜鸟学生会：
Drools规则工作流引擎开发教程网盘地址：http://pa ...
Drools 规则流的使用介绍 -
jjjssh：
SparkManager 代码都没全，你从来拷贝来的
Spark 使用Java 写入 HBase -
swjtufei：
除了修改代码，修改IE设置可以吗？重装IE呢？
现在我有1W个 ...
IE 打开docx,xlsx生成zip格式下载解决 -
prince2008：
楼主，数据库覆盖没有用，请把把数据导出为sql上传下
Jquery Datagrid 动态分页以及CRUD（增删改查） -
any.bo：
Jquery Datagrid 动态分页以及CRUD（增删改查）
使用到的文件：
js文件：
<script type="text/javascript" src="js/FileUploadField.js"></script>
在ext-2.2\examples\form\FileUploadField.js中
css文件：
<link rel="stylesheet" type="text/css" href="css/file-upload.css" />
在ext-2.2\examples\form\css\file-upload.css
jar包:
SmartUpload.jar
可从网上下载
newfileupload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<!-- 引入CSS文件和JS文件 开始 -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/file-upload.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/FileUploadField.js"></script>
<!-- 引入CSS文件和JS文件 结束 -->
<script type="text/javascript">
Ext.onReady(function(){
var data=[{
name:"软件工程师",
value:"软件工程师"
},{
name:"初级程序员",
value:"初级程序员"
},{
name:"项目经理",
value:"项目经理"
},{
name:"高级程序员",
value:"高级程序员"
}];
var comstore=new Ext.data.JsonStore({
data:data,
fields:["name","value"]
});
var combo=new Ext.form.ComboBox({
store:comstore,
fieldLabel:"职位",
name:"zhiwei",
displayField:"name",
valueField:"value",
mode:"local",
emptyText:"==请选择您的职位=="
});
var form=new Ext.FormPanel({
renderTo:Ext.getBody(),
fileUpload:true,
width:500,
height:350,
frame:true,
layout:"column",
collapsible:true,
items:[{//total form start
layout:'form',
columnWidth:.5,
labelWidth:55,
items:[{//left column item start
fieldLabel:"姓名",
xtype:"textfield",
name:"name"
},{
fieldLabel:"照片",
xtype:"textfield",
inputType:"image",
id:"photo",
width:150,
height:100,
listeners:{
'render':function(cmp){
cmp.getEl().dom.src='img/img.jpg';
}
}
},{
fieldLabel:"出生日期",
xtype:"datefield",
format:"Y-m-d",
name:"birth",
value:new Date(),
listeners:{
'blur':function(cmp){
var checkyear=cmp.getValue().getFullYear();
var year=new Date().getFullYear();
Ext.getCmp('age').setValue(year-checkyear);
}
}
}]//left column item end
},{
layout:'form',
columnWidth:.5,
labelWidth:55,
items:[{//right column item start
fieldLabel:"密码",
xtype:"textfield",
inputType:"password",
name:"password"
},{
fieldLabel:"照片上传",
xtype:"fileuploadfield",
width:180
},{
fieldLabel:"性别",
xtype:"radiogroup",
items:[{
boxLabel:"男",
name:"sex",
inputValue:"1",
checked:true
},{
boxLabel:"女",
name:"sex",
inputValue:"0"
}]
},{
fieldLabel:"爱好",
xtype:"checkboxgroup",
columns:2,
items:[{//love start
boxLabel:"钓鱼",
name:"love",
inputValue:"钓鱼"
},{
boxLabel:"CS",
name:"love",
inputValue:"CS"
},{
boxLabel:"桌球",
name:"love",
inputValue:"桌球",
checked:true
},{
boxLabel:"其他",
name:"love",
inputValue:"其他"
}]//love end
},{
fieldLabel:"年龄",
id:"age",
name:"age",
xtype:"textfield",
value:'0',
listeners:{
'focus':function(){
Ext.getCmp('addr').focus();
}
}
}]//right column item end
},{
columnWidth:1,
layout:"form",
labelWidth:55,
items:[{
fieldLabel:"家庭地址",
width:350,
name:"addr",
id:"addr",
xtype:"textarea"
},{
fieldLabel:"身份证号",
xtype:"numberfield",
name:"iden",
width:400
},combo]
}],//total column item end
buttons:[{
text:"Submit",
handler:submit
},{
text:"Reset",
handler:function(){
form.getForm().reset();
}
}],
buttonAlign:"right"
});
function submit(){//form表单提交程序
form.getForm().submit({
url:"newfileupload"
});
}
var win=new Ext.Window({
width:510,
height:370,
collapsible:true,//可折叠
items:form,
title:"Information Form"
}).show();
});
</script>
</head>
<body>
</body>
</html>
后台接收类：
配置文件：
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>newfileupload</servlet-name>
<servlet-class>com.zhen.src.newfileupload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>newfileupload</servlet-name>
<url-pattern>/newfileupload</url-pattern>
</servlet-mapping>
newfileupload.java
package com.zhen.src;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.jspsmart.upload.Request;
import com.jspsmart.upload.SmartUpload;
public class newfileupload extends HttpServlet {
public newfileupload() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
/*
* 如果使用了fileUpload这个表单属性，
* 那么得值的时候，此时的request对象
* 就不可用了，我们要用SmartUpload
* 中得到的request对象
*/
SmartUpload upload=new SmartUpload();
upload.initialize(this.getServletConfig(),request,response);
try {
upload.upload();
/*
* *******************************
* 得值 start
* *******************************
*/
Request myrequest=upload.getRequest();
String name=myrequest.getParameter("name");
String zhiwei=myrequest.getParameter("zhiwei");
String password=myrequest.getParameter("password");
String birth=myrequest.getParameter("birth");
String age=myrequest.getParameter("age");
String addr=myrequest.getParameter("addr");
String iden=myrequest.getParameter("iden");
String sex=myrequest.getParameter("sex");
String []loves=myrequest.getParameterValues("love");
String strlove="";
for (int i = 0; i < loves.length; i++) {
strlove+=loves[i]+" | ";
}
System.out.println("name:"+name);
System.out.println("birth:"+birth);
System.out.println("age:"+age);
System.out.println("zhiwei:"+zhiwei);
System.out.println("sex:"+sex);
System.out.println("iden:"+iden);
System.out.println("loves:"+strlove);
System.out.println("pass:"+password);
System.out.println("addr:"+addr);
/*
* *******************************
* 得值 end
* *******************************
*/
if(upload.getFiles().getFile(0).isMissing()){
//throw new Exception("文件不存在");
System.out.println("文件不存在");
return;
}
//得到文件名
String fileName=upload.getFiles().getFile(0).getFileName();
System.out.println(fileName+"我得到的文件名");
upload.save("upload");
System.out.println("文件已上传");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
执行效果在附件中：
js文件：
<script type="text/javascript" src="js/FileUploadField.js"></script>
在ext-2.2\examples\form\FileUploadField.js中
css文件：
<link rel="stylesheet" type="text/css" href="css/file-upload.css" />
在ext-2.2\examples\form\css\file-upload.css
jar包:
SmartUpload.jar
可从网上下载
newfileupload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<!-- 引入CSS文件和JS文件 开始 -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/file-upload.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/FileUploadField.js"></script>
<!-- 引入CSS文件和JS文件 结束 -->
<script type="text/javascript">
Ext.onReady(function(){
var data=[{
name:"软件工程师",
value:"软件工程师"
},{
name:"初级程序员",
value:"初级程序员"
},{
name:"项目经理",
value:"项目经理"
},{
name:"高级程序员",
value:"高级程序员"
}];
var comstore=new Ext.data.JsonStore({
data:data,
fields:["name","value"]
});
var combo=new Ext.form.ComboBox({
store:comstore,
fieldLabel:"职位",
name:"zhiwei",
displayField:"name",
valueField:"value",
mode:"local",
emptyText:"==请选择您的职位=="
});
var form=new Ext.FormPanel({
renderTo:Ext.getBody(),
fileUpload:true,
width:500,
height:350,
frame:true,
layout:"column",
collapsible:true,
items:[{//total form start
layout:'form',
columnWidth:.5,
labelWidth:55,
items:[{//left column item start
fieldLabel:"姓名",
xtype:"textfield",
name:"name"
},{
fieldLabel:"照片",
xtype:"textfield",
inputType:"image",
id:"photo",
width:150,
height:100,
listeners:{
'render':function(cmp){
cmp.getEl().dom.src='img/img.jpg';
}
}
},{
fieldLabel:"出生日期",
xtype:"datefield",
format:"Y-m-d",
name:"birth",
value:new Date(),
listeners:{
'blur':function(cmp){
var checkyear=cmp.getValue().getFullYear();
var year=new Date().getFullYear();
Ext.getCmp('age').setValue(year-checkyear);
}
}
}]//left column item end
},{
layout:'form',
columnWidth:.5,
labelWidth:55,
items:[{//right column item start
fieldLabel:"密码",
xtype:"textfield",
inputType:"password",
name:"password"
},{
fieldLabel:"照片上传",
xtype:"fileuploadfield",
width:180
},{
fieldLabel:"性别",
xtype:"radiogroup",
items:[{
boxLabel:"男",
name:"sex",
inputValue:"1",
checked:true
},{
boxLabel:"女",
name:"sex",
inputValue:"0"
}]
},{
fieldLabel:"爱好",
xtype:"checkboxgroup",
columns:2,
items:[{//love start
boxLabel:"钓鱼",
name:"love",
inputValue:"钓鱼"
},{
boxLabel:"CS",
name:"love",
inputValue:"CS"
},{
boxLabel:"桌球",
name:"love",
inputValue:"桌球",
checked:true
},{
boxLabel:"其他",
name:"love",
inputValue:"其他"
}]//love end
},{
fieldLabel:"年龄",
id:"age",
name:"age",
xtype:"textfield",
value:'0',
listeners:{
'focus':function(){
Ext.getCmp('addr').focus();
}
}
}]//right column item end
},{
columnWidth:1,
layout:"form",
labelWidth:55,
items:[{
fieldLabel:"家庭地址",
width:350,
name:"addr",
id:"addr",
xtype:"textarea"
},{
fieldLabel:"身份证号",
xtype:"numberfield",
name:"iden",
width:400
},combo]
}],//total column item end
buttons:[{
text:"Submit",
handler:submit
},{
text:"Reset",
handler:function(){
form.getForm().reset();
}
}],
buttonAlign:"right"
});
function submit(){//form表单提交程序
form.getForm().submit({
url:"newfileupload"
});
}
var win=new Ext.Window({
width:510,
height:370,
collapsible:true,//可折叠
items:form,
title:"Information Form"
}).show();
});
</script>
</head>
<body>
</body>
</html>
后台接收类：
配置文件：
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>newfileupload</servlet-name>
<servlet-class>com.zhen.src.newfileupload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>newfileupload</servlet-name>
<url-pattern>/newfileupload</url-pattern>
</servlet-mapping>
newfileupload.java
package com.zhen.src;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.jspsmart.upload.Request;
import com.jspsmart.upload.SmartUpload;
public class newfileupload extends HttpServlet {
public newfileupload() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
/*
* 如果使用了fileUpload这个表单属性，
* 那么得值的时候，此时的request对象
* 就不可用了，我们要用SmartUpload
* 中得到的request对象
*/
SmartUpload upload=new SmartUpload();
upload.initialize(this.getServletConfig(),request,response);
try {
upload.upload();
/*
* *******************************
* 得值 start
* *******************************
*/
Request myrequest=upload.getRequest();
String name=myrequest.getParameter("name");
String zhiwei=myrequest.getParameter("zhiwei");
String password=myrequest.getParameter("password");
String birth=myrequest.getParameter("birth");
String age=myrequest.getParameter("age");
String addr=myrequest.getParameter("addr");
String iden=myrequest.getParameter("iden");
String sex=myrequest.getParameter("sex");
String []loves=myrequest.getParameterValues("love");
String strlove="";
for (int i = 0; i < loves.length; i++) {
strlove+=loves[i]+" | ";
}
System.out.println("name:"+name);
System.out.println("birth:"+birth);
System.out.println("age:"+age);
System.out.println("zhiwei:"+zhiwei);
System.out.println("sex:"+sex);
System.out.println("iden:"+iden);
System.out.println("loves:"+strlove);
System.out.println("pass:"+password);
System.out.println("addr:"+addr);
/*
* *******************************
* 得值 end
* *******************************
*/
if(upload.getFiles().getFile(0).isMissing()){
//throw new Exception("文件不存在");
System.out.println("文件不存在");
return;
}
//得到文件名
String fileName=upload.getFiles().getFile(0).getFileName();
System.out.println(fileName+"我得到的文件名");
upload.save("upload");
System.out.println("文件已上传");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
执行效果在附件中：
- 大小: 34.2 KB
分享到：
发表评论
-
Ext.menu.Menu(菜单)
2009-06-03 10:54 4872以下是一个静态的菜单，可供参考!如有做的不好的，可以留言相告！ ... -
Ext_tree(动态tree)
2009-06-03 10:47 4002以下是一个和数据库进行交互的一个动态树的一个示例: 以下是一个 ... -
Ext.grid.GridPanel_样式
2009-05-15 19:26 7259以下是一个简单的grilPanel,并且做了一些样式,做的不好 ... -
Ext布局
2009-05-02 18:16 2459这是Ext做的部分布局,请多多指教. //定义一个选项的面板 ... -
Json做的级联菜单
2009-05-02 18:07 2060<!DOCTYPE HTML PUBLIC " ...
相关推荐
超好用的EXT.JS控件集合、适合EXT.JS入门的小伙伴。详细介绍
日期选择控件在IT开发中扮演着至关重要的角色，它们为用户提供了一种直观的方式来输入或选择日期。在各种Web应用程序中，无论是后台处理还是前端交互，日期选择控件都不可或缺。这里，我们聚焦于四种主要的技术框架...
"Ext自定义控件库"正是这样一个资源集合，包含了开发者封装的一些特殊功能或样式调整的Ext控件，适用于那些标准组件无法满足需求的场景。 1. **GridPanel.xdc**：GridPanel是ExtJS中的核心组件之一，用于展示表格...
教程中提到了从Ext JS发布包开始使用，发布包是Ext JS框架提供的一套完整的资源集合，便于快速上手和使用框架。涉及到的版本包括ext-1.1.1和ext-2.0，不同版本间的功能差异较大，导致实例代码及用法有较大变动。在...
EXT提供了丰富的组件库，包括数据管理、用户界面控件和布局管理，使得开发者能够创建功能强大且交互性强的Web应用。 在提供的资源中，我们可以看到一系列关于EXT的学习资料，涵盖了从入门到精通的各个阶段： 1. **...
无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持...
Ext.NET 是一组为 ASP.NET WebForms 和 MVC 架构设计的开源组件集合。它基于 Ext.js 库构建，提供了超过 100 种工具，包括 TextBox、ComboBox、Button、ToolBar、StatusBar、Panel、TabPanel、ExplorerBar、MenuBar...
2. **Ext FileField**: FileField是Ext中用于文件选择的控件，用户可以通过这个组件选择本地文件。配置FileField时，我们通常会设置`name`属性来标识文件字段，并可以设置`allowBlank`属性控制是否允许用户不选择...
EXT的皮肤不仅包括颜色方案、字体样式，还涉及到按钮、窗口、表格等组件的样式，可以改变控件的边框、背景色、图标等细节，使应用的界面更加个性化和统一。 描述中的"各种ext皮肤"意味着这个压缩包可能包含了EXT的...
EXT JS的设计理念是提供一套完整的组件模型、数据绑定机制和丰富的用户界面控件，以便开发者可以创建出功能强大、交互性强的Web应用。本教程集合了EXT中文文档和两个EXT的简明教程，为初学者提供了全面的学习资源。 ...
EXT UI效果模板是一款专为开发者设计的前端界面模板集合，主要基于EXT库的3.2.0版本。EXT是一个强大的JavaScript框架，它提供了一整套组件化、可重用的用户界面元素，使得构建富互联网应用程序（RIA）变得更加便捷。...
Ext JS，作为一套卓越的 AJAX 控件集合，自问世以来便以其强大的功能、优雅的界面设计赢得了广泛赞誉。它不仅提供了一系列丰富的 UI 组件，还拥有高度可定制性，支持多种布局管理器，使得开发者能够构建出美观且功能...
EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件，用于创建具有不同功能的交互式表单。在EXT JS中，表单组件不仅包含基本的输入字段，还支持复杂的输入类型和验证机制。 ...
从给定的文件信息中，我们可以深入探讨“ext树实例代码”这一主题，了解如何在Ext JS中详细应用tree控件。 ### 标题：ext树实例代码 #### 描述：ext中，tree控件的详细应用，实例。 ### 知识点解析： **1. Ext ...
TreePanel组件提供了一个层次化的数据展示方式，适用于显示目录结构或具有父子关系的数据集合。 ##### 4. **Viewport（视口）** Viewport组件是Ext应用程序的根容器，用于填充整个浏览器窗口，管理布局和响应窗口...
"list"通常指的是List组件，它是EXT JS中用于展示列表数据的一种控件。List插件可以增加滚动、多选、拖放等功能，提升用户体验。例如， Infinite Scrolling 插件可以在用户滚动时动态加载更多数据，提高性能并减少...
Store是Ext JS 4中用于管理数据集合的组件，它连接到数据源，并提供多种机制来读取和更新数据。Reader则是Store用来解析从服务器返回的数据格式（如JSON、XML等）的工具。 13. **Proxy和Writer** 在数据管理中，...
Ext JS的功能包括：富组件集合、模块化架构、跨浏览器兼容性、触摸屏设备优化、丰富的数据处理和管理能力，以及对各种图表和数据可视化支持。这些特性使Ext JS成为开发复杂Web应用的首选框架。 Ext JS的学习曲线...
- **数据视图与列表视图（DataView & ListView）**：这两种视图组件主要用于显示非表格形式的数据集合，如缩略图列表等。 - **图表绘制**：Ext JS 内置了强大的图表库，可以轻松创建各种类型的图表，如柱状图、饼图...
- Ext JS提供了大量的UI组件，如数据网格(datagrid)、选项卡面板(tabpanels)、树形控件(tree controls)等，极大地提升了开发效率。 3. **双向数据绑定：** - 双向数据绑定机制使得视图与模型之间的数据同步变得...