Automatically scroll textarea to last line?Extjs自动转向文本框textarea最后一行

博客作者在网上未找到Extjs中textarea滚动相关案例,在官网论坛发现讨论并转载。给出两种方法,代码可拷贝到fiddle中使用,希望能给读者带来启发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

网上找了好久并没有找到相关案例,在官网论坛上看到一个讨论。可将代码拷贝到fiddle中使用。

转载于官网论坛https://www.sencha.com/forum/showthread.php?299025#top

方法一:

Ext.define('logAreaController', {
  extend: 'Ext.app.ViewController',
  alias: 'controller.log',


  updateLog: function(data) {
      // simulated data
      data = 'Button was clicked';
      var vm = this.getViewModel();
      vm.setData({
          logText: vm.data.logText + data + '\n'
     });
        
     //Get the text area component, the textarea input element and
    //dom scroll height
     var txtArea = Ext.ComponentQuery.query('#myTextArea')[0],
           inputElDom = txtArea.inputEl.dom,
           scrollHeight = inputElDom.scrollHeight;
        
        //Set the input element dom scroll top to the height to force 
        //it to scroll to the bottom
        inputElDom.scrollTop = scrollHeight;
    }
});


Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.window.Window', {
            controller: 'log',
            viewModel: {
                data: {
                    logText: ""
                }
            },
            items: [{
                xtype: 'textarea',
                itemId: 'myTextArea',
                height: 100,
                width: 200,                
                bind: {
                    value: '{logText}'
                }
            }, {
                xtype: 'button',
                text: 'click me',
                handler: 'updateLog'
            }]
        }).show();
    }
});

方法二:

Ext.define('logAreaController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.log',

    updateLog: function(data) {
        // simulated data
        data = "Button was clicked";
        var log = this.lookupReference('LogText');
        log.update({logText: data});
        log.getTargetEl().scroll('b', 100000, true);
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.window.Window', {
            controller: 'log',
            items: [{
                xtype: 'panel',
                reference: 'LogText',
                scrollable: true,
                bodyPadding: 5,
                tpl: '<p style="margin: 3px 0 0 0">{logText}</p>',
                tplWriteMode: 'append',
                height: 100,
                width: 200,
            }, {
                xtype: 'button',
                text: 'click me',
                handler: 'updateLog'
            }]
        }).show();
    }
});

希望有所启发。

### 如何在Markdown文档中实现文本框自动换行功能 在Markdown环境中,通常不会直接提供类似于HTML或前端框架中的交互组件(如文本框)。然而,如果需要通过嵌入HTML和CSS来创建具有自动换行功能的文本框,则可以通过以下方式实现。 #### 使用HTML与CSS实现自动换行的文本框 为了使文本框支持自动换行,可以利用`<textarea>`标签并结合CSS样式控制其行为。以下是具体实现: ```html <textarea style="width: 300px; height: 100px; word-wrap: break-word;"></textarea> ``` 上述代码片段定义了一个宽度为300像素、高度为100像素的多行文本输入框,并启用了单词折行功能[^1]。属性`word-wrap: break-word;`确保当文字超出容器范围时会自动换行。 #### 隐藏光标的解决方案 对于隐藏光标的需求,可以在相同的`<textarea>`元素上应用额外的CSS规则: ```css textarea { caret-color: transparent; } ``` 此段CSS将光标颜色设为透明,从而达到视觉上的“隐藏”效果。需要注意的是,这种方法仅改变外观而不影响实际操作能力;若希望完全禁用编辑功能,则应考虑使用`readonly`或`disabled`属性替代。 #### 完整示例 综合以上两点,下面给出一个完整的例子展示如何在一个简单的网页里加入具备自动换行特性的不可见光标文本区域: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Auto Wrap Textarea</title> <style> textarea { width: 400px; height: 150px; resize: none; overflow-y: hidden; word-wrap: break-word; caret-color: transparent; /* Hide cursor */ } </style> </head> <body> <h3>Example of Auto-Wrapping Text Area:</h3> <p>Type something long enough to see it wraps automatically without showing the cursor.</p> <textarea></textarea> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值