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 に答える