I have rendered an iframe inside an EXT JS container.As i click submit button,an iframe with source "www.totalgadha.com" is being loaded into the container.However I want the loaded page to fit to the size of container instead of having scrolls.How to resize the iframe to size of EXT JS container? My current code is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width: 1000,
height: 800,
activeTab: 1,
items: [{
title: 'Tab 1',
/*bodyPadding: 10,*/
html: 'A simple tab'
}, {
xtype: 'panel',
id: 'main',
width: 1000,
height: 800,
layout: 'hbox',
items: [combo(), {
xtype: 'panel',
id: 'mainpanel',
title: 'mainpanel',
width: 500,
height: 800
}],
title: 'Tab 2'
/*,
html : 'Another one'*/
}],
renderTo: Ext.getBody()
});
});
function combo() {
var comb = {
xtype: 'panel',
title: 'comboPanel',
id: 'comboPanel',
width: 500,
height: 800,
items: [getcombo(), getButton() /*,getcombo()*/ ]
};
return comb;
}
function getcombo() {
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}
//...
],
});
var combobox = {
xtype: 'combobox',
id: 'cmbBox',
fieldLabel: 'Choose State',
store: states,
value: 'Select...',
/*queryMode: 'local',*/
displayField: 'name',
valueField: 'abbr'
}
return combobox;
}
function getButton() {
var submit = {
xtype: 'button',
text: 'Submit',
handler: function() {
/* alert(Ext.getCmp('cmbBox').getRawValue()+''+Ext.getCmp('cmbBox').getValue());
Ext.getCmp('mainpanel').removeAll();
Ext.getCmp('mainpanel').doLayout();
Ext.getCmp('mainpanel').add(
{
xtype:'textfield',
id:'text'
});
Ext.getCmp('text').setValue(Ext.getCmp('cmbBox').getRawValue());
Ext.getCmp('mainpanel').doLayout();*/
Ext.getCmp('mainpanel').removeAll();
Ext.getCmp('mainpanel').add({
xtype: "component",
width: 500,
height: 750,
autoEl: {
tag: "iframe",
src: "http://www.totalgadha.com"
}
});
Ext.getCmp('mainpanel').doLayout();
}
}
return submit;
}
</script>
</head>
<body>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire