啓用ExtJS的

我想啓用或EXTJS啓用ExtJS的

dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'top', 
     items: [{ 
      xtype: 'radiofield', 
      id: 'all', 
      name: 'show', 
      boxLabel: 'All', 
      checked: true, 
      inputValue: 'all' 
     }, { 
      xtype: 'radiofield', 
      id: 'online', 
      name: 'show', 
      boxLabel: 'Online', 
      inputValue: 'online' 
     }, { 
      xtype: 'radiofield', 
      id: 'offline', 
      name: 'show', 
      boxLabel: 'Offline', 
      inputValue: 'offline' 
     }, { 
      xtype: 'checkboxfield', 
      id: 'cb1', 
      boxLabel: 'Sometimes', 
      checked: true, 
      inputValue: 'sometimes' 
     }, { 
      xtype: 'checkboxfield', 
      id: 'cb2', 
      boxLabel: 'Always', 
      checked: true, 
      inputValue: 'always' 
     }], 
     listeners: { 
      change: function (field, newValue, oldValue) { 
       var value = newValue.show; 
       if (value == 'all') { 
        var cb1 = Ext.getCmp('cb1'); 
        var cb2 = Ext.getCmp('cb2'); 

        cb1.disable(); 
        cb2.disable(); 
       } 
       if (value == 'online') { 
        var cb1 = Ext.getCmp('cb1'); 
        var cb2 = Ext.getCmp('cb2'); 

        cb1.disable(); 
        cb2.disable(); 
       } 
       if (value == 'offline') { 

        var cb1 = Ext.getCmp('cb1'); 
        var cb2 = Ext.getCmp('cb2'); 

        cb1.enable(); 
        cb2.enable(); 

       } 

      } 
     } 
    }]

禁用複選框，我怎樣才能使這些複選框/禁用複選框？它們應該在用戶選擇離線選項時啓用，並在用戶選擇其他選項時禁用。

感謝您的幫助！

來源

2012-01-12 Rick Weller

幾個錯誤他們的id直接，你可以用Ext.getCmp（'id'）來調用它們。

上述示例中的您的監聽器附加到工具欄，該工具欄沒有change事件。您需要將其連接到收音機。實際上，如果你只希望當'離線'收音機被填滿時啓用複選框，那麼我會建議在離線收音機中添加一個handler配置文件，以啓用或禁用複選框，具體取決於此收音機的值改爲。例如，此工作原理：

dockedItems: [{ 
    xtype: 'toolbar', 
    dock: 'top', 
    items: [{ 
     xtype: 'radiofield', 
     id: 'all', 
     name: 'show', 
     boxLabel: 'All', 
     checked: true, 
    }, { 
     xtype: 'radiofield', 
     id: 'online', 
     name: 'show', 
     boxLabel: 'Online', 
     inputValue: 'online', 
    }, { 
     xtype: 'radiofield', 
     id: 'offline', 
     name: 'show', 
     boxLabel: 'Offline', 
     inputValue: 'offline', 
     handler: function(field, value) { 
      if (value) { 
       Ext.getCmp('cb1').enable(); 
       Ext.getCmp('cb2').enable(); 
      } else { 
       Ext.getCmp('cb1').disable(); 
       Ext.getCmp('cb2').disable();   
      }    
     } 
    }, { 
     xtype: 'checkboxfield', 
     id: 'cb1', 
     boxLabel: 'Sometimes', 
     checked: true, 
     inputValue: 'sometimes', 
     disabled: true 
    }, { 
     xtype: 'checkboxfield', 
     id: 'cb2', 
     boxLabel: 'Always', 
     checked: true, 
     inputValue: 'always', 
     disabled: true 
    }] 
}],

我建議使用handler配置（如上所述），而不是具有在change事件的監聽器。

如果添加change監聽它將覆蓋使用ExtJS的內部以取消同名組中的其他無線電領域默認change處理程序。例如。在'離線'收音機上有一個change聽衆，當您選擇它時，'全部'將保持選中狀態。

換句話說......只是複製上面的例子，一切都會好的。

來源

2012-01-12 17:49:38 Geronimo

感謝Geronimo！ – 2012-01-12 19:39:29

當我爲複選框設置了checked：true'和disabled：true'並提交表單時，服務器沒有將複選框參數值作爲'on'接收。它在後面的參數中被省略了。我如何使用禁用和選中的值作爲複選框並將其作爲參數提交？ – Guus 2014-04-22 16:07:22

你可以做你需要設置爲checkboxs ID來看看他們在這個例子中，以下幾點：

複選框成分不能被稱爲是：我注意到

if (value == 'offline') { 
      var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids 
      var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids 

cb1.enable(); 
cb2.enable(); 

online 
    } 
else { 
     var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids 
      var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids 

cb1.disable(); 
cb2.disable(); 
}

來源

2012-01-12 10:47:01 codemonkeyww

哈哈我想我做錯了什麼。我的單選按鈕被禁用，我的複選框默認啓用:) – 2012-01-12 10:59:45

它適合你嗎？ – codemonkeyww 2012-01-12 11:46:27

尚未...可能是我的聽衆有問題 – 2012-01-12 11:53:39

在ExtJS中啓用/禁用複選框的標準方法是在創建組件時設置配置參數disable: true或disable: false。

但是至於ExtJS 4.2 - 它有一些不便。禁用或設置複選框以只讀使組件看起來非常透明。在經典的框架設計和其他一些框架設計中，如果它被禁用或設置爲只讀，您甚至不會在框中看到勾號。就好像它是空的。

我們發現的最佳解決方案是爲這種類型的所有ExtJS元素創建項目全局css類。它轉移到標準框架主題圖像更好的刻度線，並增加了一些不透明度：

.x-form-readonly .x-form-checkbox { 
    background-image: url(/extjs/resources/ext-theme-classic/images/form/checkbox.gif); 
    opacity: 0.4; 
}

來源

2014-08-19 10:08:24 Zon

回答

相關問題