EXTJS7實現(xiàn)點擊拖拉選擇文本
本文實例為大家分享了EXTJS7實現(xiàn)點擊拖拉選擇文本的具體代碼,供大家參考,具體內(nèi)容如下
默認情況下,用戶無法通過點擊拖拉選擇界面上的文本
解決方案
Ext.Component組件可以使用userSelectable配置項,設(shè)置為‘text',即可實現(xiàn)此組件中文本的點選
注意:如果設(shè)置為true,等效于設(shè)置樣式 user-select: auto; ,將根據(jù)瀏覽器默認屬性進行選擇
{
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-03
js監(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-06
javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實例形式較為詳細的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下2016-12-12
8 行 Node.js 代碼實現(xiàn)代理服務(wù)器
JavaScript 前后端通吃,在全棧開發(fā)領(lǐng)域具有獨特的優(yōu)勢。今天就來看看作為服務(wù)端語言的 JavaScript,完成一個簡單的代理服務(wù)器功能是多么容易。2016-12-12
JavaScript實現(xiàn)一個簡易的計算器實例代碼
這篇文章主要介紹了JavaScript實現(xiàn)一個簡易的計算器實例代碼,具有很好的參考價值,希望對大家有所幫助,一起跟隨小編過來看看吧2018-05-05

