Question

TextArea滚动设备无法正常工作

在任何设备上，当使用文字区域时，无法滚动它...

但在浏览器中可以正常工作..

设备

中的

Any way to scoll the text area / atleast to auto resize.

{
            xtype: 'fieldset',
            title: 'TExt aRea',

            defaults: {
                labelWidth: '36%'
            },
            items: [{
                xtype: 'textareafield',
                label: 'textareafield',

                clearIcon: true
            },
            ]
}

Answer 1

我正在处理它的方法是在textareafield上监听keyup事件，并在事件处理程序中，为textarea设置足够的高度以显示所有内容。然后滚动由容器的滚动器处理。

以下是一个例子：

Ext.define('ExamplePanel', {
    extend: 'Ext.Panel',
    config: {
        fullscreen: true,
        scrollable: true,
        items: {
            xtype: 'textareafield',
            itemId: 'textarea',
            clearIcon: false
        }
    },

    initialize: function() {
        this.down('#textarea').on('keyup', this.grow, this);
        this.textarea = this.element.down('textarea');
        this.textarea.dom.style['overflow'] = 'hidden';
    },

    grow: function() {
        this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content
        this.getScrollable().getScroller().scrollToEnd();
    }
});

在Sencha Fiddle上试用。

我的解决方案基于这篇文章Gmail for Mobile HTML5 Series: Autogrowing Textareas。您可以在本文中找到更深入的解释和简单的JavaScript解决方案。

Answer 2

所以我尝试使用以下逻辑自动扩展代码。

               {
                    xtype: 'textareafield',

                     id:'NotesTextArea',

                     maxRows: 4,
                    styleHtmlContent: true,
                    label: '',
                    clearIcon: true
                },

自动展开文字区域字段的逻辑：

initComponent: function(component, options) {

           var textarea = Ext.getCmp('NotesTextArea');
           textarea.on("keyup", function(field, event) {
                       var numOfRows=field.getValue().split("\n").length;

                       if( numOfRows>=4)
                       {
                          numOfRows= numOfRows++;
                          textarea.setMaxRows( numOfRows );
                       }

                       });
}

它完美地扩展了每个新行的文本区域字段，

Answer 3

                   textarea.on("keyup",

                   function(field, event) {

                   var numOfRows=field.getValue().split("\n").length;

                   if( numOfRows>=4)
                   {
                      numOfRows= numOfRows++;
                      textarea.setMaxRows( numOfRows );
                   }

                   });

}

是正确的，但在文字清晰时它并没有最小化高度所以，需要删除if循环然后ans将

                textarea.on("keyup", 
                    function(field, event) {
                   var numOfRows=field.getValue().split("\n").length;


                      numOfRows= numOfRows++;
                      textarea.setMaxRows( numOfRows );

                   });

Answer 4

    Ext.define('MyApp.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
    var textAreaEl = textarea.getComponent().input;
    if (textAreaEl) {
        textAreaEl.dom.style.height = 'auto';
        textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
    }
}, 200, this),

constructor: function () {
    this.callParent(arguments);
    this.on({
        scope: this,
        keyup: function (textarea) {
            textarea.adjustHeight(textarea);
        },
        change: function (textarea, newValue) {
            textarea.adjustHeight(textarea);
        }
    });
}});

sencha touch中的文本区域字段在设备中不可滚动

4 个答案: