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

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:'이름'
}]
// 기타 코드
}