Update html content in Extjs and print content in iframe

Source: Internet
Author: User

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'

}

]

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.