1

デバイスで 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
            },
            ]
}
4

4 に答える 4

2

私がそれを処理している方法は、テキストエリアフィールドでキーアップイベントをリッスンし、イベントハンドラーでテキストエリアに十分な高さを設定してすべてのコンテンツを表示することです。スクロールは、コンテナーのスクローラーによって処理されます。

次に例を示します。

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 ソリューションを見つけることができます。

于 2012-08-29T05:21:20.483 に答える
0

だから私は次のロジックを使用してコードを自動拡張しようとしました。

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

                       });
}

新しい行ごとにテキスト領域フィールドを完全に拡張します。

于 2012-08-29T06:54:12.093 に答える
0 
    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);
        }
    });
}});
于 2015-02-25T11:23:02.260 に答える
0 
                   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 );

                   });
于 2014-06-24T17:12:50.733 に答える