PDA

View Full Version : How to use ifrmae id in extjs



sachin sachdeva
14 Mar 2011, 3:30 AM
Hello I am using a iframe in one of the tab panels as shown in the code below now my requirement is i want to increase the height of iframe on selecting one of the options from the context menu....(beacuse the form that will open in frame is greater then the height of iframe........)


IFRAME CODE
workflowTab = new Ext.TabPanel({
enableTabScroll : true,
allowDomMove : true,
renderTo : 'parentTab1',
deferredRender : true,
animCollapse : true,
frame : true,
draggable : false,

items : [ {
title : 'Edit/Check In ',
html : '<iframe id= "edit" style="width:100%;height:352px" frameborder = "0" src="'+ 'myfileStatus.jsp"></iframe>',--//in this jsp i am using js whose required code is given below
contentEl : 'myFilesTab2'
}]
});




function CheckInPopUp() {
var a=parent.document.getElementById('edit');//---here i am workin and try to find out if there is set height method in frame or not....--------//
debugger;
var recordtoedit = grid.getSelectionModel().getSelected();
var contentID = recordtoedit.get("id");
var docID_revLbl = document.getElementsByName("chk_" + contentID)[0].value
.split(",");
var docID = docID_revLbl[0];
var revLbl = docID_revLbl[1];
var panelContent;
var assets = "myassets";
var folder = recordtoedit.get("foldername");
var folderid = recordtoedit.get("folderid");
var button = Ext.get('Check-in');
vachkids = vachkids + 1;
chkinpopwin = new Ext.Window({
// applyTo:'help-win',
title : 'Check-In Revision Details',
layout : 'fit',
closable : false,
id : 'chkindetailsid' + vachkids,
// closeAction : 'hide',
width : 500,
height : 350,
modal : true,
border : false,
html : '<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameborder = "0" src="CheckinPopup.jsp?contentID='
+ contentID
+ '&documentID='
+ docID
+ '&myassets='
+ assets
+ '&folder='
+ folder
+ '&folderid='
+ folderid
+ '"></iframe>',
plain : true,
constrain : true,
buttons : [{
text : 'CLOSE',
handler : function() {
Ext.getCmp('chkindetailsid' + vachkids).close();

}
}]
});
chkinpopwin.show();
}

dj
14 Mar 2011, 7:49 AM
I'm not quite sure what you want to do but an iframe can be styled as any other HTML-Element. So setting the height of an iframe can be done via CSS or with Ext.Element's setHeight.

Ext.get('iframe-id').setHeight(newHeight);

Working with iframes it can be tricky to get the reference to the correct window (and document) object (as all iframes have their own). So changing the height programmatically might just be difficult because of that. Looks like you have a nasty iframe nesting going one there. So you probably have to go up the iframe hierarchy. Assuming your JavaScript gets executed in the innermost iframe this should change the height of the outer iframe:


function getDoc(iframe) {
if (iframe.contentDocument) return iframe.contentDocument;
if (iframe.contentWindow) return iframe.contentWindow.document;
return iframe.document;
}
Ext.fly(getDoc(parent.parent).getElementById('edit')).setHeight(1000);


I tend to avoid iframes where I can because of the window-confusion.

sachin sachdeva
14 Mar 2011, 9:54 PM
thanx d.j i will try all these methods

sachin sachdeva
14 Mar 2011, 11:47 PM
its working man thanx..........