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

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: Autogrowth Textareas。您可以在文章中找到更深入的解释和裸 JavaScript 解决方案。

Answer 2

so i have tried auto expand code using the following logic.

               {
                    xtype: 'textareafield',

                     id:'NotesTextArea',

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

the logic for auto expand text area field:

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 );
                       }

                       });
}

it expands the text area field for each new line perfectly ,

Answer 3

                   textarea.on("keyup",

                   function(field, event) {

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

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

                   });

}

是正确的，但在文本清晰时它不会最小化高度所以，需要删除 if loop then 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);
        }
    });
}});