Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法
Ext4+ Ext.form.field.File控件配置disabled:true,当调用转为setDisabled(false)或者enable()方法后使file控件可用,但是file控件右边的选择按钮还是灰色的。这个视乎是ext4的bug,此时fileupload控件可用,但是触发选择文件的按钮还是灰色的,并没有移除触发选择文件按钮的不可用样式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { var d = Ext.create('Ext.form.File', { name: 'files', id: 'fileChoose', disabled: true, buttonText: '<img align="center" src="./images/icons/upload.png"/> upload', buttonConfig: { style: { background: 'transparent',width:'70px' }, border: '0px' }, renderTo: document.body }); setTimeout(function () {//2s后设置上传按钮可用 Ext.getCmp('fileChoose').setDisabled(false) }, 2000); }); </script> </head> <body> </body> </html>
反过来如果默认Ext.form.field.File可用,当调用disable/setDisabled(true)使file控件不可用时,对应的选择触发按钮并没有变灰色。
解决办法
1)对于默认为禁用的,Ext.form.field.File控件触发选择文件的按钮容器设置为灰色的样式默认为x-btn-disabled,这样我们可以使用getEl获取Ext.form.field.File对应的Ext.dom.Element对象,调用select方法查找触发选择文件按钮容器对象,再移除x-btn-disabled样式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { var d = Ext.create('Ext.form.File', { name: 'files', id: 'fileChoose', disabled: true, buttonText: '<img align="center" src="./images/icons/upload.png"/> upload', buttonConfig: { style: { background: 'transparent',width:'70px' }, border: '0px' }, renderTo:document.body }); setTimeout(function () { Ext.getCmp('fileChoose').setDisabled(false).getEl().select('.x-btn-disabled').removeCls('x-btn-disabled') }, 2000); }); </script> </head> <body> </body> </html>
2)对于动态禁用控件的,可以找到input file元素(样式为“x-form-file-input”),然后再调用up方法找到按钮容器div,给容器添加x-btn-disabled样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../shared/example.css" /> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { var d = Ext.create('Ext.form.File', { name: 'files', id: 'fileChoose', //disabled: true, buttonText: '<img align="center" src="./images/icons/upload.png"/> upload', buttonConfig: { style: { background: 'transparent',width:'70px' }, border: '0px' }, renderTo:document.body }); setTimeout(function () { Ext.getCmp('fileChoose').setDisabled(true).getEl().select('.x-form-file-input').first().up('div').addCls('x-btn-disabled') }, 2000); }); </script> </head> <body> </body> </html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法