PDA

View Full Version : How to use a formPanel inside a tabPanel



marxan
18 Feb 2011, 12:27 AM
Hi,

I have the following tabpanel:



var tabs = new Ext.TabPanel({
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Alerts',
autoLoad:'mygrid.cfm'
},{
title: 'Warnings',
autoLoad:'mygrid2.cfm'
}
]
});


var comment = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Project Reference: '+project,
bodyStyle:'padding:5px 5px 0',
width: 800,
items: [tabs

]
});


Then when clicking on a tab it loads another coldfusion page. Here's the code of that page (I've tested it independently and it loads my grippanel and displays it correctly). But If I load it from the tabpanel nothing happens even though the page is correctly loaded.



Ext.onReady(function(){


var container = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Project Reference: '+project,
bodyStyle:'padding:5px 5px 0',
width: 800,
items: [
{
xtype: 'CommentHistoryGrid',
id: 'CommentHistory-Grid',
name: 'CommentHistory-Grid',
project: project,
type: type
},
{
xtype:'textarea',
id:'txtComment',
fieldLabel:'Comment (max 120 char)',
allowBlank:false,
height:120,
width:580
//anchor:'98%'
}
],
buttons:[{
text: 'Save',
handler: function(){
comment.getForm().submit({
url:'saveComment.cfm',
params: {
project: project,
type: type
},
waitMsg:'Saving Data...',
success: function(fp, o){
url = "comment.cfm?project="+project+"&type="+type;
msgOKUrl('Success', 'Comment saved', url);
},
failure: function(fp, o){
if (o.failureType == 'client')
msgError('Empty Field', 'The comment field is empty');
else
msgError('Error', 'A problem occured while saving the comment');
}
});
}
}]
});

container.render('container');
});
</script>
<body>
<div id="container"></div>


Is there a special thing to do to make the JS works from a tabpanel?

Thanks in advance.

Marxan

marxan
18 Feb 2011, 1:14 AM
I've mistyped the AutoLoad

Here's the correct line:

autoLoad: {url: 'menu.cfm', scripts: true}

I have now the following error...

Ext.EventObject is undefined

If anyone has an idea, thanks for your help.

I will post the solution if I find it...

marxan
18 Feb 2011, 2:22 AM
Ok, I've found the solution.

I have to render my panel to the existing panel.

But the problem of this solution: It adds my datagrid above under the tabpanel...