ExtJs open a view from the same view - extjs

Question

I am opening a view using the following code
var reader = Ext.create('Ext.view.ReaderWindow', {});
reader.show();
Inside the ReaderWindow view on clicking an a tag element,i am opening the same view (using the code above) again but with different content.
Once i close the ReaderWindow which i opened second. I could not able to see the ReaderWindow which i opened first.
My question is how to use the same view twice. In other words how to open the same view from the view itself.
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

One big problem I see is that you are giving some of your components a non-unique id property. When an id is specified, ExtJS uses it as the ID of the underlying DOM element instead of generating a unique one. This is almost certainly not what you want on a reusable component given that IDs need to be unique within the DOM.
Even if you are generating a unique id when you construct the top-level Window object, its child components (reader_form, file_contents, etc) are not getting a unique id.
In other words, when your second window is shown, you now have multiple DOM elements with the same ID and that breaks the DOM. In my ExtJS application, I've yet to find a valid use case for overriding the id property, but that doesn't mean there isn't one. It would most likely be for global scaffolding elements or something where your application guarantees only one instance of a particular component will ever be instantiated.
You can use itemId because that's an ExtJS construct that doesn't get translated into the DOM. It gives you similar features to having an ID on a DOM element, except that it behaves more intuitively in the context of the ExtJS component hierarchy and selector APIs.
My recommendation is to remove the id property from your components and let ExtJS generate unique ones for you and leverage itemId only where you absolutely must have a known identifier on your component.