web-dev-qa-db-ja.com

Extjsテキストフィールドにフォーカスを設定します

現在、extjsテキストフィールドにフォーカスを設定する際に問題が発生しました。フォームを表示するときに、名前テキストボックスにフォーカスを設定し、関数focus（）でビルドを使用しようとしますが、それでも機能しません。あなたの提案を見てうれしいです。

var simple = new Ext.FormPanel({

    labelWidth: 75, 
    url:'save-form.php',
    frame:true,
    title: 'Simple Form',
    bodyStyle:'padding:5px 5px 0',
    width: 350,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            id: 'first_name',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, new Ext.form.TimeField({
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        })
    ],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

simple.render(document.body);
javascriptextjs
21
Sokmesa Khiev

焦点を合わせるときに少し遅延を追加すると役立つ場合があります。これは、特定のブラウザー（Firefox 3.6）がフォーム要素をレンダリングするために少し余分な時間を必要とするためです。

ExtJSのfocus()メソッドはdeferを引数として受け入れるため、次のことを試してください。

Ext.getCmp('first_name').focus(false, 200);
18
user123444555621

Pumbaa80's answer および Tanel's answer に基づいて、私は多くのことを試し、それを行う方法を見つけました。コードは次のとおりです。

{
    fieldLabel: 'First Name',
    name: 'first',
    id: 'first_name',
    allowBlank: false,
    listeners: {
      afterrender: function(field) {
        field.focus(false, 1000);
      }
    }
}
11
Sokmesa Khiev

フォームがレンダリングされた後にフォーカスを設定する場合は、テキストフィールドに「afterrender」イベントを使用する必要があります。

    {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus();
          }
        }
    }
7
Tanel

多くのコード行に追加するのではなく、単に_defaultFocus : '#first_name'_を追加しないのはなぜですか？

または、this.callParent(arguments);の後にこの行を追加Ext.getCmp('comp_id').focus('', 10);

4
Raza Ahmed

次のプロパティを追加してみてください。

hasfocus:true,

以下の機能を使用します。

Ext.getCmp('first_name').focus(false, 200);

{
    id: 'fist_name',
    xtype: 'textfield',
    hasfocus:true,
}
4
user1662505

今日、私はその問題に苦労してきましたが、解決策を得たと思います。トリックは、focus()メソッドがフォームパネルで呼び出された後にshow()メソッドを使用することです。つまり、リスナーをshowイベントに追加します。

Ext.define('My.form.panel', {
    extend: 'Ext.form.Panel',
    initComponent: function() {
        this.on({
            show: function(formPanel, options) {
                formPanel.down('selector-to-component').focus(true, 10);
            }
    });
    }
});
3
Carlos Gavidia-Calderon

また、Internet Explorerのテキストボックスに焦点を当てるのに苦労しています（chromeおよびFirefox）で上記の提案がうまく機能しているため、このページで上記の解決策を試してみましたが、なし多くの調査の後、私のために働いた回避策を得たので、他の人にも役立つことを願っています：

focus(true)を使用するか、これを遅らせたい場合は、単にfocus(true, 200)を使用してください。上記の問題を参照すると、コードは次のようになります。

  {
        fieldLabel: 'First Name',
        name: 'first',
        id: 'first_name',
        allowBlank: false,
        listeners: {
          afterrender: function(field) {
            field.focus(true);
          }
        }
    }
2
amit

それは私のために働く。テキストフィールドまたはテキストエリアにリスナー設定を追加します：

listeners:{
            afterrender:'onRender'
        }

後、コントローラーの書き込み関数で：

onRender:function(field){
    Ext.defer(()=>{
        field.focus(false,100);
    },1);
}

Ext.deferはsetTimout（）のラップです。なしExt.defer（）field.focus（）は動作せず、なぜ動作しません。コントローラの関数名を使用する代わりにlistenersconfigにその関数を書くことはできませんが、コンポーネントのコントローラに関数を保持することをお勧めします。幸運を。

1
Ivan Matskan

afterlayoutイベントを使用します。要素にフラグを設定して、安定性のために複数回焦点を合わせないようにします。

afterlayout: function(form) {
  var defaultFocusCmp = form.down('[name=first]');
  if (!defaultFocusCmp.focused) {
    defaultFocusCmp.focus();
    defaultFocusCmp.focused = true;
  }
}
0
vahissan

私のフォームはウィンドウ内にあり、最初にウィンドウにフォーカスしない限り、テキストフィールドはフォーカスしません。

                listeners: {
                    afterrender: {
                        fn: function(component, eOpts){
                            Ext.defer(function() {
                                if (component.up('window')){
                                    component.up('window').focus();
                                }
                                component.focus(false, 100);
                            }, 30, this);
                        },
                        scope: me
                    }
                }
0
Gavin Palmer