首先需要激活FocusManager，
Ext.FocusManager.enable();然後在listener裏面添加關於focus的處理語句：
focus: function(){
document.getElementById("div3").innerHTML=this.id;
}完整的一個示例頁面如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Border Layout Example</title>
<link rel="stylesheet" type="text/css" href="v1/lib/resources/css/ext-all.css" />
<script type="text/javascript" src="v1/lib/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.FocusManager.enable();
Ext.create('Ext.panel.Panel', {
id:'panel1',
renderTo:'div1',
bodyPadding: 5, // Don't want content to crunch against the borders
width: 790,
height:100,
title: 'Filters 1',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
listeners:{
focus: function(){
document.getElementById("div3").innerHTML=this.width;
}
//
}
});
Ext.create('Ext.panel.Panel', {
id:'panel2',
renderTo:'div2',
bodyPadding: 5, // Don't want content to crunch against the borders
width: 800,
height:100,
title: 'Filters 2',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}],
listeners:{
focus: function(){
document.getElementById("div3").innerHTML=this.width;
}
//
}
});
})
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">focus test</div>
</body>
</html>