ext.domhelper.insertfirst
时间: 2023-10-15 15:02:15 浏览: 34
这是一个 Ext JS 中的静态方法,用于将一个 DOM 元素作为第一个子元素插入到另一个 DOM 元素中。具体用法如下:
```javascript
Ext.DomHelper.insertFirst(parentElement, childElement);
```
其中,`parentElement` 是要插入子元素的父元素,`childElement` 是要插入的子元素。该方法会将 `childElement` 作为 `parentElement` 的第一个子元素插入进去。
相关问题
ext FileUploadField 选择文件后触发事件 预览图片
在Ext JS中,可以通过监听 `change` 事件来触发文件选择后的操作,然后通过 `FileReader` 对象读取文件并使用 `Image` 对象来预览图片。
以下是一个基本的示例代码:
```javascript
Ext.create('Ext.form.Panel', {
title: 'File Upload Example',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...',
listeners: {
change: function(field, value) {
var file = field.fileInputEl.dom.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = Ext.DomHelper.append(Ext.getBody(), {
tag: 'img',
src: e.target.result,
style: 'height:150px;margin-top:10px;'
});
};
reader.readAsDataURL(file);
}
}
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
});
```
在上面的示例中,我们使用 `FileReader` 对象读取文件,并将读取的结果作为 `src` 属性设置到 `img` 元素中,从而实现了预览图片的功能。请注意,这里仅仅是一个基本的示例代码,您可以根据您的具体需求进行修改和优化。
extjs通过bodyElement.dom.childNodes[0].childNodes[2].childNodes[1].childNodes[0].childNodes[2].id获取的是上传文件的input元素的id,如果你连续上传同一张图片,那么这个input元素的id是不变的,这可能导致上传组件出现问题。最好的做法是,在上传同一张图片之前,先将这个input元素移除,然后再添加一个新的input元素,这样就能够避免这个问题了。如何避免这个问题,代码实现
可以通过以下代码实现:
```javascript
// 获取上传文件的input元素
var fileInput = Ext.get('fileInputId');
// 如果input元素存在,先将其移除
if (fileInput) {
fileInput.remove();
}
// 创建新的input元素
var newFileInput = Ext.DomHelper.append(Ext.getBody(), {
tag: 'input',
type: 'file',
name: 'file',
id: 'newFileInputId'
});
// 绑定上传事件
newFileInput.on('change', function() {
// 处理上传逻辑
});
```
这段代码首先通过`Ext.get`方法获取上传文件的input元素,如果该元素存在,则将其移除。然后通过`Ext.DomHelper.append`方法创建一个新的input元素,并为其设置id和name属性。最后,绑定上传事件,处理上传逻辑。这样每次上传之前都会创建一个新的input元素,避免了同一张图片上传时出现的问题。