> 웹 프론트엔드 > JS 튜토리얼 > extjs 테이블 텍스트의 특정 구현으로 선택 복사 가능 function_extjs

extjs 테이블 텍스트의 특정 구현으로 선택 복사 가능 function_extjs

WBOY
풀어 주다: 2016-05-16 17:20:12
원래의
1397명이 탐색했습니다.

extjs는 사용하기 편리한 테이블 구성 요소 그리드를 제공하지만 기본적으로 테이블의 텍스트는 선택할 수 없으며 당연히 복사할 수도 없습니다.

텍스트를 선택하고 복사해야 하는 경우도 매우 흔하므로 이 문제를 직접 해결하고 extjs의 그리드 텍스트 선택 및 복사 기능을 구현해야 합니다.

이 기사에 나열된 코드 조각은 모두 현재 ext 4.0.2a 버전에 속하므로 다른 버전은 테스트되지 않았으므로 귀하의 재량에 따라 고려하십시오.

먼저 스타일을 사용자 정의하여 기본 CSS 스타일을 재정의합니다.

코드 복사 코드는 다음과 같습니다.



마우스가 텍스트를 선택하지 못하게 하는 이유는 다음과 같습니다. 선택 불가

코드 복사 코드는 다음과 같습니다.
/**
* 테이블 클래스 재정의
*/
Ext.override(Ext .view.Table, {
afterRender : function() {
var me = this;
me.callParent();
me.mon(me.el , {
scroll : me .fireBodyScroll,
scope : me
})
if (!me.featuresMC && (me.featuresMC.findIndex('ftype', 'unselectable') > = 0)) {
me.el.unselectable();
}
me.attachEventsForFeatures()
}
}); 텍스트 선택 기능을 활성화하는 기능, 선택 불가능한 스타일을 교체하여 취소하고 x 선택 가능한 스타일 추가



코드 복사
코드는 다음과 같습니다: /*** 선택 기능 정의
*/
Ext.define('Myext.grid.SelectFeature', {
extend : 'Ext.grid.feature .Feature',
alias : 'feature.selectable',
mutateMetaRowTpl : function(metaRowTpl) {
var i, ln = MetaRowTpl.length
for (i = 0; i < ln ; i ) {
tpl = MetaRowTpl[i] ;
tpl = tpl.replace(/x-grid-row/, 'x-grid-row x-selectable')
tpl. 교체(/x-grid-cell-inner x-unselectable /g, 'x-grid-cell-inner')
tpl = tpl.replace(/unselectable="on"/g, ''); 🎜>metaRowTpl[i] = tpl;
} ;
}
});


이제 selectFeature를 선언할 수 있습니다

var selectFeature = Ext. create('Myext.grid.SelectFeature');
텍스트 선택을 활성화해야 하는 테이블의 경우




생성할 때 이 기능을 추가하세요.
코드는 다음과 같습니다. Ext.create('Ext.grid.Panel', { title : 'grid example', store : GridStore, //
width : 600,
height : 300,
features : [selectFeature],
columns : [{
text:'name',
이전에 정의 dataIndex:'이름'
}]
// 기타 코드
}

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