1

我的页面右侧有一个 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/

4

1 回答 1

3

只需为框添加宽度...

xtype: 'box',
width: '100%',
html: '<p>This text is super long and will be too wide for the panel</p>',
于 2013-03-08T00:08:49.090 回答