將焦點集中在Extjs textfield

目前我遇到了將焦點設置爲extjs textfield的問題。當表單顯示時，我想將焦點設置爲名字文本框，並嘗試在函數focus（）中使用構建，但仍無法使其工作。我很高興看到您的建議。將焦點集中在Extjs textfield

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

來源

2011-07-06 Sokmesa Khiev

哪裏是試圖設置焦點的代碼？ – czarchaic

即使延遲了ExtJS 4.2，我也無法使用它。我想這需要在一些回調中完成，但我找不到哪一個。我已經嘗試了視圖上的「渲染器」事件偵聽器，但這也沒有奏效。 – MacGyver

另請參見[在剛剛創建的窗口中爲文本輸入設置焦點]（https://stackoverflow.com/questions/11092833/set-focus-for-text-input-in-just-created-window） – Vadzim

有時它有助於在對焦時增加一點延遲。這是因爲某些瀏覽器（肯定是Firefox 3.6）需要一點額外的時間來渲染表單元素。

注意的ExtJS的focus()方法接受defer作爲參數，所以嘗試：

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

來源

2011-07-06 05:12:13 user123444555621

感謝您的回答但它還沒有工作。可能有另一種方式來做到這一點。目前我正在瀏覽器FireFox 5.0上運行它。 –

如果你想要的形式呈現後，將焦點設置你應該使用「AfterRender階段」事件的文本字段。

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

來源

2011-07-06 07:32:34 Tanel

感謝您的回答任何這不會工作。 –

將simple.render（document.body）包裝在Ext.onReady中，那麼你不必使用延遲 – Tanel

如果你使用config - allowBlank：false，這可能會導致一些驗證問題，在這種情況下你需要設置false參數和輕微的延遲也不會受傷，例如field.focus（false，1000） –

基於Pumbaa80's answer和Tanel's answer我已經嘗試了很多東西，找到了一種方法來做到這一點。下面是代碼：

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

來源

2011-07-06 09:16:49

如果我們甚至在'focus（）'中將參數保留爲'true'，它仍然有效？你能解釋這種行爲嗎。 –

如果這個解決方案有效，請將其標記爲答案。 – Athafoud

嘗試添加以下屬性：

hasfocus:true,

，並使用下面的功能：

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

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

來源

2012-09-11 10:49:55 user1662505

爲什麼不只是添加defaultFocus : '#first_name'，而不是添加到多線的代碼？

OR，this.callParent(arguments);後添加此行Ext.getCmp('comp_id').focus('', 10);

來源

2013-09-05 05:31:20

屬性defaultFocus似乎只適用於Windows。如果我錯了，請糾正我。 – David

defaultFocus屬性應該完美。 –

我已經與這個問題今天一直在掙扎，我想我得到了解決。訣竅是在表單面板上調用show()方法後使用focus()方法。也就是說，添加監聽到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); 
      } 
    }); 
    } 
});

來源

2014-06-24 20:28:41

「秀」事件是關鍵！非常感謝！！！ –

-1

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

}

來源

2016-02-03 07:26:03 samsanthosh2008

請提供一些詳細信息。你的代碼做了什麼？它如何解決這個問題？ – Athafoud

我也一直在努力與得到重點在Internet Explorer中的文本框（如上述建議是工作在Chrome和Firefox罰款）。嘗試了上面建議的解決方案在這個頁面上，但沒有一個在IE中工作。經過這麼多的研究，我得到了解決方法，我的工作，我希望它也會對其他人有所幫助：

使用focus(true)或者如果你想延遲這個，然後簡單地使用focus(true, 200)。在上述問題的參考的代碼將是：

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

來源

2016-04-13 11:11:26 amit

我的形式是一個窗口的內部和文本框將不集中除非我第一聚焦的窗口。

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

來源

2018-02-20 20:10:39

使用afterlayout事件。在元素上設置一個標誌以防止多次聚焦以獲得穩定性。

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

來源

2018-02-22 01:54:58 vahissan

將焦點集中在Extjs textfield

回答

相關問題