在 Ext 中,上传控件的change事件是触发不了的,这样就造成图片预览无法进行!
看一下解决的方法吧!。。。
上传控件:
var panel3 = new Ext.form.FormPanel({
labelAlign : 'left',
labelWidth:60,
border : false,
bodyStyle : 'padding:4px;',
frame : false,
url : '../ajaxdata/uploadFile.jsp',
autoHeight : true,
fileUpload : true,
items : [{
id : 'file',
autoScroll : false,
xtype : 'textfield'
fieldLabel:'本地上传',
name : 'file',
hideLabel : true,
// inputType : 'file'//按照Ext默认的属性将inputType设为file时,始终响应不了onchange事件,结果就以autoCreate的方式,如下,因为这种方式相当于html里的input,所以也就响应得了啦!
autoCreate : {
tag : "input",
type : "file",
size : "20",
autocomplete : "off",
onChange : "browseImages(this.value);"
}
}]
,
buttons : [{
text : '上传',
handler : function() {
panel3.getForm().submit({
// waitTitle : "请稍候",
waitMsg : "正在上传...",
success : function(form, action){},
failure : function(form, action) {
Global.alert('上传图片失败!');
}
})
}
}]
});
/*
* 编辑
* @date 2008 July 10
*/
经过实践,还存在一种可以激发change事件的方法;
首先说一下获取form里面的field的三种方法:
1)Ext.getCmp('id');
2)FormPanel.getForm().findField('id/name');
3)Ext.get('id/name'); //前提是FormPanel在界面上显示出来了
应用上面的第1和第2种方法得到的组件均触发不了change事件,只有第三种方法可以
触发,前提是FormPanel要在界面上显示出来,所以需要触发show事件,然后在show
事件里调用Ext.get('id/name'),由于FormPanel经常是放在Ext.Window里的,所
以新的问题又来了:
1)调用FormPanel.on('show',fn);//当Window显示出来的时候,事件没有触发
2)调用FormPanel.getForm().on('show',fn);//情况同上
3)调用FormPanel.ownerCt.on('show',fn);//OK 一切搞定
其中scope也是需要注意的一项!
如果再不行的话,可以先调用:
FormPanel.ownerCt.on('render',function(){
FormPanel.ownerCt.on('show',fn,this);
},this);
分享到:
相关推荐
- 上传组件通常与EXTJS的`Ext.form.Panel`配合使用,表单提交通常使用`Ext.Ajax.request`或`form.submit()`方法。 - `Ext.form.Basic`对象用于处理表单验证,确保所有字段都符合要求。 4. **异步上传**: - ...
标题中的“ExtJS5.1多文件上传控件”指的是在Web应用中使用ExtJS框架的一个功能组件,它允许用户一次选择并上传多个文件。ExtJS是一个强大的JavaScript库,专门用于构建富客户端的桌面级Web应用程序。在版本5.1中,...
3. **事件处理**:利用ExtJS的事件系统,如change事件,来监听用户的选择并触发相应的行为。 4. **Store配置**:配置Store的proxy,连接到后台数据源,可以是JSONP、Ajax或者远程服务器。 5. **模板和渲染器**:定义...
2. **事件监听**:讲解如何监听`change`事件,当用户选择文件后触发处理函数,获取文件信息,如文件名、大小等。 3. **进度条显示**:展示如何利用HTML5的FileReader API读取文件并更新上传进度,通过`progress`事件...
例如,`change`事件在文件选择后触发,`beforeupload`事件在上传开始前触发,可以用于验证文件类型或大小,`uploadprogress`事件则用于更新进度条状态。 4. **自定义表单提交** UploadDialog通常包含一个Ext.form....
4. **上传事件**:文件上传组件触发一系列事件,如`change`事件(当用户选择文件时触发),`beforeupload`事件(在文件上传前触发,可用于预处理或验证),以及`uploadcomplete`事件(文件上传成功后触发)。...
然后,可以使用`change`事件监听用户选择文件的行为,触发预览和上传操作。 预览功能通常通过HTML5的File API实现。当用户选择文件后,可以获取到文件对象,然后读取其数据URL,创建一个Image对象进行显示。这样...
- `Change`事件在用户从组合框中做出选择并确认后触发。当用户从下拉列表中选择一个新项,并且焦点离开组合框时,就会发生`Change`事件。这通常意味着当前选定的值已经发生了变化。 - 在`Change`事件的处理程序中...
你可以通过添加额外的属性和方法来定制这些控件,例如设置最小输入长度、延迟搜索触发时间、提供搜索建议等。 2. **事件处理**:`SearchField.js`可能包含了对用户输入的监听,如`keyup`、`change`或`specialkey`...
在这种情况下,"ExtJS日期多选组件源码"为我们提供了解决方案。 该组件扩展了ExtJS的基础日期选择器,实现了多选日期的功能。用户可以方便地通过该组件选取一个日期范围或单独的多个日期,并将这些日期以数组的形式...
1. **时间控件组件** ExtJS 提供了多种组件来处理时间输入,如`Ext.form.field.Time`和`Ext.picker.Time`。`TimeField`(`Ext.form.field.Time`)是基于表单的输入字段,而`TimePicker`(`Ext.picker.Time`)则提供...
2. **上传事件处理:** 当用户选择文件后,可以监听`change`事件来触发实际的文件上传。通常,这需要与服务器端进行交互,这就引出了我们的下一个主题——Struts2。 **Struts2:** Struts2是一个基于MVC(模型-视图...
接下来,我们需要一个预览函数,它会在文件输入元素(`input[type=file]`)的`change`事件触发时运行,获取图片文件并显示在预览区域。这个函数可以是这样的: ```javascript var preview = function (myform, ...
6. **事件监听**: 为了处理文件上传的生命周期,需要监听一系列事件,如`change`(文件选择后触发)、`submit`(表单提交时触发)、`success`和`failure`(服务器响应后触发)。 7. **服务器端处理**: 文件到达...
日期时间控件通常会触发一系列事件,如`select`、`change`等,开发者可以通过监听这些事件来执行相应的业务逻辑。同时,还需要了解如何设置验证规则,确保用户输入的有效性。 7. **响应式设计**: 现代Web应用...
为了解决这个问题,开发者创建了一个自定义的afterstart事件,这个事件会在RowEditor显示后立即触发,这时可以对CompositeField进行初始化。需要注意的是,RowEditor的items属性并非数组,而是对象,所以需要通过...
日期控件支持各种事件,如`select`(当用户选择日期时触发)、`change`(当日期字段的值改变时触发)等,这些事件可以绑定到函数来执行相应的业务逻辑。 5. **本地化** ExtJS4支持多语言,因此日期控件可以根据...
2. **事件监听**:lovcombo组件支持多种事件,如`select`(选中项变化)、`change`(值改变)等,可以通过监听这些事件来实现特定的功能。 3. **联动逻辑**:lovcombo的核心是联动逻辑,这需要通过编写JavaScript...
2. **文件上传事件监听**:当用户选择文件后,需要监听文件字段的`change`事件来触发实际的上传过程。可以通过`form.submit`方法提交表单,但需要配置适当的URL和参数。 3. **上传处理器(Upload Handler)**:...
总结来说,此代码段展示了EXTJS中如何创建一个具有交互性的表单,包括下拉列表的使用、事件监听、表单验证以及动态改变组件状态的方法。这种技术在Web应用中常用于实现用户界面的动态交互和数据验证,以提高用户体验...