1

http://www.greywyvern.com/code/javascript/keyboardから extjs 4.2 フォームのテキスト フィールドに仮想キーボードを追加しています。

それは基本的に動作します。ここを参照してください: http://jsfiddle.net/g5VN8/1/

1) 私の最初の質問は、これが本当にそれらを接続するための最良の方法ですか? extjs の値を最新の状態に保つために、イベントの代わりにタイマーを使用すると、私には見苦しく見えます。

さらに、次の2つの問題を克服できません。

2) キーボード アイコンは新しい行に折り返されます。代わりに、ここの例のように、右側のフィールドの最後にある必要があります: http://www.greywyvern.com/code/javascript/keyboard

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());
            }
        }]
    });
});
4

2 に答える 2

0

  1. タイマーは避けてください。代わりに、通常の dom イベント リスナーを使用してください。

    afterrender: function (cmp) {
    ...

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

    ...
}

  2. （すでにサミー・ランチョが回答済み）

    fieldStyle: 'margin-right:-40px',

  3. 繰り返しますが、タイマーなどは避けてください。これを追加するだけです：

    afterrender: function (cmp) {
    ...

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

    ...
}

ここで更新されたフィドルを見つけてください：http://jsfiddle.net/g5VN8/11/

于 2015-03-19T19:47:52.147 に答える
0

  1. リスナーをキーボードにアタッチして、ユーザーが VKI キーをクリックすると、テキストフィールドの変更イベントをトリガーできます。

    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'
});

  2. これは、ExtJS 4 が「style=width:100%」で入力フィールドを書き込むためです。簡単な方法は、テキストフィールドに負のマージンを追加することです

    fieldStyle: 'margin-right:-40px'

  3. 奇妙な ExtJS の動作。xtfield コンポーネントではなく、入力要素にフォーカスする必要があります

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

ここでソリューション全体を見ることができます: http://jsfiddle.net/EGbLn/3/

于 2013-08-22T07:19:42.960 に答える