问题描述
ext中file控件的浏览按钮的样式 怎样改变？？ 问题补充：lizhi92574 写道
解决方案
修改一下代码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
解决方案二：
已经是完整的了。我用2.1测试的，你用的是3.0版本吧。this.el.child(".x-btn-center"); 改成this.el.child("em");吧下面这段代码注释就行了if (Ext.isIE) { adj = { x : -3, y : 3 } }
解决方案三：
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();
解决方案四：
不能改的。不过可以通过一些障眼法来实现其他样式。下面代码就是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);})}}})]})
解决方案五：
改不了 除非改用flash