Кнопка File-field не включена в 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 в ExtJS 4.1.

Это решается в версии 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 
     }] 
    }] 
    });