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后触发按钮还是灰色解决办法