PDA

View Full Version : how to create a frame and change it's content with a combobox?



monazahed
11 Sep 2013, 8:11 AM
I need to display different php pages inside a frame on a tab. users select the pages from a combobox containing the names of the pages.
I have created the combobox but I don't know how I can call the php pages and display them in a frame on the same tab.

............stores.js.........................
report_store = Ext.create('Ext.data.Store', {
fields: ['name','label'],
data : [

{
"label":"Report A",
"value":"Report A"
},
{
"label":"Report B",
"value":"Report B"
},
{
"label":"Report C",
"value":"Report C"
},
{
"label":"Report D",
"value":"Report D"
}



]
});
..............reports.js.................
reportsTab.prototype.getToolbar = function() {
var _this = this;

var toolbar = Ext.create('Ext.toolbar.Toolbar',{
items: [
{
xtype:'combo',
id: _this.report_combo_id,
labelWidth: 70,
fieldLabel: 'Report Type',
store: report_store,
queryMode: 'local',
displayField: 'label',
valueField: 'name'

}
]



});

ettavolt
11 Sep 2013, 10:08 PM
Create a component with autoEl set to 'iframe' and then on combo's change event do component.el.set('src',path)

monazahed
17 Sep 2013, 11:35 AM
I added autoEI as a button handler function but it displays the frame on a popup window, how can I display it on the body?

text: 'view',
iconCls: 'icon-add',
handler: function() {
var myWin = Ext.create("Ext.window.Window", {
renderTo: document.body,

autoScroll:true,

items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 10%; width: 100%; border: false',
align:'left',
method:'GET',
src: 'combo.php'

}
}
}).show();
}