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 , {
スクロール : me .fireBodyScroll,
スコープ : me
});
if (!me.featuresMC && (me.featuresMC.findIndex('ftype', 'unselectable') > = 0)) {
me.el.unselectable();
}
me.attachEventsFor features()
}
});テキスト選択を可能にする機能 選択不可のスタイルを置き換えて解除し、×で選択可能なスタイルを追加

コードをコピー

コードは次のとおりです: /*** 選択機能を定義します

*/

Ext.define('Myext.grid.SelectFeature', {
extend : 'Ext.grid.feature .Feature',
alias : 'feature.selectable ',
mutateMetaRowTpl : function(metaRowTpl) {
var i, ln =
for (i = 0; i tpl = metaRowTpl[i] ;
tpl = tpl.replace(/x-grid-row/, 'x-grid-row x-selectable'); replace(/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:'name'
}]
// その他のコード
}