Question

我使用以下代码打开视图

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

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

一旦我关闭了我开了第二个的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 1}}。

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

您可以使用id，因为它是一个无法转换为DOM的ExtJS结构。它为您提供了与在DOM元素上具有ID类似的功能，除了它在ExtJS组件层次结构和选择器API的上下文中更直观地表现。

我的建议是从您的组件中删除itemId属性，让ExtJS为您生成唯一的属性，并仅在您必须在组件上具有已知标识符的情况下利用{{1}}。

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

1 个答案: