在
ExtJS 中自定义一个
textarea 组件并显示行号，可以通过下面两种方式实现：
1. 使用 Ext.ux.
form.field.CodeMirror 组件
使用 Ext.ux.
form.field.CodeMirror 组件可以非常方便地实现
textarea 组件显示行号的功能。该组件基于 CodeMirror 编辑器实现，支持语法高亮、自动补全等功能。
示例代码：
```
Ext.define('MyApp.view.My
TextArea', {
extend: 'Ext.ux.
form.field.CodeMirror',
alias: 'widget.my
textarea',
initComponent: function() {
this.callParent();
this.editor.setOption('lineNumbers', true);
}
});
```
在组件的 `initComponent` 方法
中，设置 `lineNumbers` 选项为 `true` 即可显示行号。
2. 使用 Ext.
form.field.
TextArea 组件
如果不想使用 CodeMirror 编辑器，也可以通过自定义渲染函数来实现
textarea 组件显示行号的功能。具体实现方式如下：
示例代码：
```
Ext.define('MyApp.view.My
TextArea', {
extend: 'Ext.
form.field.
TextArea',
alias: 'widget.my
textarea',
afterRender: function() {
this.callParent();
this.mon(this.inputEl, 'scroll', this.onScroll, this);
this.mon(this.inputEl, 'resize', this.onResize, this);
this.mon(this.inputEl, 'keydown', this.onKeyDown, this);
this.mon(this.inputEl, 'keyup', this.onKeyUp, this);
this.mon(this.inputEl, 'mousedown', this.onMouseDown, this);
this.mon(this.inputEl, 'mouseup', this.onMouseUp, this);
this.mon(this.inputEl, 'dblclick', this.onDblClick, this);
this.mon(this.inputEl, 'contextmenu', this.onContextMenu, this);
this.updateLineNumber();
},
onScroll: function() {
this.updateLineNumber();
},
onResize: function() {
this.updateLineNumber();
},
onKeyDown: function() {
this.updateLineNumber();
},
onKeyUp: function() {
this.updateLineNumber();
},
onMouseDown: function() {
this.updateLineNumber();
},
onMouseUp: function() {
this.updateLineNumber();
},
onDblClick: function() {
this.updateLineNumber();
},
onContextMenu: function() {
this.updateLineNumber();
},
updateLineNumber: function() {
var text = this.getValue();
var lineNumber = text.split(/\r?\n/).length;
var lineNumberHtml = '';
for (var i = 1; i <= lineNumber; i++) {
lineNumberHtml += i + '<br/>';
}
this.getEl().down('.line-number').update(lineNumberHtml);
},
getSubTplMarkup: function(values) {
return this.callParent([Ext.apply({}, values, {
inputCls: 'x-
form-
textarea',
value: values.value && Ext.util.
Format.htmlEncode(values.value),
lineNumber: true
})]);
},
getSubTplData: function(fieldData) {
var data = this.callParent([fieldData]);
if (fieldData.lineNumber) {
data.inputWrapCls = (data.inputWrapCls || '') + ' x-
form-
textarea-with-number';
data.afterInputEl = '<div class="line-number"></div>';
}
return data;
}
});
```
在组件的 `afterRender` 方法
中，绑定 `scroll`、`resize`、`keydown`、`keyup`、`mousedown`、`mouseup`、`dblclick` 和 `contextmenu` 事件，当组件内容发生变化时更新行号。在 `updateLineNumber` 方法
中，计算组件内容的行数，并生成对应的 HTML 代码插入到组件 DOM
中。在 `getSubTplData` 和 `getSubTplMarkup` 方法
中，通过添加 CSS 类和 HTML 代码实现行号的显示。
1756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
