extjs中，自定义textarea组件，可以显示每行的行号

在 ExtJS 中自定义一个 textarea 组件并显示行号，可以通过下面两种方式实现：

1. 使用 Ext.ux.form.field.CodeMirror 组件

使用 Ext.ux.form.field.CodeMirror 组件可以非常方便地实现 textarea 组件显示行号的功能。该组件基于 CodeMirror 编辑器实现，支持语法高亮、自动补全等功能。

示例代码：

Ext.define('MyApp.view.MyTextArea', {
    extend: 'Ext.ux.form.field.CodeMirror',
    alias: 'widget.mytextarea',
    
    initComponent: function() {
        this.callParent();
        this.editor.setOption('lineNumbers', true);
    }
});

在组件的 `initComponent` 方法中，设置 `lineNumbers` 选项为 `true` 即可显示行号。

2. 使用 Ext.form.field.TextArea 组件

如果不想使用 CodeMirror 编辑器，也可以通过自定义渲染函数来实现 textarea 组件显示行号的功能。具体实现方式如下：

示例代码：

Ext.define('MyApp.view.MyTextArea', {
    extend: 'Ext.form.field.TextArea',
    alias: 'widget.mytextarea',
    
    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 代码实现行号的显示。