Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法

  Ext4+ Ext.form.field.File控件配置disabled:true,当调用转为setDisabled(false)或者enable()方法后使file控件可用,但是file控件右边的选择按钮还是灰色的。这个视乎是ext4的bug,此时fileupload控件可用,但是触发选择文件的按钮还是灰色的,并没有移除触发选择文件按钮的不可用样式。Ext4+ Ext.form.field.File配置disabled:true转为false后触发按钮还是灰色解决办法

<!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后触发按钮还是灰色解决办法
评论(0)Web开发网
阅读(866)喜欢(0)不喜欢(0)extjs