“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;
},
我打电话 nomor this.createTreePaketExist（）中的dan fasty 。这是 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 （...）未定义。帮助我，谢谢。
but it gave an error: Ext.getCmp(...) is undefined. Help me, thanks.
推荐答案
在组件中将调用 createTreePaketExist 初始化，在这一点上，textfields实际上不可能实际呈现或甚至被正确初始化，最好使用监听器。您可以使用参考在控制器中自动获取对这些字段的引用，或者您可以收听 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屋！
