ext中file控件的浏览按钮的样式 怎样改变??
修改一下代码
this.input_file.on("change", function(e) {
if (navigator.userAgent.indexOf('Firefox') >= 0) { //Firefox浏览器
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert('Unable to access local files due to browser security settings. To overcome this, follow these steps: (1) Enter "about:config" in the URL field; (2) Right click and select New->Boolean; (3) Enter "signed.applets.codebase_principal_support" (without the quotes) as a new preference name; (4) Click OK and try loading the file again.');
}
} else if(Ext.isIE){
this.input_file.dom.select();
url = document.selection.createRange().text;
}
var url = url || this.input_file.dom.value;
panel.getForm().findField('fileValue').setValue(url);
}, this);
访问firefox about:config 添加 signed.applets.codebase_principal_support 属性 值为true
改不了 除非改用flash
不能改的。不过可以通过一些障眼法来实现其他样式。下面代码就是
var panel = new Ext.form.FormPanel({
title : 'panel1',
items : [{
border : false,
layout : 'table',
items : [{
layout : 'form',
// hideLabels : true, 隐藏标签
border : false,
labelAlign : 'right',
style : 'padding-top:3px;',
items : new Ext.form.TextField({
name : 'fileValue',
fieldLabel : '选择文件'
})
}, {
border : false,
style : 'padding-left:2px;',
items : new Ext.Button({
text : '浏览。。。',
handler : function() {
panel.getForm().findField('file').el.dom
.click();
}
})
}]
}, new Ext.form.TextField({
hidden : true,
name : 'file',
hideMode : 'offsets',
inputType : 'file',
listeners : {
render : function(f) {
Ext.EventManager.on(f.el.dom, 'change', function(file, file) {
var value = panel.getForm().findField('file').getValue();
panel.getForm().findField('fileValue').setValue(value);
})
}
}
})]
})
var btn = new Ext.Button({
id : 'dd',
text : '浏览。。。',
listeners : {
render : function() {
var button_container = this.el.child(".x-btn-center");
button_container.position("relative");
this.input_file = Ext.DomHelper.append(button_container, {
tag : "input",
type : "file",
size : 1,
name : this.input_name || Ext.id(this.el),
style : "z-index: 99999;position: absolute;display: block; border: none;cursor: pointer;"
}, true);
this.input_file.setOpacity(0);
this.input_file.on("click", function(e) {
e.stopPropagation()
})
this.input_file.on("change", function(e) {
var value = this.input_file.dom.value;
panel.getForm().findField('fileValue').setValue(value);
},this)
btn_cont = this.el.child(".x-btn-center");
btn_box = btn_cont.getBox();
this.input_file.setStyle("font-size", (btn_box.width * 0.5) + "px");
inp_box = this.input_file.getBox();
adj = {
x : 3,
y : 3
};
if (Ext.isIE) {
adj = {
x : -3,
y : 3
}
}
this.input_file.setLeft(btn_box.width - inp_box.width + adj.x
+ "px");
this.input_file.setTop(btn_box.height - inp_box.height + adj.y
+ "px")
}
}
});
var panel = new Ext.form.FormPanel({
title : 'panel1',
items : [{
border : false,
layout : 'table',
items : [{
layout : 'form',
// hideLabels : true, 隐藏标签
border : false,
labelAlign : 'right',
style : 'padding-top:3px;',
items : new Ext.form.TextField({
name : 'fileValue',
fieldLabel : '选择文件'
})
}, {
border : false,
style : 'padding-left:2px;',
items : btn
}]
}]
})
var win = new Ext.Window({
width : 400,
height : 200,
items : panel
})
win.show();
已经是完整的了。我用2.1测试的,你用的是3.0版本吧。
this.el.child(".x-btn-center");
改成
this.el.child("em");
吧下面这段代码注释就行了
if (Ext.isIE) {
adj = {
x : -3,
y : 3
}
}