EXTJS7實現(xiàn)點擊拖拉選擇文本
本文實例為大家分享了EXTJS7實現(xiàn)點擊拖拉選擇文本的具體代碼,供大家參考,具體內(nèi)容如下
默認(rèn)情況下,用戶無法通過點擊拖拉選擇界面上的文本
解決方案
Ext.Component組件可以使用userSelectable配置項,設(shè)置為‘text',即可實現(xiàn)此組件中文本的點選 注意:如果設(shè)置為true,等效于設(shè)置樣式 user-select: auto; ,將根據(jù)瀏覽器默認(rèn)屬性進(jìn)行選擇 { xtype: 'grid', userSelectable: 'text' }
也可以傳入對象設(shè)置子元素的樣式
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 各屬性值對應(yīng)的樣式類 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') { // 如果傳入為布爾或字符串,直接添加對應(yīng)的樣式類 el.addCls(map[newSelectable]); } else { // 如果傳入的是對象,則根據(jù)對象屬性分別給子元素添加樣式類 for (name in newSelectable) { childEl = me[name]; //<debug> if (!childEl || !childEl.isElement) { Ext.raise('Element not found: "' + name + '"'); } //</debug> childEl.addCls(map[newSelectable[name]]); } } }, });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
多個表單中如何獲得這個文件上傳的網(wǎng)址實現(xiàn)js代碼
假設(shè)一個網(wǎng)頁里有多個表單,其中一個表單里有文件上傳,問題是如何獲得這個文件上傳的網(wǎng)址呢,接下來為大家介紹下實現(xiàn)的js代碼,感興趣的朋友可以參考下哈,希望可以幫助到你2013-03-03js監(jiān)聽元素是否出現(xiàn)在可視區(qū)域詳解(IntersectionObserver)
這篇文章主要給大家介紹了關(guān)于js監(jiān)聽元素是否出現(xiàn)在可視區(qū)域(IntersectionObserver)的相關(guān)資料, IntersectionObserver是一個JavaScript API,用于監(jiān)測一個元素與其父元素或視窗的交叉狀態(tài),需要的朋友可以參考下2024-06-06javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下2016-12-128 行 Node.js 代碼實現(xiàn)代理服務(wù)器
JavaScript 前后端通吃,在全棧開發(fā)領(lǐng)域具有獨特的優(yōu)勢。今天就來看看作為服務(wù)端語言的 JavaScript,完成一個簡單的代理服務(wù)器功能是多么容易。2016-12-12JavaScript實現(xiàn)一個簡易的計算器實例代碼
這篇文章主要介紹了JavaScript實現(xiàn)一個簡易的計算器實例代碼,具有很好的參考價值,希望對大家有所幫助,一起跟隨小編過來看看吧2018-05-05