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

现在......当视图加载了内容时，通常它显示正常， EXCEPT ... ，以便在textareafield加载HTML格式的内容时（例如，带有很多文字，它的线条是牢不可破的）。在这种情况下，我的formpanel正在设备屏幕上展开。

有关如何处理此类问题的建议吗？

请参阅随附的屏幕截图，了解我正在尝试处理的内容。

enter image description here

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

Formpanel由textfieldarea扩展

1 个答案: