Update html content in Extjs and print content in iframe

I have been working for more than a year. In recent development, although there is a division of work between the front-end and the back-end, most of my experiences are on the front-end. There are too many things on the interface that need to be modified and improved, debugging requires more time. Recently, I used the xsl writing style to display the content in xml on the interface. Our interface is based on Extjs, in this way, we can use the html attribute in the panel to obtain the content display. In this way, there is a problem. What should we do when we need to update the content in the panel, changing the panel is a way to achieve the goal, but it seems very stupid. We need to put two panels here. After meditation, we found that panel in Extjs has an html update method. For more information, see the example.

The following code defines the panel first. html In the panel already contains content. The dataURL is a variable and data needs to be retrieved from the background program.

Items :[
{
Xtype: 'panel ',
Title: 'visualized report ',
Id: 'inputxmlstylepanel ',
Html: "<iframe width = 100% height = 100% id = 'inputxmlstyle' name = 'inputxmlstyle' src = '" + dataURL + "in'/> ",
DockedItems :[
{
Xtype: 'toolbar ',
Dock: 'top ',
Items :[
{
Xtype: 'combobox ',
DisplayField: 'filename ',
ValueField: 'fileindexid ',
QueryMode: 'local ',//
Id: 'msgfilename ',
Store: MsgSingleStore,
FieldLabel: 'file name'

},{
Xtype: 'button ',
Text: 'view ',
Handler: function (){
Var fileId = Ext. getCmp ('msgfilename '). getValue ();

// We use different content in combobox to change the parameters passed to the background, so as to obtain different data display. Ext is used here. getCmp ('id '). update (html) where id is the panel id value, html is the defined html variable, shtml or html in the following sentence

Var urlChange = "HTPApp. CSP. App. Result. cls? IndexId = "+ fileId;
Var html = "<iframe width = 100% height = 100% id = 'inputxmlstyle' name = 'inputxmlstyle' src = '" + urlChange + "& type = style & put = in & msg = 24'/> ";
Ext. getCmp ('inputxmlstylepanel '). update (html );
Var shtml = "<iframe width = 100% height = 100% id = 'inputxmlsource' name = 'inputxmlsource' src = '" + urlChange + "& type = source & put = in & msg = 24'/> ";
Ext. getCmp ('inputxmlsourcepanel '). update (shtml );

}
},
{Xtype: 'tbfill '},
{
Xtype: 'button ',
Width: 61,

// This part implements the printing function. We can see that the html in the panel is an iframe that can be printed directly using the iframe name value, for example, InputXMLStyle in the following sentence. window. print ();
InputXMLStyle is the name of the iframe defined above.
Handler: function (){
InputXMLStyle. window. print ();
},
Text: 'print'
}
]
}
]
},
{
Xtype: 'panel ',
Id: 'inputxmlsourcepanel ',
Html: "<iframe width = 100% height = 100% id = 'inputxmlsource' name = 'inputxmlsource' src = '" + performanceurl + "in'/> ",
Title: 'xml source file'

}

]