Rally App SDK 2.0：Ext.Element方法「不可選擇」沒有這麼規範化

Question

儘管「不可選擇」方法應該禁用文本選擇，但它在IE，至少IE8中不能正常工作。文本光標仍然存在，並允許輸入。

我應該假設它在IE9中也不起作用，因爲Microsoft等效的CSS屬性「-ms-user-select」最近纔在IE10中引入，而IE10並未「正式」發佈，並且也是目前不支持Windows 7.

我還應該問爲什麼webkit版本（「-webkit-user-select」）不包括在內。我知道webkit是khtml的一個分支，它似乎能夠在Chrome中按照預期工作，但我仍然質疑這種遺漏。

/** 
* Disables text selection for this element (normalized across browsers) 
* @return {Ext.Element} this 
*/ 
unselectable : function(){ 
    var me = this; 
    me.dom.unselectable = "on"; 

    me.swallowEvent("selectstart", true); 
    me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;"); 
    me.addCls(Ext.baseCSSPrefix + 'unselectable'); 

    return me; 
} 

是否有一種簡單的方法來修改此代碼，以便在比IE10版本的IE版本中提供正確的功能？

編輯：我有點麻煩得到這個工作。我在onReady調用中插入了以下內容，但在應用程序之前。

(function() { 
    var Ext = window.Ext4 || window.Ext; 

    Ext.override(Ext.dom.Element, { 
     unselectable: function() { 
      var me = this; 
      me.dom.unselectable = "on"; 

      me.swallowEvent("selectstart", true); 

      me.applyStyles([ 
       '-moz-user-select: none;', 
       '-khtml-user-select: none;', 
       '-webkit-touch-callout: none;', 
       '-webkit-user-select: none;', 
       '-ms-user-select: none;', 
       'user-select: none' 
      ].join()); 

      me.addCls(Ext.baseCSSPrefix + 'unselectable'); 

      return me; 
     }, 

     selectable: function() { 
      var me = this; 
      me.dom.unselectable = "off"; 
      // Prevent it from bubles up and enables it to be selectable 
      me.on('selectstart', function(e) { 
       e.stopPropagation(); 
       return true; 
      }); 

      me.applyStyles([ 
       '-moz-user-select: text;', 
       '-khtml-user-select: text;', 
       '-webkit-touch-callout: text;', 
       '-webkit-user-select: text;', 
       '-ms-user-select: text;', 
       'user-select: text' 
      ].join()); 

      me.removeCls(Ext.baseCSSPrefix + 'unselectable'); 
      return me; 
     }, 
    }); 
})(); 

不過，我得到這個錯誤：

Uncaught TypeError: Cannot read property 'Element' of undefined

Answer 1

線me.dom.unselectable = "on";有處理unselectable爲IE9低。這會爲像<div unselectable="on">blah</div>這樣的元素添加一個屬性，這會導致div的文本不再可編輯。這不適合你嗎？

不幸的是，Ext的unselectable和selectable似乎沒有完全處理webkit，您可以通過覆蓋這些方法來解決這個問題。如何覆蓋該方法取決於您使用的是哪個版本的SDK。

爲App SDK 2.0p和2.0p2

這些版本的SDK是建立對ExtJS的4.0.7。在Ext 4.0中，您不能使用Ext.override來修補Ext.Element。所以，你需要更多的手動了一下，改變原型：

Ext.core.Element.prototype.unselectable = function() { 
    var me = this; 
    me.dom.unselectable = "on"; 

    me.swallowEvent("selectstart", true); 

    me.applyStyles([ 
    '-moz-user-select: none;', 
    '-khtml-user-select: none;', 
    '-webkit-touch-callout: none;', 
    '-webkit-user-select: none;', 
    '-ms-user-select: none;', 
    'user-select: none' 
    ].join()); 

    me.addCls(Ext.baseCSSPrefix + 'unselectable'); 

    return me; 
}; 

Ext.core.Element.prototype.selectable = function() { 
    var me = this; 
    me.dom.unselectable = "off"; 
    // Prevent it from bubles up and enables it to be selectable 
    me.on('selectstart', function(e) { 
     e.stopPropagation(); 
     return true; 
    }); 

    me.applyStyles([ 
    '-moz-user-select: text;', 
    '-khtml-user-select: text;', 
    '-webkit-touch-callout: text;', 
    '-webkit-user-select: text;', 
    '-ms-user-select: text;', 
    'user-select: text' 
    ].join()); 

    me.removeCls(Ext.baseCSSPrefix + 'unselectable'); 
    return me; 
}; 

你應該這樣做，因爲內部Rally.onReady()

爲App SDK 2.0p3和第一件事情上

應用程序SDK爲2.0p3和前鋒建立對抗ExtJS 4.1。他們改變了Ext.Element的支持Ext.override，所以在這裏我們可以做一個稍微清潔的解決方案（這基本上就是我最初發布）：

Ext.override(Ext.dom.Element, { 
    unselectable: function() { 
     var me = this; 
     me.dom.unselectable = "on"; 

     me.swallowEvent("selectstart", true); 

     me.applyStyles([ 
      '-moz-user-select: none;', 
      '-khtml-user-select: none;', 
      '-webkit-touch-callout: none;', 
      '-webkit-user-select: none;', 
      '-ms-user-select: none;', 
      'user-select: none' 
     ].join()); 

     me.addCls(Ext.baseCSSPrefix + 'unselectable'); 

     return me; 
    }, 

    selectable: function() { 
     var me = this; 
     me.dom.unselectable = "off"; 
     // Prevent it from bubles up and enables it to be selectable 
     me.on('selectstart', function(e) { 
      e.stopPropagation(); 
      return true; 
     }); 

     me.applyStyles([ 
      '-moz-user-select: text;', 
      '-khtml-user-select: text;', 
      '-webkit-touch-callout: text;', 
      '-webkit-user-select: text;', 
      '-ms-user-select: text;', 
      'user-select: text' 
     ].join()); 

     me.removeCls(Ext.baseCSSPrefix + 'unselectable'); 
     return me; 
    } 
}); 

在這兩種情況下，只要稍微調整的功能，也爲webkit的樣式添加，IE等