文件字段按鈕未在Extjs中啓用

Question

Extjs中的文件字段類型無法正常工作。最初，我將在我的代碼中禁用此文件字段，並且當我啓用此字段時，瀏覽按鈕（用於選擇文件的按鈕）不啓用，但按鈕功能正常工作。 這個問題有什麼解決方法。請幫我解決一下這個。

Ext.widget('panel', { 
title: 'Test panel', 
width: 400, 
height: 200, 
renderTo: 'codeoutput', 
layout: 'vbox', 
items: [ 

{ 
    xtype: 'container', 
    layout: 'hbox', 
    items: [{ 
     xtype: 'radiofield', 
     fieldLabel: 'PAN Number *', 
     margin: "20 0 0 0", 
     name: 'rb', 
     id: 'radioPan', 
     inputValue: '1', 
     checked: true, 
     listeners: { 
      change: function (cb, nv, ov) { 
       if (nv) { 
        Ext.getCmp('AttachData').disable(); 
        Ext.getCmp('PanData').enable(); 
       } 
      } 
     } 
    }, { 
     xtype: 'splitter' 
    }, { 
     xtype: 'textfield', 
     margin: "20 0 0 0", 
     id: 'PanData', 
     allowBlank: false, 
     disabled: false 
    }] 
}, 


{ 
    xtype: 'container', 
    html: '[ OR ]', 
    margin: "10 0 0 175" 
}, 


{ 
    xtype: 'container', 
    layout: 'hbox', 
    items: [{ 
     xtype: 'radiofield', 
     fieldLabel: 'Owner\'s Declaration *', 
     margin: "10 0 0 0", 
     name: 'rb', 
     id: 'radioAttach', 
     inputValue: '2', 
     checked: false, 
     listeners: { 
      change: function (cb, nv, ov) { 
       if (nv) { 
        Ext.getCmp('PanData').disable(); 
        Ext.getCmp('AttachData').enable(); 
       } 
      } 
     } 
    }, { 
     xtype: 'splitter' 
    }, { 
     xtype: 'filefield', 
     id: 'AttachData', 
     name: 'file_path', 
     margin: "15 0 0 0", 
     buttonText: 'Browse', 
     disabled: true 
    }] 
}] 
}); 

我選擇的文件場，但瀏覽按鈕被禁用

Answer 1

，似乎是在a bug 4.1 ExtJS的。

此版本的ExtJS 4.1.3

我們可以通過刪除這些'x-disabled x-btn-disabled x-item-disabled x-btn-default-small-disabled' CSS類，而使得現場，並再次將這些類同時禁用它有一種變通方法解決。 所以添加以下行同時禁用領域：

Ext.select(".x-btn",Ext.getCmp('AttachData')).addCls('x-disabled x-btn-disabled x-item-disabled x-btn-default-small-disabled'); 

&添加以下代碼行，同時使得現場：

Ext.select(".x-btn",Ext.getCmp('AttachData')).removeCls('x-disabled x-btn-disabled x-item-disabled x-btn-default-small-disabled'); 

全碼：

Ext.widget('panel', { 
    title: 'Test panel', 
    width: 400, 
    height: 200, 
    renderTo: 'codeoutput', 
    layout: 'vbox', 
    items: [ 

    { 
     xtype: 'container', 
     layout: 'hbox', 
     items: [{ 
      xtype: 'radiofield', 
      fieldLabel: 'PAN Number *', 
      margin: "20 0 0 0", 
      name: 'rb', 
      id: 'radioPan', 
      inputValue: '1', 
      checked: true, 
      listeners: { 
       change: function (cb, nv, ov) { 
        if (nv) { 
         Ext.getCmp('AttachData').disable(); 
         Ext.getCmp('PanData').enable(); 
         Ext.select(".x-btn",Ext.getCmp('AttachData')).addCls('x-disabled x-btn-disabled x-item-disabled x-btn-default-small-disabled'); 
        } 
       } 
      } 
     }, { 
      xtype: 'splitter' 
     }, { 
      xtype: 'textfield', 
      margin: "20 0 0 0", 
      id: 'PanData', 
      allowBlank: false, 
      disabled: false 
     }] 
    }, 


    { 
     xtype: 'container', 
     html: '[ OR ]', 
     margin: "10 0 0 175" 
    }, 


    { 
     xtype: 'container', 
     layout: 'hbox', 
     items: [{ 
      xtype: 'radiofield', 
      fieldLabel: 'Owner\'s Declaration *', 
      margin: "10 0 0 0", 
      name: 'rb', 
      id: 'radioAttach', 
      inputValue: '2', 
      checked: false, 
      listeners: { 
       change: function (cb, nv, ov) { 
        if (nv) { 
         Ext.getCmp('PanData').disable(); 
         Ext.getCmp('AttachData').enable(); 
         Ext.select(".x-btn",Ext.getCmp('AttachData')).removeCls('x-disabled x-btn-disabled x-item-disabled x-btn-default-small-disabled'); 

        } 
       } 
      } 
     }, { 
      xtype: 'splitter' 
     }, { 
      xtype: 'filefield', 
      id: 'AttachData', 
      name: 'file_path', 
      margin: "15 0 0 0", 
      buttonText: 'Browse', 
      disabled: true 
     }] 
    }] 
    });