李林峰的园子
&&&&&&&&&&&
extjs技术交流，欢迎加群（)
1.代码如下：
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
&!--ExtJs框架开始--&
&script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"&&/script&
&script type="text/javascript" src="/Ext/ext-all.js"&&/script&
&script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"&&/script&
&link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /&
&!--ExtJs框架结束--&
&script type="text/javascript"&
Ext.onReady(function () {
//初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//创建div组件
var imagebox = new Ext.BoxComponent({
style: 'width:150height:150margin:0border:1px solid # text-align:padding-top:20margin-bottom:10px',
tag: 'div',
id: 'imageshow',
html: '暂无图片'
//创建文本上传域
var file = new Ext.form.TextField({
name: 'imgFile',
fieldLabel: '文件上传',
inputType: 'file',
allowBlank: false,
blankText: '请浏览图片'
//提交按钮处理方法
var btnsubmitclick = function () {
if (form.getForm().isValid()) {
form.getForm().submit({
waitTitle: "请稍候",
waitMsg: '正在上传...',
success: function (form, action) {
Ext.MessageBox.alert("提示", "上传成功！");
document.getElementById('imageshow').innerHTML = '&img style="width:150height:150px" src="' + action.result.path + '"/&';
failure: function () {
Ext.MessageBox.alert("提示", "上传失败！");
//重置按钮"点击时"处理方法
var btnresetclick = function () {
form.getForm().reset();
var form = new Ext.form.FormPanel({
frame: true,
fileUpload: true,
url: '/App_Ashx/Demo/Upload.ashx',
title: '表单标题',
style: 'margin:10px',
items: [imagebox, file],
buttons: [{
text: '保存',
handler: btnsubmitclick
text: '重置',
handler: btnresetclick
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
buttonAlign: 'center',
items: form
win.show();
85 &/head&
89 (1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。
官方解释如下：
This may then be added to a Container as a child item.
To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:
93 (2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性，如 标记为：div，id是多少等。
官方实例为：
var myImage = new Ext.BoxComponent({
tag: 'img',
src: '/images/my-image.jpg'
101 (3)var file = new Ext.form.TextField()：创建一个新的文件上传域。
102 (4)name: 'imgFile':名称，重要，因为service端要根据这个名称接收图片。
103 (5)inputType: 'file'：表单类型为文件类型。
104 (6)waitTitle: "请稍候",waitMsg: '正在上传...',：上传等待过程中的提示信息。
105 (7)document.getElementById('imageshow').innerHTML = '&img style="width:150height:150px" src="' + action.result.path + '"/&';这个是原生态的js，把imageshow的值换成图片。
107 &/body&
108 &/html&
其中与service交互用上传图片的 一般处理程序文件，源码如下：
/App_Ashx/Demo/Upload.ashx
2 using System.W
3 using System.IO;
4 using System.G
6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
public class Upload : IHttpHandler
public void ProcessRequest(HttpContext context)
//虚拟目录，建议写在配置文件中
String strPath = "/Upload/Image/";
//文件本地目录
String dirPath = context.Server.MapPath(strPath);
//接收文件
HttpPostedFile imgFile = context.Request.Files["imgFile"];
//取出文件扩展名
String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
//重新命名文件
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileE
//文件上传路径
String filePath = dirPath + newFileN
//保存文件
imgFile.SaveAs(filePath);
//客户端输出
context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
public bool IsReusable
return false;
&2.效果如下：
(1)上传域不光可以上传图片，还要以上传其他文件。这里我们以图片为例。
(2)在实际开发中，我们还要对图片格式，大小等进行校验，这个示例测重于上传，没有加入任何校验。
阅读(...) 评论()&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！点击button为什么会打开一个新的窗口？如何解决？
[问题点数：20分，结帖人liub926]
点击button为什么会打开一个新的窗口？如何解决？
[问题点数：20分，结帖人liub926]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。extjs4 添加组件_extjs4 添加组件相关的所有信息,希望对您有所帮助-中国学网
extjs4 添加组件
状态:1个回答日期：回答人:学网网友问：大家帮忙啊，整了一天了，都没搞定，功能就是在formpanel中load数据库中...答：formPanel，一般是附加于windown的一个组件。类似于新建/修改弹出窗口中那些需要修改的内容既放于fromPanel中 formPanel中load数据，无非就是 下拉框。或是远程选择框。在你点击下拉框/远程框，触发事件。使用ext.ajax.request去后台查询出数据...状态:1个回答日期：回答人:hankuikuide问：请大神帮忙指导一下文件上传filefield的进度条如何控制答：这个问题你百度一下，可以找到答案，有人给出了完整的例子，之前我查过，不过我不建议使用它，功能不简单，我们现在用的是百度提供的小插件webuploader，你查查，这个很好用，功能强大。状态:1个回答日期：回答人:japhe答：你是要在Ext.grid.GridPanel里面嵌入Form吧 1 var grid = new Ext.grid.GridPanel([{ 2 cm: new Ext.grid.ColumnModel({ 3 header: '', 4 dataIndex: '', 5 //设置列显示值 6 //v:当前列的值 7 //params:当前列的参数 8 //record:当前记录集 9 r...状态:2个回答日期：回答人:gunpowder2000答：先导入 ext-all.js 再导入 ext-lang-zh_CN.js状态:4个回答日期：回答人:yj021321问：做了一个布局，右边是静态树，左边是tab panel，想点击树的节点，显示相...答：你可以在树节点上 加 Listeners click事件 js 创建 一个新的tab页面在 tabPanel中 Panel的 以html 用url 指向你要显示的页面状态:3个回答日期：回答人:lovemingming问：extjs的panel组件怎么使用答：//html代码 //js代码 var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮，设为false则不显示 renderTo: 'container',//这个panel显示在html中id为container的层中 width:400, height:200, html: "我...状态:2个回答日期：回答人:cheng022074问：var _window = new Ext.Window({ title:"特殊字符", frame:true, height...答：html，实际上是_window.body的内容，使用_window.body.update即可完成修改，至于你那个函数，赋值即可状态:2个回答日期：回答人:cqh46问：Extjs 中TreeGrid的应用，如何往中间添加TextField/combobox等Ext控件。...答：Ext.onReady(function() { var teststore = Ext.create('Ext.data.TreeStore', { fields : [{ name : 'code', type : 'string' }, { name : 'name', type : 'string' }], root : { expanded : true, name : "学校", children : [{ name : "年级"...
与【extjs4 添加组件】相关信息:&&&&&&&&&&&&&&&&&&&&
用户还关注Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法
　　Ext4+ Ext.form.field.File控件配置disabled:true，当调用转为setDisabled(false)或者enable()方法后使file控件可用，但是file控件右边的选择按钮还是灰色的。这个视乎是ext4的bug，此时fileupload控件可用，但是触发选择文件的按钮还是灰色的，并没有移除触发选择文件按钮的不可用样式。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01//EN& &http://www.w3.org/TR/html4/strict.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法&/title&
&link rel=&stylesheet& type=&text/css& href=&../../resources/css/ext-all.css& /&
&link rel=&stylesheet& type=&text/css& href=&../shared/example.css& /&
&script type=&text/javascript& src=&../../ext-all.js&&&/script&
&script type=&text/javascript&&
Ext.onReady(function () {
var d = Ext.create('Ext.form.File', {
name: 'files',
id: 'fileChoose',
disabled: true,
buttonText: '&img align=&center& src=&./images/icons/upload.png&/& upload',
buttonConfig: { style: { background: 'transparent',width:'70px' }, border: '0px' },
renderTo: document.body
setTimeout(function () {//2s后设置上传按钮可用
Ext.getCmp('fileChoose').setDisabled(false)
　　反过来如果默认Ext.form.field.File可用，当调用disable/setDisabled(true)使file控件不可用时，对应的选择触发按钮并没有变灰色。
1）对于默认为禁用的，Ext.form.field.File控件触发选择文件的按钮容器设置为灰色的样式默认为x-btn-disabled，这样我们可以使用getEl获取Ext.form.field.File对应的Ext.dom.Element对象，调用select方法查找触发选择文件按钮容器对象，再移除x-btn-disabled样式。
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01//EN& &http://www.w3.org/TR/html4/strict.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法&/title&
&link rel=&stylesheet& type=&text/css& href=&../../resources/css/ext-all.css& /&
&link rel=&stylesheet& type=&text/css& href=&../shared/example.css& /&
&script type=&text/javascript& src=&../../ext-all.js&&&/script&
&script type=&text/javascript&&
Ext.onReady(function () {
var d = Ext.create('Ext.form.File', {
name: 'files',
id: 'fileChoose',
disabled: true,
buttonText: '&img align=&center& src=&./images/icons/upload.png&/& upload',
buttonConfig: { style: { background: 'transparent',width:'70px' }, border: '0px' },
renderTo:document.body
setTimeout(function () {
Ext.getCmp('fileChoose').setDisabled(false).getEl().select('.x-btn-disabled').removeCls('x-btn-disabled')
2）对于动态禁用控件的，可以找到input file元素（样式为&x-form-file-input&），然后再调用up方法找到按钮容器div，给容器添加x-btn-disabled样式
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01//EN& &http://www.w3.org/TR/html4/strict.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法&/title&
&link rel=&stylesheet& type=&text/css& href=&../../resources/css/ext-all.css& /&
&link rel=&stylesheet& type=&text/css& href=&../shared/example.css& /&
&script type=&text/javascript& src=&../../ext-all.js&&&/script&
&script type=&text/javascript&&
Ext.onReady(function () {
var d = Ext.create('Ext.form.File', {
name: 'files',
id: 'fileChoose',
//disabled: true,
buttonText: '&img align=&center& src=&./images/icons/upload.png&/& upload',
buttonConfig: { style: { background: 'transparent',width:'70px' }, border: '0px' },
renderTo:document.body
setTimeout(function () {
Ext.getCmp('fileChoose').setDisabled(true).getEl().select('.x-form-file-input').first().up('div').addCls('x-btn-disabled')
原创文章，转载请注明出处：
阅读(112)喜欢(0)不喜欢(0)分类：
上一篇：下一篇：