英文:
initComponent is not working for Ext.panel.Panel
问题
我目前正在使用文档中的嵌入式示例 https://docs.sencha.com/extjs/7.6.0/classic/Ext.grid.Panel.html 进行实验：
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
// START added code
initComponent: function () {
this.callParent();
}
// END added code
});
正如您所见，我添加了.initComponent()配置，并且按照文档中的描述调用了this.callParent()。我假设这应该可以工作，并且与没有代码的情况相同，因为initComponent被描述为一个模板方法，唯一的要求是调用this.callParent()。
我想知道可能缺少什么，因为面板在视图中没有正确渲染。
我还尝试了以下方式传递参数，但没有成功：
this.callParent.apply(this, arguments);
this.callParent(arguments);
英文:
I currently playing with this embedded fiddle in the documentation https://docs.sencha.com/extjs/7.6.0/classic/Ext.grid.Panel.html:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
// START added code
initComponent: function () {
this.callParent();
}
// END added code
});
As you can see I added the .initComponent() config and has a call to the this.callParent() as described in the documentation. I am assuming this will work and is the same as without the code, since initComponent is described as a template method and the only requirement is calling this.callParent().
I am wondering what could be missing as the panel is not rendering correctly in the view.
I also tried passing the arguments using the following was but has no luck:
this.callParent.apply(this, arguments);
this.callParent(arguments);
答案1
得分: 3
The initComponent方法需要在定义组件时定义。如果您在创建组件实例时内联覆盖该方法，initComponent方法将不会被调用。
更多信息请查看 - https://docs-devel.sencha.com/extjs/7.6.0/classic/Ext.Component.html#method-initComponent
以下是如何重构您的代码：
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
在此定义您的组件：
```javascript
Ext.define('MyComponent', {
extend: 'Ext.grid.Panel',
xtype: 'mycomponent',
title: 'Simpsons',
height: 200,
width: 400,
renderTo: Ext.getBody(),
// 开始添加的代码
initComponent: function () {
this.callParent();
console.log('Hi');
}
// 结束添加的代码
});
然后像下面这样使用组件：
Ext.create({
xtype: 'mycomponent',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
});
它将在控制台中记录 'Hi'。
英文:
The initComponent method needs to be defined while defining the component. If you override the method inline while creating an instance of a component, the initComponent method won't be invoked.
More on this - https://docs-devel.sencha.com/extjs/7.6.0/classic/Ext.Component.html#method-initComponent
Here is how you can refactor your code:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
Define your component here
Ext.define('MyComponent', {
extend: 'Ext.grid.Panel',
xtype: 'mycomponent',
title: 'Simpsons',
height: 200,
width: 400,
renderTo: Ext.getBody(),
// START added code
initComponent: function () {
this.callParent();
console.log('Hi');
}
// END added code
});
And use the component like below:
Ext.create({
xtype: 'mycomponent',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
});
It will log 'Hi' in console.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论