这是 extjs javascript 代码
Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
'*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var tab2 = Ext.widget({
title: 'Inner Tabs',
xtype: 'form',
id: 'innerTabsForm',
collapsible: true,
bodyPadding: 5,
width: 600,
url:'http://localhost/form/database.php',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
xtype: 'container',
layout:'hbox',
items:[{
xtype: 'container',
flex: 1,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
afterLabelTextTpl: required,
allowBlank: false,
name: 'first',
anchor:'95%'
}, {
fieldLabel: 'Enquiry Date ',
name: 'Enquiry Date ',
xtype: 'datefield'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Last Name',
afterLabelTextTpl: required,
allowBlank: false,
name: 'last',
anchor:'95%'
},{
fieldLabel: 'Email',
afterLabelTextTpl: required,
allowBlank: false,
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:600,
defaults:{
bodyPadding: 10
},
items:[{
title:'Personal Details',
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
},{
xtype: 'fieldset',
flex: 1,
title: 'Gender',
defaultType: 'radio', // each item will be a radio button
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [ {
checked: true,
boxLabel: 'Male',
name: 'gender',
inputValue: 'male'
}, {
boxLabel: 'Female',
name: 'gender',
inputValue: 'female'
}]
},{
xtype: 'fieldset',
flex: 1,
title: 'Marrital Status',
defaultType: 'radio', // each item will be a radio button
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [ {
checked: true,
boxLabel: 'Single',
name: 'mstatus',
inputValue: 'single'
}, {
boxLabel: 'Married',
name: 'mstatus',
inputValue: 'married'
}]
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
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: 'Rmarks',
layout: 'fit',
items: {
xtype: 'htmleditor',
name: 'bio2',
fieldLabel: 'Remarks'
}
}]
}],
buttons: [{
text: 'Save',
handler: function () {
tab2.getForm().submit({
method: 'POST',
url: 'http://localhost/form/database.php',
waitMsg: 'Saving...',
success: function () {
Ext.MessageBox.alert ('Message','Data has been saved');
tab2.getForm().reset();
},
failure: function () {
Ext.MessageBox.alert ('Message','Saving data failed');
}
});
}
},{
text: 'Cancel',
handler: function () {
tab2.getForm().reset();
}
}]
});
tab2.render(document.body);
//tab2.render('form');
});
php代码
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("stratageeks", $con);
$q=mysql_query ("INSERT INTO data (name,lastname) VALUES ('".isset($_POST['first'])."','".isset($_POST['last'])."')");
if ($q) {
echo '{"success":"true"}';
}
else {
echo '{"success":"false"}';
}
?>
上面的代码是我的 Extjs javascript 代码，下面的代码是我的数据库代码，用于从 extjs 表单插入数据库中的数据
但数据存储在数据库 名称：1 姓氏：1
表单发布数据是 名称：ravi 姓氏：kumar