“Ext.getCmp(...) 未定义"；在不同的功能 [英] "Ext.getCmp(...) is undefined" in different function
问题描述
我有 Extjs 代码，就是这样:
I have Extjs code in view, this is it:
createPanelMC: function() {
this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var panel = Ext.create('Ext.form.Panel', {
defaultType: 'textfield',
name: 'nodebPanel',
width: '100%',
layout: {
type: 'auto',
align: 'stretch'
},
items: [{
xtype : 'fieldset',
name : 'modlayanan',
title : 'Data Pelanggan',
layout : 'column',
width : '95%',
margin : '10',
items: [{
xtype : 'textfield',
name : 'nomor',
id : 'nomor',
fieldLabel : 'PSTN',
emptyText : 'Nomor...',
margin : '10 0 0 0',
width : 350,
labelWidth : 100,
afterLabelTextTpl: this.requiredSign
}, {
xtype : 'textfield',
fieldLabel : 'Speedy',
name : 'speedy',
id : 'speedy',
margin : '10 0 10 20',
width : 350,
labelWidth : 100
},
this.createTreePaketExist()
]
}],
dockedItems: [ {
xtype: 'toolbar',
name: 'tbpaketmc',
dock: 'bottom',
items: [ {
text: '<< Back',
action: 'doBack'
},'->', {
text: 'Submit',
action: 'doSubmit'
}
]
}
]
});
return panel;
},
我在 this.createTreePaketExist() 中调用 nomor dan speedy .这是 this.createTreePaketExist() 代码:
i call nomor dan speedy in this.createTreePaketExist() . This is the this.createTreePaketExist() code:
createTreePaketExist: function() {
var nopstn= Ext.getCmp('nomor').getValue();
var speedy= Ext.getCmp('speedy').getValue();
var storeTree = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
method: 'POST',
url: 'data/newoss_get_paket.php',
params: {
nopstn:nopstn
,speedy:speedy
}
}
});
var groupProduct = Ext.create('Ext.tree.Panel', {
store : storeTree,
name : 'treeProduct',
rootVisible : false,
useArrows : true,
layout :'fit',
margin : '0 0 0 0',
autoScroll : true,
height : 150,
width : '93%',
listeners:
{
checkchange: function(node, checked, eOpts){
node.eachChild(function(n) {
node.cascadeBy(function(n){
n.set('checked', checked);
});
});
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c) {
if (c.get('checked')) pChildCheckedCount++;
p.set('checked', !!pChildCheckedCount);
});
p.resumeEvents();
}
}
});
return groupProduct;
},
但它给出了一个错误:Ext.getCmp(...) is undefined.帮帮我，谢谢.
but it gave an error: Ext.getCmp(...) is undefined. Help me, thanks.
推荐答案
createTreePaketExist 将在组件初始化期间被调用，此时文本字段不太可能实际渲染或什至正确初始化，最好使用监听器.你可以使用 refs在您的控制器中自动获取对这些字段的引用，或者您可以收听 afterrender 事件，然后引用这些字段.
The createTreePaketExist will be called during component initialisation, it's unlikely the textfields are actually rendered or even initialised properly at this point, best to use the listeners. You could use refs in your controller to get a reference to these fields automatically or you could listen to the afterrender event and then reference the fields.
我创建了一个小提琴 此处，展示了如何在表单提交时加载商店，您也可以在文本字段的更改事件上执行此操作.
I have created a fiddle here that shows how to load the store on form submit, you could also do this on the textfield's change events.
代码如下:
Ext.application({
name: 'Fiddle',
launch: function() {
var panel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
defaultType: 'textfield',
name: 'nodebPanel',
width: '100%',
layout: {
type: 'auto',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
name: 'modlayanan',
title: 'Data Pelanggan',
layout: 'column',
width: '95%',
margin: '10',
items: [{
xtype: 'textfield',
name: 'nomor',
id: 'nomor',
fieldLabel: 'PSTN',
emptyText: 'Nomor...',
margin: '10 0 0 0',
width: 350,
labelWidth: 100,
afterLabelTextTpl: this.requiredSign
}, {
xtype: 'textfield',
fieldLabel: 'Speedy',
name: 'speedy',
id: 'speedy',
margin: '10 0 10 20',
width: 350,
labelWidth: 100
}]
}],
dockedItems: [{
xtype: 'toolbar',
name: 'tbpaketmc',
dock: 'bottom',
items: [{
text: '<< Back',
action: 'doBack'
}, '->', {
text: 'Submit',
action: 'doSubmit',
bindForm: true,
handler: function() {
var nopstn = Ext.getCmp('nomor').getValue();
var speedy = Ext.getCmp('speedy').getValue();
if (nopstn != '' && speedy != '') {
var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
console.log(store);
store.load({
params: {
nopstn: nopstn,
speedy: speedy
}
});
}
}
}]
}]
});
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad: false,
proxy: {
type: 'ajax',
method: 'POST',
url: 'data/newoss_get_paket.php'
}
});
var groupProduct = Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
store: storeTree,
itemId: 'treeProduct',
name: 'treeProduct',
rootVisible: false,
useArrows: true,
layout: 'fit',
margin: '0 0 0 0',
autoScroll: true,
height: 150,
width: '93%',
listeners: {
checkchange: function(node, checked, eOpts) {
node.eachChild(function(n) {
node.cascadeBy(function(n) {
n.set('checked', checked);
});
});
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c) {
if (c.get('checked')) pChildCheckedCount++;
p.set('checked', !! pChildCheckedCount);
});
p.resumeEvents();
}
}
});
}
});
这篇关于“Ext.getCmp(...) 未定义"；在不同的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
