Question

我的页面右侧有一个vbox面板：

        {
            xtype: 'panel',
            region: 'east',
            itemId: 'clipboard',
            autoScroll: true,
            width: 200,
            layout: {type:'vbox',align: 'stretch',pack: 'start'},
            collapsible: false,
            split: true,
            border: false,
        }

当一个事件发生时，我需要将一个带有文本的新图像添加到“剪贴板”条：

var clipboard = Ext.ComponentQuery.query('panel[itemId=clipboard]')[0];
clipboard.add(
    {
        xtype: 'panel',
        layout: { type: 'vbox', align: 'center',pack: 'start'},
        data: data,
        margin: '5 0 5 0',
        items: [{
            xtype: 'image',
            src: 'resources/images/clipboardItem.png',
            height: 32,
            width: 32
        }, {
            xtype: 'box',
            html: 'This text needs to wrap around because it is too wide to fit in the clipboard strip.'
        }]
    });

图像在文本上正确居中。文本应该环绕，以便它不比剪贴板宽。但是，它的容器没有缩小到条带的宽度。文本长度决定了其直接容器的宽度。

我需要进行哪些配置更改，以便我添加到剪贴板的每个项目都有一个居中的图像，然后是一个可能在剪贴板边界内包裹的文本块，当用户更改时，一切都会调整剪贴板的宽度？

http://jsfiddle.net/nxSmS/

Answer 1

只需在框中添加宽度......

xtype: 'box',
width: '100%',
html: '<p>This text is super long and will be too wide for the panel</p>',

Extjs4：什么配置将文本包装在其父容器中？

1 个答案: