在Window标题中输入表单输入字段

时间:2013-06-05 20:50:07

标签: extjs

我需要将窗口的普通标题部分更改为可编辑片刻。我尝试了以下方法,但似乎在几个方面失败了。有人可以建议我一个更好的方法吗?

    var header = window.getHeader();
    header.setTitle(''); // Get rid of the original for now
    var field = Ext.create('Ext.form.field.Text', {
        name: 'Title',
        allowBlank: false,
        cls: 'myInput',,
        value: 'Meh, just some text for now',
        listeners : {
            el : {
                delegate : 'input',
                click    : function() {
                    field.focus(false); // Focus but do not select the text
                    field.selectText(0,0); // The previous failed, try to deselect like this
                }
            }
        }
    });
    header.insert(0, field); // First, before the tools (several buttons there)

我的问题如下:

如果没有侦听器部分,根本无法选择输入字段,所有发生的事情都是触发窗口的移动。使用侦听器实现虽然输入字段的内容由于某种原因仍然被选中(没有selectText从0到0)。此外,不可能使用鼠标来选择部分内容,因为拖动仍然适用于整个窗口,并且监听器实现的“单击”可能也会破坏该方法。使用鼠标单击也无法将光标移动到特定位置。

那么,如何才能真正实现替换窗口标题的可用html输入字段呢?

1 个答案:

答案 0 :(得分:1)

我尝试了以下似乎有效的策略:当鼠标光标进入输入字段时,禁用窗口拖动和放大。掉落,并在它离开时恢复它。

以下是您的代码所能提供的内容:

var killDrag = true;

// Found this by looking into the code: window.dd is an Ext.util.ComponentDragger
// Someone had the good idea to comment that, in there...
window.dd.on({
    // Ext.util.ComponentDragger has a beforedragstart event that can cancel the drag.
    // Apparently no one had the good idea to mention this event in the API doc.
    beforedragstart: function(dd, e) {
        if (killDrag) {
            return false;
        }
    }
});

var header = window.getHeader();
header.setTitle(''); // Get rid of the original for now
var field = Ext.create('Ext.form.field.Text', {
    name: 'Title',
    allowBlank: false,
    cls: 'myInput',
    value: 'Meh, just some text for now',
    listeners : {
        el : {
            delegate : 'input',
            mouseout: function() {
                killDrag = false;
            },
            mouseenter: function() {
                killDrag = true;
            }
        }
    }
});
header.insert(0, field); // First, before the tools (several buttons there)