Javascript 将虚拟键盘集成到extjs 4.2表单中

我将虚拟键盘从添加到extjs 4.2表单的文本字段中

它基本上是有效的，请参见此处：

1） 我的第一个问题是：这真的是连接它们的最佳方式吗？在我看来，使用计时器而不是事件来保持extjs值的最新状态很难看

Ext.onReady(function() {    
    Ext.QuickTips.init();

    var formPanel = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        bodyStyle: 'padding: 5px 5px 0 5px;',
        defaults: {
            anchor: '100%',
         },
        items: [{
            xtype:'textfield',
            name: 'string',
            fieldLabel: 'String',
            maxLength:30, enforceMaxLength:true,
            allowBlank: false,
            listeners: {
                show: function(field) {
                    //focus the field when the window shows
                    field.focus(true, 1000); //TODO: doesn't work, no error
                },
                afterrender:function(cmp){
                    cmp.inputEl.set({ //see http://jsfiddle.net/4TSDu/19/
                        autocomplete:'on'
                    });

                    //attach the keyboard
                    //because it modifies the dom directly we need to hack it to 
                    //inform extjs (really, ext has no such listener option?)
                    var interval = window.setInterval(function() {
                        try {
                            var newValue = cmp.inputEl.dom.value;
                            var oldValue = cmp.getValue();
                            if (newValue != oldValue) {
                                //only do it then, cause it also moves the cursor 
                                //to the end and that sucks.
                                cmp.setValue( newValue );
                            }
                        } catch (e) {
                            //form was removed
                            window.clearInterval(interval);
                        }
                    }, 100);
                    // see http://www.greywyvern.com/code/javascript/keyboard
                    VKI_attach(cmp.inputEl.dom); 
                }
            }
        }],
        buttons: [{
            text: 'Alert string',
            handler: function() {
                var stringField = this.up('form').getForm().findField('string');
                alert(stringField.getValue());
            }
        }]
    });
});

另外，我无法克服以下两个问题：

2） 键盘图标被换行。相反，它应该位于字段的末尾，在右侧，正如这里的示例所示：

3） 现场焦点不起作用。我把它放在一个节目里。即使包装在window.setTimeout（）中也不起作用，因此这不是时间问题。不会抛出任何错误

这是一个复制粘贴（stackoverflow的规则）。我会及时更新这两个地方

Ext.onReady(function() {    
    Ext.QuickTips.init();

    var formPanel = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        bodyStyle: 'padding: 5px 5px 0 5px;',
        defaults: {
            anchor: '100%',
         },
        items: [{
            xtype:'textfield',
            name: 'string',
            fieldLabel: 'String',
            maxLength:30, enforceMaxLength:true,
            allowBlank: false,
            listeners: {
                show: function(field) {
                    //focus the field when the window shows
                    field.focus(true, 1000); //TODO: doesn't work, no error
                },
                afterrender:function(cmp){
                    cmp.inputEl.set({ //see http://jsfiddle.net/4TSDu/19/
                        autocomplete:'on'
                    });

                    //attach the keyboard
                    //because it modifies the dom directly we need to hack it to 
                    //inform extjs (really, ext has no such listener option?)
                    var interval = window.setInterval(function() {
                        try {
                            var newValue = cmp.inputEl.dom.value;
                            var oldValue = cmp.getValue();
                            if (newValue != oldValue) {
                                //only do it then, cause it also moves the cursor 
                                //to the end and that sucks.
                                cmp.setValue( newValue );
                            }
                        } catch (e) {
                            //form was removed
                            window.clearInterval(interval);
                        }
                    }, 100);
                    // see http://www.greywyvern.com/code/javascript/keyboard
                    VKI_attach(cmp.inputEl.dom); 
                }
            }
        }],
        buttons: [{
            text: 'Alert string',
            handler: function() {
                var stringField = this.up('form').getForm().findField('string');
                alert(stringField.getValue());
            }
        }]
    });
});

您可以将侦听器连接到键盘，当用户单击VKI键时，您将触发textfield更改事件

Ext.getBody().on({
mousedown: function (ev) {
    if (ev.target.tagName === 'TD') {
        // We trigger change event only on textfield with the focus
        if (document.activeElement) {
            if (document.activeElement.id === cmp.inputEl.dom.id) cmp.fireEvent('change');
        }
    }
}, 
delegate: '#keyboardInputMaster'
});

这是因为extjs4使用“style=width:100%”写入输入字段。 一种简单的方法是在文本字段中添加负边距

fieldStyle:“右边距：-40px”

奇怪的行为。您必须关注输入元素，而不是XTField组件

Ext.defer(function () {
    cmp.inputEl.dom.focus();
}, 100);

您可以在此处看到整个解决方案：

避免使用计时器。改用常规dom事件侦听器

afterrender: function (cmp) {
    ...

    // simply attach this to the change event from dom element
    cmp.inputEl.dom.addEventListener('change', function(){
        cmp.setValue(this.value);
    });

    ...
}

（萨米·兰乔已经回答了）

同样，避免定时器和任何类似的东西。只需添加以下内容：

afterrender: function (cmp) {
    ...

    //focus on field
    cmp.inputEl.dom.focus();

    ...
}

---

请在此处查找更新的fiddle:

不幸的是，代码格式和项目符号之间没有很好的配合：代码需要8个空格（通常为4个空格），而ctrl-K没有帮助；-）谢谢，这是我的第一篇文章。不客气：-）请检查我的编辑，我对javascript不太熟悉，所以可能在格式化时出错。这对我来说仍然像是一个黑客。为什么不简单地将事件附加到DOM元素本身呢？