ext 不需要安装,它就是普通的js和css,你把它放在你的项目目录里面就可以了。比如,下面这样的目录结果。其中,ext是你的ext-1.1.1解压后的目录,jsp是你自己的jsp文件放的目录,js是你自己的.js文件放的目录,img是你的图片存放的目录。
但是你使用的时候,需要在js或jsp文件里面引入ext的文件。比如:
我的登陆页面使用了ext,那么在登陆页面里面
login.jsp:
<head>
好袭雹<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
禅清 <link rel="stylesheet" type="text/css" href="<c:url value="/view/ext/resources/css/ext-all.css"/>" />
<script type="text/javascript" src="<c:url value="/view/ext/adapter/ext/ext-base.js"/>"></script>
友帆 <script type="text/javascript" src="<c:url value="/view/ext/ext-all.js"/>"></script>
<script type="text/javascript" src="<c:url value="/view/js/common/consts.js"/>"></script>
<script type="text/javascript" src="<c:url value="/view/js/authen/login.js"/>"></script>
<title>登陆界面</title>
</head>
其实ext就是普通的js,css和img的集合,不过是由别人编写的罢了,在使用上,和你自己写的js没有什么区别
下面为大家介绍在ExtJs中上传文件的几种方法第漏嫌滑一种方法:传统的上传方式
在formpanal中增加一个fileUpload的属性
例子代码:
JScript 代码 复制
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
renderTo:'file',
labelAlign: 'right',
title: '文件上传',
labelWidth: 60,
frame:true,
url: 服务器处理上传功能的url地址,//fileUploadServlet
width: 300,
height:200,
fileUpload: true,
items: [{
xtype: 'textfield',
fieldLabel: '文件名',
name: 'file',
inputType: 'file'//文件类型
}],
buttons: [{
text: '上传',
handler: function() {
form.getForm().submit({
success: function(form, response){
Ext.Msg.alert('信息', response.result.msg)
},
failure: function(){
Ext.Msg.alert('错误', '文件上传失败')
}
})
}
}]
})
})
第二种方法:借助Ext.ux.UploadDialog.Dialog的组件,在编码时需要导入两返腊个文件
需要引入 Ext.ux.UploadDialog 样式文件 和 Ext.ux.UploadDialog.packed脚本文件。
例子代码
//在使用此方法者亏进行文件上传时,其后台往页面的返回值类型是这样的:
//{'success':true,'message':'上传成功'}
//如果没有success:true,无论上传成功与否,显示的都是上传失败,其实这个和form.submit()的提交方式是一个道理。
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: '文件上传',
url:用于处理上传文件功能的Url,
reset_on_hide: false,
allow_close_on_upload: true ,
upload_autostart: false
})
//定义上传文件的按钮
var btnShow = new Ext.Button({
text:'上传文件',
listeners:{
click:function(btnThis,eventobj){
dialog.show()
}
}
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)