extjs中，为textarea组件添加功能，可以显示每行的行号

可以使用 Ext JS 的 `textareafield` 组件，并结合 CSS 样式实现每行显示行号的功能。具体实现步骤如下：

1. 在 CSS 中设置 `textarea` 的 `line-height` 为每行的高度，可以根据需要设置行高度。

.x-form-textarea {
  line-height: 20px; /* 设置每行的高度为20px */
}

2. 在 `textareafield` 的 `listeners` 中添加 `change` 事件，监听文本框内容的变化。

listeners: {
  change: function(textarea, newValue, oldValue, eOpts) {
    // 处理文本框内容变化时的逻辑
  }
}

3. 在 `change` 事件处理函数中，获取 `textarea` 中的文本内容，并根据换行符 `\n` 分割成行数组。然后使用 `Ext.DomHelper` 动态创建行号的 `div` 元素，并将其插入到每行文本的前面。

change: function(textarea, newValue, oldValue, eOpts) {
  // 获取 textarea 内容并分割成行数组
  var lines = newValue.split('\n');

  // 获取 textarea 对应的 dom 元素
  var textareaEl = textarea.getEl();

  // 遍历每行文本，插入行号
  for (var i = 0; i < lines.length; i++) {
    // 创建行号 div 元素
    var lineNumberEl = Ext.DomHelper.createDom({
      tag: 'div',
      html: (i + 1).toString(), // 行号从 1 开始
      cls: 'x-form-textarea-line-number'
    });

    // 将行号 div 元素插入到每行文本的前面
    Ext.DomHelper.insertBefore(textareaEl, lineNumberEl, textareaEl.dom.childNodes[i]);
  }
}

4. 在 CSS 中设置行号的样式，可以根据需要设置字体、颜色等样式。

.x-form-textarea-line-number {
  float: left; /* 行号 div 元素左浮动 */
  width: 20px; /* 设置行号 div 元素宽度 */
  margin-right: 5px; /* 行号 div 元素和文本之间的间距 */
  color: #999; /* 设置行号颜色 */
  font-size: 12px; /* 设置行号字体大小 */
  text-align: right; /* 行号文本右对齐 */
}

完整代码如下：

Ext.create('Ext.form.Panel', {
  title: 'TextArea with Line Numbers',
  width: 400,
  bodyPadding: 10,
  renderTo: Ext.getBody(),
  items: [{
    xtype: 'textareafield',
    name: 'message',
    fieldLabel: 'Message',
    listeners: {
      change: function(textarea, newValue, oldValue, eOpts) {
        // 获取 textarea 内容并分割成行数组
        var lines = newValue.split('\n');

        // 获取 textarea 对应的 dom 元素
        var textareaEl = textarea.getEl();

        // 遍历每行文本，插入行号
        for (var i = 0; i < lines.length; i++) {
          // 创建行号 div 元素
          var lineNumberEl = Ext.DomHelper.createDom({
            tag: 'div',
            html: (i + 1).toString(), // 行号从 1 开始
            cls: 'x-form-textarea-line-number'
          });

          // 将行号 div 元素插入到每行文本的前面
          Ext.DomHelper.insertBefore(textareaEl, lineNumberEl, textareaEl.dom.childNodes[i]);
        }
      }
    }
  }]
});

效果如下图所示：