Extjs面板可拖动委托（拖动句柄） - 无法正常工作

Question

我正在尝试通过该面板内的元素创建可拖动的面板。 不幸的是，委托属性在我的代码中不起作用，整个面板可以用作拖动句柄。

我做错了什么？ 如何修复此代码？

我正在使用extjs 4.1.1。

感谢。

http://jsbin.com/ahipob/1/watch

Ext.onReady(function() {

    var btn1 = Ext.create('Ext.button.Button', {
        text: 'btn1'
    });

    var btn2 = Ext.create('Ext.button.Button', {
        text: 'btn2'
    });


    var panel1 = Ext.create('Ext.panel.Panel', {
        width: 100,
        height: 100,
        items: [btn1, btn2],
        draggable: {
            delegate: '#'+Ext.escapeId(btn1.id)
        }
    });



    Ext.create('Ext.Viewport', {
        renderTo: Ext.getBody(),
        items: [
            panel1
        ]
    });
});