EXTJS7實現點選拖拉選擇文字
阿新 • • 發佈:2020-12-21
本文例項為大家分享了EXTJS7實現點選拖拉選擇文字的具體程式碼,供大家參考,具體內容如下
預設情況下,使用者無法通過點選拖拉選擇介面上的文字
解決方案
Ext.Component元件可以使用userSelectable配置項,設定為‘text',即可實現此元件中文字的點選 注意:如果設定為true,等效於設定樣式 user-select: auto; ,將根據瀏覽器預設屬性進行選擇 { xtype: 'grid',userSelectable: 'text' }
也可以傳入物件設定子元素的樣式
userSelectable: { element: true,// allow the element to be user selectable bodyElement: true // allow the component's body element to be user selectable }
非Ext.Component元件可以使用userCls配置項,新增 Ext.baseCSSPrefix + ‘user-selectable-text' 樣式類
{ xtype: 'grid',columns: [{ cell: { userCls: Ext.baseCSSPrefix + 'user-selectable-text' } }] }
原始碼解析
Ext.define('Ext.Component',{ // userSelectable 各屬性值對應的樣式類 userSelectableClsMap: { true: Ext.baseCSSPrefix + 'user-selectable-auto',false: Ext.baseCSSPrefix + 'user-selectable-none',all: Ext.baseCSSPrefix + 'user-selectable-all',auto: Ext.baseCSSPrefix + 'user-selectable-auto',text: Ext.baseCSSPrefix + 'user-selectable-text',none: Ext.baseCSSPrefix + 'user-selectable-none' },updateUserSelectable: function(newSelectable,oldSelectable) { var me = this,map = me.userSelectableClsMap,el = me.el,name,childEl; if (typeof oldSelectable === 'boolean' || typeof oldSelectable === 'string') { el.removeCls(map[oldSelectable]); } else { for (name in oldSelectable) { childEl = me[name]; //<debug> if (!childEl || !childEl.isElement) { Ext.raise('Element not found: "' + name + '"'); } //</debug> childEl.removeCls(map[oldSelectable[name]]); } } if (typeof newSelectable === 'boolean' || typeof newSelectable === 'string') { // 如果傳入為布林或字串,直接新增對應的樣式類 el.addCls(map[newSelectable]); } else { // 如果傳入的是物件,則根據物件屬性分別給子元素新增樣式類 for (name in newSelectable) { childEl = me[name]; //<debug> if (!childEl || !childEl.isElement) { Ext.raise('Element not found: "' + name + '"'); } //</debug> childEl.addCls(map[newSelectable[name]]); } } },});
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。