textArea异步获取数据换行

本文介绍了一个使用ExtJS框架创建的简单应用实例,该实例通过Ajax请求从后端获取并显示员工的培训收获反馈。具体实现了文本区域组件的配置及数据加载功能。

前台:

 

    this.train_result = new Ext.form.TextArea

    ({

        xtype       : 'textarea',

        anchor      : '95%',

        id          : Ext.id(),

        name        : 'train_result',

        grow        : true,

        growMax     : 150,

        growMin     : 50,

        fieldLabel  : '培训收获'

    });

    Ext.Ajax.request

    ({

        url: '../trainComment/get_train_result',

        success: function(response, options)

        {

            var result = Ext.util.JSON.decode(response.responseText);

            this.train_result.setValue(result.train_result);

        },

        failure: function(response, options)

        {

            this.train_result.setValue(0);

        },

        scope : this,

        params: { id : this.uid }

    });

 

后台追加的换行:

result += it.train_other + "//n"

directives: { // 指令名: 指令对象 'adaptive-textarea': { // 元素插入父节点时触发(首次渲染) inserted(el) { const textarea = el.querySelector('.el-textarea__inner'); if (!textarea) return; const resize = () => { textarea.style.height = 'auto'; // 重置高度 const computedStyle = window.getComputedStyle(textarea); const padding = parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom); // 创建临时 div 来精确测量文本所需高度 const tempDiv = document.createElement('div'); tempDiv.style.position = 'absolute'; tempDiv.style.visibility = 'hidden'; tempDiv.style.font = computedStyle.font; tempDiv.style.width = textarea.clientWidth + 'px'; tempDiv.style.whiteSpace = 'pre-wrap'; tempDiv.style.wordWrap = 'break-word'; tempDiv.style.padding = computedStyle.padding; tempDiv.innerText = textarea.value || ''; document.body.appendChild(tempDiv); let height = tempDiv.offsetHeight + padding; const lineHeight = parseFloat(computedStyle.lineHeight) || 20; const minHeight = lineHeight * 2; height = Math.max(minHeight, height); textarea.style.height = height + 'px'; }; // 初始执行一次 resize(); // 监听 input 事件 textarea.addEventListener('input', resize); // 保存函数以便后续使用或解绑 el.__resizeFn__ = resize; }, // 组件更新后调用(例如 v-model 数据变化) componentUpdated(el) { if (el.__resizeFn__) { el.__resizeFn__(); } }, // 解绑时移除事件监听(防内存泄漏) unbind(el) { const textarea = el.querySelector('.el-textarea__inner'); if (textarea && el.__resizeFn__) { textarea.removeEventListener('input', el.__resizeFn__); } delete el.__resizeFn__; } } }, 这段代码计算出来的实际效果 貌似文字的下面padding有点大
最新发布
11-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值