PDA

View Full Version : one submit button in tab panel with two forms in different tab s



mayurid
23 Jun 2010, 2:37 AM
hi all,


thanks in advance
i have one submit button on tab panel,i have two forms in 2 different tabs i want to submit the 2 forms differently when that particular tab is active..

Condor
23 Jun 2010, 2:46 AM
Wrong layout.

Use a single form that contains a tabpanel, that contains two panels with layout:'form'.

mayurid
23 Jun 2010, 2:53 AM
i dint get u..
Sorry can u suggest any example

Condor
23 Jun 2010, 3:04 AM
What exactly do you mean by 'post differently'?

mayurid
23 Jun 2010, 3:10 AM
this is the window... with two tabs in one tabpanel..
both tabs having different forms... and the window having one submit button..

requirement is
---------------
by pressing the submit button the active tab's form should load into the database ..

21078


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
//win = new Ext.Panel({
//applyTo:'hello-win',
//renderTo: Ext.getBody(),
renderTo:document.body,

layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,

items:[
{xtype: 'tabpanel',

title:'tab-1',

activeTab:0,
items:[
{
title:'tab1',
items:[{

xtype:'form',
width:500,
url:'login.php',
height:200,
id:'form22',
name:'form22',
frame:true,
border:false,
items:[
{

xtype:'textfield',
inputType:'text',
fieldLabel:'Name',
name:'firstname',
id:'firstname'
},
{
xtype:'numberfield',
label: 'age',
name: 'age',
fieldLabel:'Age',
id:'age'
},
{
xtype:'datefield',
id:'date1',
format:'Y-m-d'
}
]
}]
},
{

title:'tab2',
items:[{
xtype:'form',
width:500,
url:'login1.php',
height:200,
id:'form222',
name:'form222',
frame:true,
border:false,
items:[{

xtype:'textfield',
inputType:'text',
fieldLabel:'nam',
name:'firstname1',
id:'firstname1'}
,{
xtype:'numberfield',
label: 'age',
name: 'age2',
fieldLabel:'budha',
id:'age2'
},
{
xtype:'datefield',
id:'date2',
format:'Y-m-d'

}]

}
]

}
]//main items
}],

buttons: [{
text:'Submit',
handler:function(){
//alert('test');

disabled:true,

Ext.getCmp('form22').getForm().submit();
Ext.getCmp('form222').getForm().submit();
}
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
PLEASE help

mayurid
24 Jun 2010, 8:40 PM
What exactly do you mean by 'post differently'?

Please give some solution condor....

Condor
24 Jun 2010, 11:05 PM
First of all, your layout is overnested. tab1 and tab2 should BE forms instead of containing forms.

Secondly, in your handler use:

var tabitem = tabpanel.activeTab;
var formpanel = tabitem.getComponent(0); // <- You wouldn't need this if tab == form
formpanel.getForm().submit();

mayurid
25 Jun 2010, 9:31 PM
As u told i corrected my layout.

and i wrote that code in my handler. but its saying undefined..
please help me...

mayurid
25 Jun 2010, 9:53 PM
Hi

i fixed the layout as u told..
and i used the code in my handler but its giving undefined..
please check the code... i ll appreciate your help....




<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
</head>

<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

/*
* Form 5
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

var tab2 = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',

width: 600,
items: [{items: [{
xtype:'textfield',
fieldLabel: 'First Name1',
name:'firstt',
id:'firstt',

value:'sagar',
//hidden:true,
anchor:'95%'
}]},/*{
layout:'column',
//border:true,
items:[{
columnWidth:.5,
layout: 'form',
//border:true,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
//border:true,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},*/{
xtype:'tabpanel',
id:'tabpanel1',
name:'tabpanel1',
plain:true,
activeTab: 0,
height:235,
// border:true,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
listeners: {activate: handleActivate},
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
listeners: {activate: handleActivate},
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}/*{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}*/],
buttons: [{
text: 'Save',
handler:function(){
//alert('test');
var tabitem = tabpanel1.activeTab;
//var formpanel = tabitem.getComponent(0); // <- You wouldn't need this if tab == form
//formpanel.getForm().submit();
alert(tabitem);
//Ext.getCmp('form22').getForm().submit();
//Ext.getCmp('form222').getForm().submit();
}
},{
text: 'Cancel'
}], //button end

}],


});
function handleActivate(tab){
var tabid=tab.title;
//document.getElementById('txt_tab').value=tabid;
//alert(tabid);
//Ext.getCmp('first').getValue()=tab.title;
//Ext.getCmp('firstt').setValue()='ahdsgjas';
//document.getElementById('txt_tab').value=Ext.getCmp('firstt').getValue();
//alert(Ext.getCmp('first').getValue());
//document.getElementById('first').value=tabid;
//alert(document.getElementById('first').value);
//Ext.MessageBox.alert(Ext.getCmp('first').getValue());
//alert(Ext.getCmp('first').getValue());
//alert(document.getElementById('firstt').value);
}
tab2.render(document.body);
});
</script>

</div>
<input type="text" name="txt_tab" id="txt_tab" >
</body>
</html>

mayurid
26 Jun 2010, 1:39 AM
Hi

i fixed the lay out ...
and i applied that code.. but its showing undefined




handler:function(){
var tabitem = tabpan.activeTab;
var formpanel = tabitem.getComponent(0); // <- You wouldn't need this if tab == form
Ext.getCmp('form22').getForm().submit();
alert(tabitem); // here its showing undefined
i appreciate your help..

Condor
27 Jun 2010, 10:05 PM
You don't have a variable named 'tabpanel1'. You only have a component with id:'tabpanel1', so you first need to use:

var tabpanel1 = Ext.getCmp('tabpanel1');

But the example you posted is completely different: It has one big form with fields and a tabpanel with more fields! Do you want this or what you described earlier?

mayurid
28 Jun 2010, 2:56 AM
i want in this example...
this one i tried but it showing error of [object Object]
dont know why...


handler:function(){
var tabpanel2 = Ext.getCmp('tabpanel1');
var tabitem = tabpanel2.activeTab;
alert(tabitem);
}

Condor
28 Jun 2010, 5:16 AM
That's not an error. [object Object] is just what Object.toString returns.

tabitem is the active item in the tabpanel container (the current panel).

ps. You shouldn't be debugging with alert(). Install Firefox/Firebug and use breakpoints and/or console.log.

mayurid
28 Jun 2010, 9:49 PM
That's not an error. [object Object] is just what Object.toString returns.

tabitem is the active item in the tabpanel container (the current panel).

ps. You shouldn't be debugging with alert(). Install Firefox/Firebug and use breakpoints and/or console.log.


here also its showing error...like

tabitem.getForm is not a function
chrome://firebug/content/blank.gif tabitem.getForm().submit();
-------------------------------------
handler:function(){
var tabpanel2 = Ext.getCmp('tabpanel1');
var tabitem = tabpanel2.activeTab;
//var formpanel = tabitem.getComponent(0);
tabitem.getForm().submit();