Formpanel由textfieldarea区域扩展

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',*/
        }]
    }
    });

现在..。当视图加载了内容时，通常它会显示ok，，除了.，在textareafield加载HTML格式的内容时(用于ex )。与大量的文本和它的行是牢不可破的)。在这种情况下，我的格式面板被扩展到设备的屏幕上。

有什么建议如何处理这样的问题吗？

请看附在屏幕上的截图，清楚我想要处理的事情。

​

​

​

​

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