extjs 为什么ext组件没有被覆盖,尽管我完全按照文档中所写的那样做了?

cu6pst1q  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(140)

我想覆盖Ext.ux.LiveSearchGridPanel,这样就不会出现“Search”文本,而是出现一些其他文本,例如“xyz”。
我有一个LiveSearchGridPanel作为:

  1. Ext.define('MyApp.view.main.List', {
  2. //extend: 'Ext.grid.Panel',
  3. extend: 'Ext.ux.LiveSearchGridPanel',
  4. xtype: 'mainlist',
  5. requires: [
  6. 'MyApp.store.Personnel'
  7. ],
  8. title: 'Personnel',
  9. store: {
  10. type: 'personnel'
  11. },
  12. columns: [
  13. { text: 'Name', dataIndex: 'name' },
  14. { text: 'Email', dataIndex: 'email', flex: 1 },
  15. { text: 'Phone', dataIndex: 'phone', flex: 1 }
  16. ],
  17. listeners: {
  18. select: 'onItemSelected',
  19. afterrender: function() {
  20. console.log('We have been rendered');
  21. }
  22. }
  23. });

我在${app.dir}/overrides目录中创建了新文件LiveSearchGridPanel123.js:

  1. Ext.define('Ext.overrides.LiveSearchGridPanel123', {
  2. override: 'Ext.ux.LiveSearchGridPanel',
  3. initComponent: function () {
  4. var me = this;
  5. console.log(this.self.getName() + ' created 123');
  6. me.tbar = ['XXX', {
  7. xtype: 'textfield',
  8. name: 'searchField',
  9. hideLabel: true,
  10. width: 20,
  11. listeners: {
  12. change: {
  13. fn: me.onTextFieldChange,
  14. scope: this,
  15. buffer: 100
  16. }
  17. }
  18. }, {
  19. xtype: 'button',
  20. text: '<',
  21. tooltip: 'Find Previous Row',
  22. handler: me.onPreviousClick,
  23. scope: me
  24. }, {
  25. xtype: 'button',
  26. text: '>',
  27. tooltip: 'Find Next Row',
  28. handler: me.onNextClick,
  29. scope: me
  30. }
  31. ];
  32. me.bbar = Ext.create('Ext.ux.StatusBar', {
  33. defaultText: me.defaultStatusText,
  34. name: 'searchStatusBar'
  35. });
  36. me.callParent(arguments);
  37. }
  38. });

我还加了一句

  1. requires: [
  2. 'Ext.overrides.LiveSearchGridPanel123',
  3. ],

在app.js.中
然后我做了 Sencha 应用程序刷新,但组件保持不变。你能告诉我错误在哪里吗?
screenshot

ndh0cuux

ndh0cuux1#

因为你叫父母this.callParent();
您可以尝试:

  1. Ext.define(null,{
  2. override:'Ext.ux.LiveSearchGridPanel',
  3. initComponent: function() {
  4. const me = this;
  5. me.tbar = [{
  6. xtype:'textfield'
  7. }];
  8. this.superclass.superclass.initComponent.call(this); //<-- this does the magic
  9. }
  10. });

相关问题