Extjs 텍스트 필드에 포커스 설정

Question

현재 extjs 텍스트 필드에 포커스를 설정하는 데 문제가 있습니다. 양식이 표시 될 때 이름 텍스트 상자에 포커스를 설정하려고하고 포커스()에서 빌드를 사용하려고하지만 여전히 작동하지 않습니다. 귀하의 제안을 기쁘게 생각합니다.

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

Answer 1

때때로 초점을 맞추는 데 약간의 지연을 추가하는 것이 좋습니다. 이는 특정 브라우저 (Firefox 3.6)가 양식 요소를 렌더링하는 데 다소 시간이 걸리기 때문입니다.

의 ExtJS의 focus() 방법은 인수로 defer을 받아, 그래서 시도하는 것이

참고 : 양식을 렌더링 한 후 포커스를 설정하려면

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

Answer 2

당신은 당신의 텍스트 필드에 대한 이벤트 "afterrender"를 사용한다.

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

Answer 3

는 Pumbaa80's answer 및 Tanel's answer을 바탕으로 나는 많은 것들을 시도하고 할 수있는 방법을 발견했다. 아래의 기능

hasfocus:true, 

및 사용 :

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

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

Answer 4

시도 : 여기에 코드입니다 코드? 오늘 그 문제로 어려움을 겪고 있었어요이 줄 Ext.getCmp('comp_id').focus('', 10);

Answer 5

가 왜 그냥 대신 많은 라인에 추가하는 defaultFocus : '#first_name' 추가를 다음과 같은 속성을 추가 할 수

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

Answer 6

를 추가하고, 내가 해결책을 찾은 것 같아 this.callParent(arguments); 후

OR,. 양식 패널에서 show() 메서드가 호출 된 후 트릭이 focus() 메서드를 사용하고 있습니다. 나는 또한 위의 제안으로 인터넷 익스플로러에서 텍스트 상자에 초점을 (얻기에 어려움을 겪고있다

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

Answer 7

UIManager.SetFocusTo = function (row, column) { 
    var grd = Ext.getCmp('gridgrn'); 
    grd.editingPlugin.startEditByPosition({ 'column': column, 'row': row }); 

} 

Answer 8

크롬과 파이어 폭스에서 잘 작동된다 : 즉, show 이벤트 리스너를 추가한다). 이 페이지에서 위에 제안 된 솔루션을 사용해 보았지만 IE에서 모두 작동하지 않았습니다. 많은 연구 끝에 나에게 도움이되는 해결 방법을 얻은 후에 다른 사람들에게도 도움이되기를 바랍니다.

focus(true)을 사용하거나 지연시키고 싶다면 focus(true, 200)을 사용하십시오. 는 위의 문제의 심판의 코드는 다음과 같습니다

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

Answer 9

내 양식은 윈도우의 내부와 내가 먼저 창을 집중하지 않으면 텍스트 필드가 초점을 맞추지 것이다.

   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 
        } 
       } 

Answer 10

afterlayout 이벤트를 사용하십시오. 안정성을 위해 여러 번 초점을 맞추지 않으려면 요소에 플래그를 설정하십시오.

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