ExtJS中更新html内容以及iframe中内容打印

工作一年多来，最近的开发，虽说前台和后台都有分工，但是大部分经历都放在前台，界面上有太多的东西需要修改和完善，调试程序更是需要更多的时间，最近的工作在用xsl写样式将xml中的内容显示在界面上，而我们的界面是基于Extjs的，这样我们就在panel中使用html属性，获取内容显示，这样就存在一个问题，当我们需要更新panel中的内容时该怎么办，换面板是一个可以实现目标的方法，但是这似乎又是很笨的方法，我们需要放两个panel在这里，在苦思冥想后，发现Extjs中的panel有更新html的方法，具体怎么实践，可以看一下例子。

如下代码：先定义panel，panel中的html是已经有内容的，其中的dataURL是个变量，需要到后台程序中取数据

view
source

print?

01.

items:
[

02.

{

03.

xtype:

'panel'

,

04.

title:

'可视化报告'

,

05.

id:

'InputXMLStylePanel'

,

06.

html:

"<iframe
width=100% height=100% id='InputXMLStyle'name='InputXMLStyle' src='"

+dataURL+

"in'/>"

,

07.

dockedItems:
[

08.

{

09.

xtype:

'toolbar'

,

10.

dock:

'top'

,

11.

items:
[

12.

{

13.

xtype:

'combobox'

,

14.

displayField:

'fileName'

,

15.

valueField:

'fileIndexId'

,

16.

queryMode:

'local'

,

//

17.

id:

'MsgFileName'

,

18.

store:MsgSingleStore,

19.

fieldLabel:

'文件名称'

20.

21.

},{

22.

xtype:

'button'

,

23.

text:

'查看'

,

24.

handler:

function

(){

25.

var

fileId
= Ext.getCmp(

'MsgFileName'

).getValue();

26.

27.

//我们通过combobox中的不同内容来改变传递到后台的参数，以便获取不同的数据显示，在这里我们就用到Ext.getCmp('id').update(html)其中id为panel的id值，html为定义的html变量，如下句中的shtml或是html

28.

29.

var

urlChange=

"HTPApp.CSP.App.Result.cls?indexId="

+fileId;

30.

var

html=

"<iframe
width=100% height=100% id='InputXMLStyle'name='InputXMLStyle' src='"

+urlChange+

"&type=style&put=in&msg=24'/>"

;

31.

Ext.getCmp(

'InputXMLStylePanel'

).update(html);

32.

var

shtml
=

"<iframe
width=100% height=100% id='InputXMLSource'name='InputXMLSource'        src='"

+urlChange+

"&type=source&put=in&msg=24'/>"

;

33.

Ext.getCmp(

'InputXMLSourcePanel'

).update(shtml);

34.

35.

}

36.

},

37.

{xtype:

'tbfill'

},

38.

{

39.

xtype:

'button'

,

40.

width:
61,

41.

42.

//这部分实现打印功能，可以看出来我们panel中的html是写了一个iframe在打印的时候就可以直接用iframe的name值实现打印，例如下句中
InputXMLStyle.window.print();

43.

其中
InputXMLStyle为上面定义的iframe的name值。

44.

handler:

function

(){

45.

InputXMLStyle.window.print();

46.

},

47.

text:

'打印'

48.

}

49.

]

50.

}

51.

]

52.

},

53.

{

54.

xtype:

'panel'

,

55.

id:

'InputXMLSourcePanel'

,

56.

html:

"<iframe
width=100% height=100% id='InputXMLSource'name='InputXMLSource' src='"

+dataSourceURL+

"in'/>"

,

57.

title:

'xml源文件'

58.

59.

}

60.

61.

]

以上内容仅供参考，欢迎批评指正

转载地址：http://extjs.org.cn/node/598