ExtJs 从同一个视图打开一个视图

Question

我正在使用以下代码打开视图

var reader = Ext.create('Ext.view.ReaderWindow', {});
reader.show();

在 ReaderWindow 视图中单击 a 标签元素，我再次打开相同的视图（使用上面的代码），但内容不同。

一旦我关闭了第二个打开的 ReaderWindow。我无法看到我首先打开的 ReaderWindow。

我的问题是如何两次使用相同的视图。换句话说，如何从视图本身打开相同的视图。

Ext.define('Ext.view.ReaderWindow', {
extend: 'Ext.window.Window',
alias: 'widget.reader',

id: 0,
file_path: '',
file_title: '',
file_type: '',
id: 'reader',
itemId: 'reader',
maxHeight: 800,
maxWidth: 900,
minHeight: 300,
minWidth: 500,
layout: {
type: 'anchor'
},
title: 'File Reader',
modal: true,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'form',
anchor: '100% 100%',
id: 'reader_form',
itemId: 'reader_form',
maxHeight: 800,
maxWidth: 900,
minHeight: 300,
minWidth: 500,
autoScroll: true,
bodyPadding: 10,
items: [
{
xtype: 'displayfield',
anchor: '100%',
id: 'file_contents',
itemId: 'file_contents',
maxWidth: 900,
minWidth: 50,
hideLabel: true,
name: 'file_contents'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
anchor: '100% 5%',
dock: 'bottom',
id: 'reader_toolbar',
itemId: 'reader_toolbar',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
handler: function(button, event) {
me.destroy();
},
id: 'close_btn',
itemId: 'close_btn',
text: 'Close',
tooltip: 'Close the file reader window.'
}
]
}
],
listeners: {
beforerender: {
fn: me.reader_windowBeforeRender,
scope: me
}
}
});

me.callParent(arguments);
},

reader_windowBeforeRender: function(component, eOpts) {

this.setTitle(this.file_title + ' for ID ' + this.id);

this.setFormTitle(this.file_path);




Ext.model.FileReaderModel.load(this.id, {
params: {
'file':        this.file_path,
'file_type': this.file_type
},
success: function(file_reader) {

var contents_field = Ext.ComponentQuery.query('[name=file_contents]')[0];

var contents = file_reader.get('file_contents');
var pattern = /(\/.*?\.\S*)/gi;
contents = contents.replace(pattern, "<a href='#' class='samplefile'>$1</a>");

contents_field.setValue('<pre>' + contents + '</pre>');

Ext.select('.samplefile').on('click', function() {
var sample_file_path = this.innerHTML;

var Id = this.id;

var reader = Ext.create('Ext.view.ReaderWindow', {
id: Id,
file_path: sample_file_path,
file_title: 'Sample File',
file_type:  'output'
});

reader.show();

});
},
failure: function(file_reader, response) {
}
});



},

setFormTitle: function(file_path) {
var form_panel = Ext.ComponentQuery.query('#reader_form');
form_panel[0].setTitle('File is: ' + file_path);

}

});

Answer 1

我看到的一个大问题是你给你的一些组件一个非唯一的id 属性。当指定id 时，ExtJS 将其用作底层 DOM 元素的 ID，而不是生成唯一的 ID。鉴于 ID 在 DOM 中必须是唯一的，这几乎肯定不是您想要的可重用组件。

即使您在构造顶级 Window 对象时生成了唯一的 id，它的子组件（reader_form、file_contents 等）也不会获得唯一的 id。

换句话说，当显示第二个窗口时，您现在有多个具有相同 ID 的 DOM 元素，这会破坏 DOM。在我的 ExtJS 应用程序中，我还没有找到覆盖id 属性的有效用例，但这并不意味着没有。它很可能用于全局脚手架元素或您的应用程序保证只会实例化特定组件的一个实例的东西。

你可以使用itemId，因为这是一个不会被翻译成DOM的ExtJS结构。它为您提供了与在 DOM 元素上使用 ID 类似的功能，但它在 ExtJS 组件层次结构和选择器 API 的上下文中表现得更加直观。

我的建议是从您的组件中删除 id 属性，让 ExtJS 为您生成唯一的属性，并仅在您绝对必须在组件上具有已知标识符的地方使用 itemId。