PDA

View Full Version : TabPanel Problem



keithcortis
14 Sep 2009, 2:30 AM
Hi, I am trying to make some functionality within the TabPanel where a user can create a new tab by pressing on the last created tab within this panel. I have nearly managed to implement it where what I have left is that I need to call the last created tab by id (i have managed to get the id of the last created tab), and then 'tell' this tab to execute a function which caters for creating a new tab. Till now the code that i have done is as follows:

var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
autoWidth:true,
autoHeight:true,
defaults: {autoScroll:true},
listeners : {beforetabchange : function(tp, newTab, currentTab){
var noOfTabs = tabs.items.getCount();
var cTab = newTab.id;
console.debug(newTab.id);
var itms = tp.items.keys[noOfTabs-1];
console.debug(itms)
if (cTab == itms) {
console.debug("active tab");
Ext.getCmp(cTab).on('click',addTab);

}
}
},
items:[{
title: 'Tab 1',
html: "Tab 1 content"
},{
title: 'Tab 2',
html: "Tab 2 content",
}
]


});


function addTab(){
tabs.add({
title: 'New Tab',
iconCls: 'tabs',
html: 'Tab Body ' + '<br/><br/>',
closable:true,
}).show();
}

-- what i am trying to add a new tab by the following matter: Ext.getCmp(cTab).on('click',addTab); (which is specified in the code above)
but it seems that the on click method is not being invoked since nothing is happening.. any one has any idea how i can solve this event problem?
thanks!

tubamanu
14 Sep 2009, 4:20 AM
first try to use CODE brackets.... ;-)
also your code has some error:


{
title: 'Tab 2',
html: "Tab 2 content", <--Remove ","
}
one possible solution for your problem can be this:



listeners:{
beforetabchange: function(tp, newTab, currentTab){
var noOfTabs = tabs.items.getCount();
var cTab = newTab.id;
var itms = tp.items.keys[noOfTabs-1];
if(cTab == itms) {
var panel = new Ext.Panel ({
title: 'Tab',
html: 'yoar!'
});
tp.add(panel);
}

}
}

keithcortis
14 Sep 2009, 4:35 AM
first try to use CODE brackets.... ;-)
also your code has some error:


{
title: 'Tab 2',
html: "Tab 2 content", <--Remove ","
}
one possible solution for your problem can be this:



listeners:{
beforetabchange: function(tp, newTab, currentTab){
var noOfTabs = tabs.items.getCount();
var cTab = newTab.id;
var itms = tp.items.keys[noOfTabs-1];
if(cTab == itms) {
var panel = new Ext.Panel ({
title: 'Tab',
html: 'yoar!'
});
tp.add(panel);
}

}
}



thanks alot :D i worked this way... thanks once again!

keithcortis
14 Sep 2009, 6:55 AM
When using the autoLoad property in a tab for example: autoLoad: {url: 'test.html', params: 'name=xxx&code=1'}, does the tab suppose to load the test.html tab inside the tab, yes? since i tried it but the problem is that no data is being shown inside the tab although the page is being loaded (since i checked on firebug)..can it be that the code of the page to be called has to be in the same javascript file as that of the tab javascript file from which the tab html page is being called? thanks!

tubamanu
14 Sep 2009, 7:13 AM
i ve tried this some weeks ago, to load data from other files and it works.
i'm sure that a solution for this is posted in the forum.

http://www.extjs.com/forum/showthread.php?t=10947

keithcortis
14 Sep 2009, 10:48 PM
thanks a lot i will check it out :D

keithcortis
14 Sep 2009, 10:59 PM
i have tried the autoLoad in both ways that was specified in the url given but what is happening in my case is that when i press on the tab which is supposed to open the url - first i see that it is loading and when the page loads - nothing is shown on screen even though in firebug it seems that the page has been found and been transfered as a response from the server.

Any ideas why this can be or if i am missing a property? thks

tubamanu
15 Sep 2009, 12:34 AM
i ve tried this, it works fine.


Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: 'test',
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[{
title: 'Tab 1',
autoLoad: {url: 'content.php', scripts: true}
},{
title: 'Tab 2'
}]
});
// second tabs built from JS

});

keithcortis
15 Sep 2009, 12:46 AM
i ve tried this, it works fine.


Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = new Ext.TabPanel({
renderTo: 'test',
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[{
title: 'Tab 1',
autoLoad: {url: 'content.php', scripts: true}
},{
title: 'Tab 2'
}]
});
// second tabs built from JS

});

