m_sassa
13 Jul 2007, 11:03 PM
Hello everyone, sorry, but my english is not good, so i write the best i can.
My problem is: i create a TabPanel, in one of a tabs, a have load a a page.
So, that page a have load, contain a Form, but the form is dont show.
this is the index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="./js/yui-utilities.js"></script>
<script type="text/javascript" src="./js/ext-yui-adapter.js"></script>
<script type="text/javascript" src="./js/ext-all-debug.js"></script>
<script type="text/javascript" src="./js/ext-core.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript" src="./js/tabs.js"></script>
<script type="text/javascript" src="./js/tabs-example.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./css/tabs-example.css" />
<link rel="stylesheet" type="text/css" href="./css/forms.css" />
</head>
<body>
<div id="jtabs">
</div>
</body>
</html>
so, this is the tabs-example.js
var TabsExample = {
init : function(){
// second tabs built from JS
var jtabs = new Ext.TabPanel('jtabs');
var tab1 = jtabs.addTab('jtabs-1', "Search Form");
var updater = tab1.getUpdateManager();
tab1.loadScripts = true;
updater.setDefaultUrl('./ajax/search2.php');
tab1.on('activate', updater.refresh, updater, true);
var tab3 = jtabs.addTab('jtabs-3', "Some Properties");
var updater1 = tab3.getUpdateManager();
tab3.loadScripts = true;
updater1.setDefaultUrl('./ajax/search.php');
tab3.on('activate', updater1.refresh, updater1, true);
jtabs.activate('jtabs-1');
}
}
Ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
and finally, this is the search.php
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// Change field to default to validation message "under" instead of tooltips
Ext.form.Field.prototype.msgTarget = 'side';
var simple = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'test.php',
method:'POST'
});
simple.add(
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175,
allowBlank:false
})
)
simple.addButton('Save', function() {
if (simple.isValid()) {
simple.el.dom.submit();
} else {
Ext.Msg.alert('Errors', 'Please complete all fileds.');
}
});
simple.addButton('Cancel');
simple.render('asvform');
simple.el.un('submit', simple.onSubmit, simple);
});
</script>
<div style="width:400px;">
<div id="asvform">
</div>
</div>
<br />
this work fine, but the form loaded dont show.
Please, any idea.
Thanks.
My problem is: i create a TabPanel, in one of a tabs, a have load a a page.
So, that page a have load, contain a Form, but the form is dont show.
this is the index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="./js/yui-utilities.js"></script>
<script type="text/javascript" src="./js/ext-yui-adapter.js"></script>
<script type="text/javascript" src="./js/ext-all-debug.js"></script>
<script type="text/javascript" src="./js/ext-core.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript" src="./js/tabs.js"></script>
<script type="text/javascript" src="./js/tabs-example.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./css/tabs-example.css" />
<link rel="stylesheet" type="text/css" href="./css/forms.css" />
</head>
<body>
<div id="jtabs">
</div>
</body>
</html>
so, this is the tabs-example.js
var TabsExample = {
init : function(){
// second tabs built from JS
var jtabs = new Ext.TabPanel('jtabs');
var tab1 = jtabs.addTab('jtabs-1', "Search Form");
var updater = tab1.getUpdateManager();
tab1.loadScripts = true;
updater.setDefaultUrl('./ajax/search2.php');
tab1.on('activate', updater.refresh, updater, true);
var tab3 = jtabs.addTab('jtabs-3', "Some Properties");
var updater1 = tab3.getUpdateManager();
tab3.loadScripts = true;
updater1.setDefaultUrl('./ajax/search.php');
tab3.on('activate', updater1.refresh, updater1, true);
jtabs.activate('jtabs-1');
}
}
Ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);
and finally, this is the search.php
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// Change field to default to validation message "under" instead of tooltips
Ext.form.Field.prototype.msgTarget = 'side';
var simple = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'test.php',
method:'POST'
});
simple.add(
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175,
allowBlank:false
})
)
simple.addButton('Save', function() {
if (simple.isValid()) {
simple.el.dom.submit();
} else {
Ext.Msg.alert('Errors', 'Please complete all fileds.');
}
});
simple.addButton('Cancel');
simple.render('asvform');
simple.el.un('submit', simple.onSubmit, simple);
});
</script>
<div style="width:400px;">
<div id="asvform">
</div>
</div>
<br />
this work fine, but the form loaded dont show.
Please, any idea.
Thanks.