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

