Question

​Extjs页面创建了一个窗口代码如下,请教大家如何通过itemId 来直接访问最下面的这个'保存'按钮

var win = Ext.create("Ext.window.Window", {
title: "卡牌编辑",
width: 360,
height: 340,
items: {
xtype: "form",
margin: 5,
border: false,
items: [....]
},
buttons: [
{ text: "保存",
itemId : 'btn_save' }]
});
不要直接回答我,要先页面测试哦,谢谢

Answer 1

你直接说要先测试是因为win.getComponent('btn_save')取不到控件是吧？

这是因为buttons里的控件挂靠到的不是win，而是toolbar里，也就是这个按钮的容器不是win而是toolbar

所以正确的取法应该是win.queryById('btn_save')

var win = Ext.create("Ext.window.Window", {

title: "卡牌编辑",

width: 360,

height: 340,

items: {

xtype: "form",

margin: 5,

border: false,

       items: []

        },

buttons: [

{ text: "保存",

itemId : 'btn_save' }

],

renderTo:Ext.getBody()

}

); 

win.show();

Ext.defer(function(){

win.queryById('btn_save').setDisabled(true);

},5000);

Answer 2

itemId
: String

当没有可利用的对象引用时，itemId可以作为第二选择，用来获得一个组件的引用， 代替 id 与 Ext. getCmp的组合， 使用 itemId 与 Ext.Container. getComponent 方法配合将会获得
itemId 's（的所有者） 或者 id 's（的所有者）。 既然 itemId
's（的所有者）是一个到容器内部MixedCollection的索引， itemId
的作用域就被限定在容器之内---避免与 Ext.ComponentMgr 产生潜在的冲突，它（指Ext.ComponentMgr）需要一个
唯一的 id 。

var c = new Ext.Panel({ //
height: 300,
renderTo: document.body,
layout: 'auto',
items: [
{
itemId: 'p1',
title: 'Panel 1',
height: 150
},
{
itemId: 'p2',
title: 'Panel 2',
height: 150
}
]
})
p1 = c.getComponent('p1'); // 与 Ext.getCmp()不同

p2 = p1.ownerCt.getComponent('p2'); // 通过兄弟对象获得引用

另请参见 id 和 ref 。

注意:需要访问一个item的容器请参见 ownerCt 。

追问

没有直接回答我的问题

追答

解决问题的方法，可以查看api。