extjs - 由 textfieldarea 扩展的 Formpanel

Question

我有这个问题，我定义了以下视图：

Ext.define('aBMin.view.TicketView', {
    extend : 'Ext.form.Panel',

    alias : 'widget.ticketview-panel',
    config : {
        layout : {
            type : 'vbox',
            align : 'center',
        },
        items : [{
            xtype : 'fieldset',
            defaults : {                
                labelWidth: '110px',
                labelWrap: true,
            },                  
            name : 'ticketviewfieldset',
            width : '100%',
            items : [{
                xtype : 'hiddenfield',
                name : 'clientemailid',
                label : 'ClientEmailId',
            }, {
                xtype : 'selectfield',
                name : 'clientid',
                label : 'Client',
                store : 'Client',
                displayField : 'clientname',
                valueField : 'clientid'
            }, {
                xtype : 'selectfield',
                name : 'projectid',
                label : 'Project',
                store : 'ProjectSF',
                displayField : 'projectname',
                valueField : 'projectid'
            }, {
                xtype : 'selectfield',
                name : 'ticketstatusid',
                label : 'Ticket status',
                store : 'TicketStatus',
                displayField : 'ticketstatusclient001',
                valueField : 'ticketstatusid'
            }, {
                xtype : 'checkboxfield',
                name : 'warrantysupport_yn',
                label : 'Warranty',
            }, {
                xtype : 'checkboxfield',
                name : 'ourfault_yn',
                label : 'Our fault'
            }, {
                xtype : 'selectfield',
                name : 'supportstaffid',
                label : 'Staff',
                store : 'Staff',
                displayField : 'staffname',
                valueField : 'supportstaffid'
            }, {
                xtype : 'textfield',
                name : 'subject',
                label : 'Subject'
            }, {
                xtype : 'textareafield'
                ,name : 'ticketdesc'
                ,label : 'Description'
                ,tpl : '<pre>{value}</pre>'
                /*,style : {
                    'width' : '100px'
                    ,'overflow' : 'auto'
                }*/
            }, {
                xtype : 'datepickerfield',
                label : 'Eta',
                name : 'eta',
                picker : {
                    slotOrder : ['day', 'month', 'year']
                }
            }, {
                xtype : 'textfield',
                name : 'timeestimate',
                label : 'Estimated time (min.)'
            }]
        }, {
            xtype : 'button'
            ,text : 'Update'
            ,action : 'ticketViewSubmit'
            ,ui : 'confirm'
            ,width : '100%'
            /*width : '10%',
            minWidth : '200px',*/
        }]
    }
    });

现在...当视图加载了内容时，通常它显示正常，除了...在向 textareafield 加载 HTML 格式的内容的情况下（例如，有很多文本并且它的行是牢不可破的）。在这种情况下，我的窗体将在设备的屏幕上展开。

任何建议如何处理这样的问题？

请参阅随附的屏幕截图以清楚了解我要处理的内容。

Answer 1

如果将来有人会遇到类似的问题，这是解决方案：

{
 xtype : 'textareafield'
,name : 'ticketdesc'
,label : 'Description'
,tpl : '<pre style="white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">{value}</pre>'
,cls : 'scale-images'
}

这

<pre style="white-space: pre-wrap; word-wrap: break-word; word-break: break-all;">{value}</pre>

模板解决了这个问题（大部分）。此外，图像还可以“扩展”视图，因此您可以添加这样的

.scale-images img {
 max-width : 320px;
 height : auto;
}