EXTJS7实现点击拖拉选择文本
本文实例为大家分享了EXTJS7实现点击拖拉选择文本的具体代码，供大家参考，具体内容如下
默认情况下，用户无法通过点击拖拉选择界面上的文本
解决方案
Ext.Component组件可以使用userSelectable配置项，设置为‘text'，即可实现此组件中文本的点选
注意：如果设置为true，等效于设置样式user-select:auto;，将根据浏览器默认属性进行选择
{
xtype:'grid',
userSelectable:'text'
}
也可以传入对象设置子元素的样式
userSelectable:{
element:true,//allowtheelementtobeuserselectable
bodyElement:true//allowthecomponent'sbodyelementtobeuserselectable
}
非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){
varme=this,
map=me.userSelectableClsMap,
el=me.el,
name,childEl;
if(typeofoldSelectable==='boolean'||typeofoldSelectable==='string'){
el.removeCls(map[oldSelectable]);
}
else{
for(nameinoldSelectable){
childEl=me[name];
//
if(!childEl||!childEl.isElement){
Ext.raise('Elementnotfound:"'+name+'"');
}
//
childEl.removeCls(map[oldSelectable[name]]);
}
}
if(typeofnewSelectable==='boolean'||typeofnewSelectable==='string'){
//如果传入为布尔或字符串，直接添加对应的样式类
el.addCls(map[newSelectable]);
}
else{
//如果传入的是对象，则根据对象属性分别给子元素添加样式类
for(nameinnewSelectable){
childEl=me[name];
//
if(!childEl||!childEl.isElement){
Ext.raise('Elementnotfound:"'+name+'"');
}
//
childEl.addCls(map[newSelectable[name]]);
}
}
},
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。