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

最新推荐文章于 2022-10-19 18:23:48 发布

转载最新推荐文章于 2022-10-19 18:23:48 发布 · 793 阅读

文章标签：

#Extjs #textarea #scroll

extjs 专栏收录该内容

2 篇文章

订阅专栏

博客作者在网上未找到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();
    }
});

希望有所启发。