BBCode编辑器
/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.ux.FileSelector = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.ux.FileSelector.superclass.initComponent.call(this);
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag:'span', cls:'ux-cabinet', cn:[
{tag: "img", id: this.id + "Selector", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class},
{tag: "div", id: this.id + "Wrapper", cls: "ux-input-file-wrapper", cn: [
{tag: "input", name: this.name + "FILE", type: "file", cls: "ux-file", id: this.id + "File"}
]}
]},
{tag: "input", name: this.name + "Keep", type: "checkbox", cls:"x-hidden", id: this.id + "Keep", value: 1}
]};
var v = this.getRawValue();
if(v.length > 0){
this.hasValue = true;
this.uxInitialValue = v;
}
this.on("render", this.uxStylizeTrigger, this);
},
uxInitialValue: false,
name: 'file',
readOnly: true,
validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:250,
hasValue : false,
paramName : false,
onTrigger1Click : function(){
if(this.hasValue){
this.triggers[0].hide();
this.hasValue = false;
if(this.uxInitialValue) {
var keep = Ext.get(this.id + "Keep");
keep.dom.checked = true;
this.setValue(this.uxInitialValue);
} else {
this.setValue('');
}
var input = Ext.get(this.id + "File");
input.remove();
var wrapper = Ext.get(this.id + "Wrapper");
Ext.DomHelper.append(wrapper, {tag: "input", name: this.name + "FILE", type: "file", cls: "ux-file", id: this.id + "File"});
var input_new = Ext.get(this.id + "File");
input_new.on("change", this.uxHandleFile, this);
}
},
onTrigger2Click : function(){
this.hasValue = true;
this.triggers[0].show();
var keep = Ext.get(this.id + "Keep");
keep.dom.checked = false;
},
uxHandleFile : function() {
var input = Ext.get(this.id + "File");
//if this is unix style structure replace / with \
var filePath = input.dom.value.replace(///g, '\\');
//extract the filename from the value
var indexPos = filePath.lastIndexOf('\\');
var fileName = filePath.substring(indexPos + 1);
this.setValue(fileName);
search = /(zip|tar|gz)$/i;
if(search.test(fileName)) {
//alert('archive');
//createArchiveCheck(input);
}
this.onTrigger2Click();
},
uxStylizeTrigger : function(){
if(this.hasValue) {
var keep = Ext.get(this.id + "Keep");
keep.dom.checked = true;
}
var trigger = Ext.get(this.id + "Selector");
var wrapper = Ext.get(this.id + "Wrapper");
var input = Ext.get(this.id + "File");
input.on("change", this.uxHandleFile, this);
trigger.file = wrapper;
trigger.on("mousemove", function(e) {
var pageX = e.xy[0];
var pageY = e.xy[1];
ox = this.getX();
oy = this.getY();
var x = pageX - ox;
var y = pageY - oy;
var w = this.file.getWidth();
var h = this.file.getHeight();
this.file.setTop(y - (h / 2) - 5 + 'px');
this.file.setLeft(x - (w - 15) + 'px');
});
}
});
- 大小: 19 KB
分享到:
相关推荐
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...
`Ext.ux.SwfUploadPanel.js`是这样一个基于ExtJS和SwfUpload技术的插件,它实现了多文件上传的功能。这篇文章将深入探讨这个插件的工作原理、主要特点以及如何在实际项目中应用。 首先,`ExtJS`(全称为EXT ...
Ext.ux.submit是一个基于Ext Core库的扩展,用于增强原生表单提交的功能。这个扩展主要专注于添加验证机制,使得在前端就能对用户输入的数据进行有效性检查,从而提高应用程序的安全性和用户体验。在深入探讨之前,...
在IT行业中,`Ext.ux.Upload.Dialog`是一个用于Ext JS框架的第三方组件,它扩展了标准的对话框(Dialog)功能,提供了文件上传的能力。这个组件通常被用于Web应用程序,以便用户可以方便地向服务器上传文件。下面...
The class is ready for i18n, override the Ext.ux.UploadDialog.Dialog.prototype.i18n object with your language strings, or just pass i18n object in config. Server side handler. The files in the queue...
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...
这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件,方便开发者在自己的项目中直接使用。 UploadDialog组件的核心功能是提供一个用户友好的界面,让用户能够选择并上传文件到服务器。这个组件通常...
Ext.ux.UploadDialog是Ext JS库的一个扩展组件,主要用于实现用户友好的文件上传对话框。这个组件在Web应用中非常实用,特别是在需要处理大量文件上传或者需要用户交互确认的场景下。下面我们将深入探讨`ext.ux....
### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...
Ext.ux.UploadDialog批量上传文件实例是一个基于ExtJS组件库扩展插件的文件上传解决方案,主要针对需要一次性处理多个文件上传的应用场景。ExtJS是一个强大的JavaScript框架,它提供了丰富的用户界面组件,而Ext.ux....
`Ext.ux.form.ColorPickerFieldPlus` 是一个由老外开发者重写的色彩选择器组件,它扩展了原生的Ext JS库中的`ColorPickerField`控件,为用户提供更加丰富的色彩选取体验。这个组件的目的是为了实现更自由、更接近...
本文将深入探讨“ext多文件上传控件Ext.ux.UploadDialog”的使用方法及其常见问题。该控件作为ExtJS库的一个扩展,为用户提供了一种方便的多文件选择和上传的界面。 首先,Ext.ux.UploadDialog是一个基于ExtJS框架...
【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...
在使用 Ext.ux.UploadDialog 进行文件上传时,客户端与服务器端的交互是一个关键环节。Ext.ux.UploadDialog 是一个 ExtJS 框架的扩展组件,它提供了一个友好的用户界面来处理文件上传。在服务器端,我们需要正确解析...
带复选框的这是经过测试可以用的下拉树
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
标题 "ext.ux.menu.storemenu.zip" 暗示我们关注的是一个与 ExtJS 框架相关的扩展组件,具体是 `ux.menu.storemenu`。这个扩展可能为 ExtJS 的菜单系统提供了一种新的功能,可能涉及到数据存储和动态加载菜单项。在...
Ext.ux.touch.grid-master 是一个专门针对移动设备开发的JavaScript库,主要应用于开发触控友好的数据网格。这个压缩包包含的是EXTJS Touch框架的一个扩展组件,EXTJS Touch是Sencha公司开发的一个轻量级、高性能的...