afterrender与onkeypress事件差异：为何获取NameId文本框值结果不同？

这事儿我太熟了！本质是ExtJS组件渲染流程中事件触发时机和值初始化的先后顺序问题，下面给你拆解清楚：

1. afterrender 事件的触发时机与局限 #

afterrender 事件是在组件对应的DOM元素被渲染到页面上之后立即触发的，但这仅仅意味着组件的UI结构准备好了，组件的value属性还没完成初始化或数据绑定：

• 如果你的文本框是通过ViewModel绑定数据、或者从后台异步加载初始值，这些操作都是在afterrender之后才会执行的；
• 就算是硬编码的初始值，有些ExtJS组件内部也会在渲染完成后才把配置的value同步到DOM和组件属性中。

看你的代码：

afterrenderTest: function (component, eOpts){
    var foo = Ext.ComponentQuery.query('#NameId')[0].value;
    console.log(foo); //returns undefined
}

此时组件刚出现在页面上，但值还没被设置到组件的value属性里，自然返回undefined。另外提一句：ExtJS组件更推荐用getValue()方法获取值，而不是直接访问.value属性，前者是组件封装的API，兼容性更好。

2. onkeypress 事件能拿到值的原因 #

当用户按下回车键触发onkeypress事件时，已经完成了和组件的交互：

• 用户输入的内容已经被组件捕获，同步到了组件的value属性中；
• 就算是异步加载的初始值，到用户操作的时候也早已加载完成并绑定到组件上了。

你的代码里判断回车键后取值，这时候组件的value已经被正确赋值，所以能拿到预期结果：

onkeyPressTest: function (button, e, eOpts){
    var foo = Ext.ComponentQuery.query('#NameId')[0].value;
    if (e.getKey() === e.ENTER){
        console.log(foo); //returns a value
    }
}

3. 解决思路：找对取值时机 #

如果想在组件渲染后拿到初始值，推荐这几种做法：

• 监听组件的afterlayout事件：这个事件在组件布局完成（包括值初始化）后触发；
• 使用组件的getValue()方法替代直接访问.value属性；
• 监听组件的change事件，当值发生变化时自动获取（包括初始值加载完成的情况）。

比如改成这样：

afterlayoutTest: function (component, eOpts){
    var foo = Ext.ComponentQuery.query('#NameId')[0].getValue();
    console.log(foo); // 能拿到初始值
}

内容的提问来源于stack exchange，提问作者Eseresaure