extjs iframe使用

ExtJS虽然能够作出非常华丽的页面,但对于大量的数据显示来说任然存在着很多的不足!而使用iframe则可以巧妙的解决该问题,使我们运用Ext更加灵活自如,将我们的项目做得更加完美!下面讲述的就是iframe的简单用法:(如有更好的解决方案望各位指出)

1.index.html:

<script type="text/javascript">
var addWin = null;
var editWin = null;
var fun_del ;
Ext.onReady(function(){
editWin = new Ext.Window({
id:‘editWin‘,
title : ‘编辑窗口‘,
width : 400,
height : 350,
modal : true,
closeAction : ‘hide‘,
html:‘This is editForm!‘
});

addWin = new Ext.Window({
id:‘addWin‘,
title : ‘主窗口‘,
width : 400,
height : 350,
modal : true,
closeAction : ‘hide‘,
html:‘<iframe id="frame" name="frame" src="frame.html" width=100% height=100%/>‘
});
addWin.show();

fun_del = function(){
alert(‘This is delete function!‘);
}
});
</script>

2.frame.html

<script type="text/javascript">
function changeWin(){
Ext.onReady(function() {
parent.addWin.hide();
parent.editWin.show();
});
}
function delWin(){
parent.fun_del();
}
</script>

<body>
<a href="" onclick="changeWin();">编辑</a>
<a href="" onclick="delWin();">删除</a>
</body>

 

///////////////////

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

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

 

items: [
                                 {
                                     xtype: ‘panel‘,
                                     title: ‘可视化报告‘,
                                     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:‘文件名称‘
                                              
                                             },{
                                              xtype:‘button‘,
                                              text:‘查看‘,
                                              handler:function(){
                                               var fileId = Ext.getCmp(‘MsgFileName‘).getValue();

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

                                               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,

//这部分实现打印功能,可以看出来我们panel中的html是写了一个iframe在打印的时候就可以直接用iframe的name值实现打印,例如下句中 InputXMLStyle.window.print();
其中 InputXMLStyle为上面定义的iframe的name值。
                                                     handler:function(){
                                                    InputXMLStyle.window.print();
                                       },
                                                     text: ‘打印‘
                                                 }
                                             ]
                                         }
                                     ]
                                 },
                                 {
                                     xtype: ‘panel‘,
                                     id:‘InputXMLSourcePanel‘,
                                     html:"<iframe width=100% height=100% id=‘InputXMLSource‘name=‘InputXMLSource‘ src=‘"+dataSourceURL+"in‘/>",
                                     title: ‘xml源文件‘
                                     
                                 }
                                 
                                    ]

 

extjs iframe使用,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。