my code is also simple and as follows but still does not show the page although firebug shows me that it loads:

Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
frame:true,
enableTabScroll:true,
autoWidth:true,
autoHeight:true,
items:[{
title: 'Tab 1',
autoLoad: {url: 'testform.html', script:true} --> i did not have script : true but inserted it but still the same problem

},{
title: 'Tab 2',
html: "Tab 2 content"
}
]


});
});

tubamanu
15 Sep 2009, 12:50 AM
mmhh
what is your firebug server code ?
200?
did u put your project to a webserver ?

keithcortis
15 Sep 2009, 12:53 AM
mmhh
what is your firebug server code ?
200?
did u put your project to a webserver ?
yes the server code is 200 (OK) and yes i did put my html page that i am requesting on the webserver... i can't understand what the problem is..

tubamanu
15 Sep 2009, 12:56 AM
can u post your full code of the JS / HTML file u deveoped ?

keithcortis
15 Sep 2009, 1:01 AM
<html>
<head>
<title>Testing Tabs</title>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="tabs.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css">
</head>
<body>


<div id="tabs">



</body>
</html>

This is the html file.. while the javascript file is the one that i posted earlier... Maybe i have some css missing or some attribute? seems strange

tubamanu
15 Sep 2009, 1:07 AM
mh i tested this



Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
frame:true,
enableTabScroll:true,
autoWidth:true,
autoHeight:true,
items:[{
title: 'Tab 1',
autoLoad: {url: 'testform.html', script:true}
},{
title: 'Tab 2',
html: "Tab 2 content"
}]
});
});


with HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="tabs-example.js"></script>
</head>
<body>

<div id="tabs"> </div>



</body>
</html>

it works fine, no errors.

keithcortis
15 Sep 2009, 1:08 AM
if works but
testform.html

is not shown inside the first tab.. it says loading... and then firebug shows that it has been loaded but an empty/blank tab is still shown :S

tubamanu
15 Sep 2009, 1:15 AM
what is the content of your html file u try to load ?

i got this



<html>
<head>
</head>
<body>
<b> Test </b>
</body>
</html>

keithcortis
15 Sep 2009, 1:20 AM
the content that i try to load for testform si simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css">
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="testform.js"></script>
</head>
<body>

</body>
</html>

and i call testform.js

when i load this page separately and not via a tab this loads fine and i can use it normally.. only via the tab it is not shown...

thanks:)

tubamanu
15 Sep 2009, 1:24 AM
mh okay. if it is still not working, u can send me your project....so far.

keithcortis
15 Sep 2009, 1:29 AM
this is the testform.js file that i am using:

Ext.onReady(function(){

var ticket_no = new Ext.form.NumberField({
fieldLabel: 'Ticket No',
name: 'ticket_no'
});

var subject = new Ext.form.TextArea({
fieldLabel: 'Subject',
name: 'subject',
maxLength:200,
maxLengthText:'Cannot write more',
width:158
});

var store = new Ext.data.JsonStore({
url: 'countries.php',
root: 'items',
fields: ['country_code', 'country_name']
});


function combo(fname, fieldLabel, displayField, valueField, emptyText, store){
return new Ext.form.ComboBox({
name: fname,
fieldLabel: fieldLabel,
displayField:displayField,
emptyText: emptyText,
forceSelection: true,
loadingText:'Loading data..',
minChars:1,
selectOnFocus:true,
store: store,
triggerAction: 'all',
typeAhead: true,
valueField:valueField,
width:158

});
}


var date = new Ext.form.DateField({
fieldLabel: 'Date',
name: 'date',
width:158,
format : 'd/m/Y',
allowBlank:false
});

var time = new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
width:158,
format: 'H:i',
allowBlank:false
});




var ticket_form = new Ext.FormPanel({
labelWidth:80,
url:'login.php', //change
frame:true,
title:'Test Form',
defaultType:'textfield',
monitorValid:true,
items:[ ticket_no,
subject,
combo('country','Country','country_name','country_code','Select Country', store),
date,
time],
buttons:[{
text:'Save',
formBind: true,
handler:function(){
ticket_form.getForm().submit({
method:'GET',
waitTitle:'Connecting',
waitMsg:'Sending data...',

success:function(){
Ext.Msg.alert('Status', 'Saved Successfully!', function(btn, text){
if (btn == 'ok'){
var redirect = 'ComboBox.html';
window.location = redirect;
}
});
},
failure:function(form, action){
console.debug("failed");
}
});
}
}]
});


var win = new Ext.Window({
layout:'fit',
width:500,
height:500,
closable: false,
resizable: false,
plain: true,
border: false,
items: [ticket_form] //name of object containing the form to wrap up - in our case login form
});
win.show();
});

which is called from the html file that i pasted previously..

as i said on its own it works fine - only within the tab it is not loaded..