PDA

View Full Version : can't add the same tab with different data



dranney
22 Mar 2011, 10:20 AM
I have the following function:
function addTab(tabTitle, targetUrl) {
tabs.add({
title: tabTitle,
autoLoad: targetUrl,
autoHeight: 'true',
nocache: true,
closable:true
}).show();
}

when i pass "list" and event/doSearch?sourceAsset=drew&statusCode=ALL&last24Hours=true', the first time the code is called on the server, but subsequent times the server code is not called. If change the url, the server code is called once. if i open a new window, the server code is called once. does anyone have any idea what i am doing wrong?

khalilm
23 Mar 2011, 12:16 PM
dranney,

This is how I updated the SAME tab, with new parameters.



var tab = tabPanel.getItem('tabId');
if (tab) {
//Broken apart for easier understanding (at least I think so)
var tab_update = tab.getUpdater();
tab_update.update({
url: 'yourURL'
,closeable:true //add your other config options as required
params: {
param1: data1 //this is what gets passed to the URL
,param2: data2 //etc...
}
});



Then doLayout() on the tab to refresh it. In my case I was inserting some information so I just rendered the new object to a div and displayed it with a call to show().

dranney
23 Mar 2011, 12:38 PM
I tried using tab.getUpdater().update(url), but I don't think that I really explained my problem correctly. i have a tab that has an input field, select and checkbox on it. when this tab is processed, the js code creates a new tab with

var tab = tabs.add({
title: tabTitle,
autoLoad: targetUrl,
autoHeight: true,
nocache: true,
closable:true
}).show();

if i process the first tab with the same input, the target URL doesn't get called again. it seems like it's caching the target URL and responce. Does that help?

khalilm
23 Mar 2011, 2:28 PM
If you are using Firefox you could use Firebug to verify that the new URL and parameters are/are not being sent to the server. Have you tried that? Also you should post some more code. From what I have seen, you get a lot more help that way... just put it in between the PHP tags.

dranney
24 Mar 2011, 3:54 AM
I have tried firefox. the tabs don't even load there, so i didn't proceed. I am running all of this code locally, so i put break points in the server side code to tell if it's getting called. i have included the jsp below. When the new tab is added, the autoload url returns a list of data in the modelMap and the new jsp loops through it. If i run the search with the page defaults, the first time the server will be called. when i run it again, the server code doesn't get called.


<html>
<head>
<title>AMAC Metrics &amp; Events</title>
<link type="text/css" href="static/styles/ext-all.css" rel="stylesheet">
<link type="text/css" href="static/styles/main.css" rel="stylesheet">
<script type="text/javascript" src="static/scripts/ext-base.js"></script>
<script type="text/javascript" src="static/scripts/ext-all.js"></script>
<script type="text/javascript" src="static/scripts/json2.js"></script>
</head>
<body>
<div id="af-logo"><img src="static/images/af-logo.png" /> <img src="static/images/afwa-logo.png" /></div>
<div id="header"><span class="title">AMAC Metrics &amp; Events</span><br /></div>
<div class="clear"></div>
<div id="contentMargin" >
<div id="content" >
</div>
</div>
<div id="ajaxMessage"></div>
</body>
<script type="text/javascript">
var tabs = null;
var tabId = {"eventSearch" : 0, "eventEntry" : 1, "assetSearch" : 3, "assetEntry" : 4};
var tabTitle = {"eventSearch" : "Event Search", "eventEntry" : "Event Entry", "assetSearch" : "Asset Search", "assetEntry" : "Asset Entry", "eventList" : "Event List", "assetList" : "Asset List"};
var tabURL = {"eventSearch" : "event/search", "eventEntry" : "event/entry", "assetSearch" : "asset/search", "assetEntry" : "asset/entry"};
Ext.onReady(function(){
tabs = new Ext.TabPanel({
renderTo: content,
activeTab: 0,
items: [{
title: 'Event Search',
autoLoad: 'event/search',
nocache: 'true',
autoHeight: 'true'
},{
title: 'Event Entry',
autoLoad: 'event/entry',
autoHeight: 'true'
},{
title: 'Asset Search',
autoLoad: 'asset/search',
autoHeight: 'true'
},{
title: 'Asset Entry',
autoLoad: 'asset/entry',
autoHeight: 'true'
}]
});
});
function eventSearch() {
var url = "event/doSearch?";
var sourceAsset = Ext.util.Format.trim(document.getElementById("searchSourceAsset").value);
var statusCode = document.getElementById("eventSearchStatusCode")[document.getElementById("eventSearchStatusCode").selectedIndex].value;

if (sourceAsset.length > 0) {
url = url + "&sourceAsset=" + sourceAsset;
}
url = url + "&statusCode=" + statusCode;
if (document.getElementById('last24Hours').checked) {
url = url + "&last24Hours=true";
}
addTab(tabTitle.eventList, url);
}
function sendEvent() {
var attributeNames = document.getElementsByName('attributeName');
var attributeValues = document.getElementsByName('attributeValue');
var event = {};
var attributes = {};
var port = 0;
var data = 0.0;
var message = "";
if (Ext.util.Format.trim(document.getElementById("entrySourceAsset").value).length > 0) {
event['sourceAsset'] = Ext.util.Format.trim(document.getElementById("entrySourceAsset").value);
} else {
message = message + "Please enter a Source Asset.\n";
}
if (Ext.util.Format.trim(document.getElementById("host").value).length > 0) {
event['host'] = Ext.util.Format.trim(document.getElementById("host").value);
} else {
message = message + "Please enter a Host.\n";
}
if (Ext.util.Format.trim(document.getElementById("port").value).length > 0) {
event['port'] = Ext.util.Format.trim(document.getElementById("port").value) - 0;
} else {
message = message + "Please enter a Port.\n";
}
for (i = 0; i < attributeNames.length; i++) {

if (Ext.util.Format.trim(attributeNames[i].value).length > 0 && Ext.util.Format.trim(attributeValues[i].value).length > 0) {
attributes[Ext.util.Format.trim(attributeNames[i].value)] = Ext.util.Format.trim(attributeValues[i].value);
}
}
event['attributes'] = attributes;

if (Ext.util.Format.trim(document.getElementById("data").value).length > 0) {
event['data'] = Ext.util.Format.trim(document.getElementById("data").value) - 0;
} else {
message = message + "Please enter a Metric.\n";
}
event['dataType'] = document.getElementById("dataType")[document.getElementById("dataType").selectedIndex].value;
event['statusCode'] = document.getElementById("eventEntryStatusCode")[document.getElementById("eventEntryStatusCode").selectedIndex].value;
if (message.length > 0) {
document.getElementById('ajaxMessage').innerText = message;
} else {
Ext.Ajax.request({
url: 'event/add',
success: updateStatus,
params: { data: JSON.stringify(event) }
});
}
}
function updateStatus(XMLHttpRequest) {
var parsedResponse = JSON.parse(XMLHttpRequest.responseText);
if (parsedResponse.status == 'OK') {
document.getElementById('ajaxMessage').innerText = "Status: " + parsedResponse.status + " " + parsedResponse.message + " @" + parsedResponse.timestamp;
} else {
document.getElementById('ajaxMessage').innerText = "Status: " + parsedResponse.status + ". Please try again later.";
}
}
function addTab(tabTitle, targetUrl) {
var tab = tabs.add({
title: tabTitle,
autoLoad: targetUrl,
autoHeight: true,
nocache: true,
closable:true
}).show();
var checkbx = new Ext.form.Checkbox({checked: true});
tab.add(checkbx);
tab.doLayout();


// var store = new Ext.data.JsonStore({
// autoDestroy: true,
// url: 'event/test',
// storeId: 'storeId',
// root: 'events',
// idProperty: 'sourceAsset',
// fields: [
// {name: 'sourceAsset', type: 'string'},
// {name: 'host', type: 'string'},
// {name: 'port', type: 'int'},
// {name: 'statusCode', type: 'string'}
// ]
// });
// store.setDefaultSort('sourceAsset', 'asc');
// var grid = new Ext.grid.GridPanel({
// width:100,
// height:100,
// title:'test grid',
// store: store,
// trackMouseOver:false,
// disableSelection:true,
// loadMask: true,
// columns:[{
// header: "Source Asset",
// dataIndex: 'sourceAsset',
// width: 120,
// sortable: true
// },{
// header: "Host",
// dataIndex: 'host',
// width: 100,
// sortable: true
// },{
// header: "Port",
// dataIndex: 'port',
// width: 70,
// align: 'right'
// },{
// header: "Status Code",
/// dataIndex: 'statusCode',
// width: 150,
// sortable: true
// }]
// viewConfig: {
// forceFit:true,
// enableRowBody:true,
// showPreview:true,
// getRowClass : function(record, rowIndex, p, store){
// if(this.showPreview){
// p.body = '<p>'+record.data.excerpt+'</p>';
// return 'x-grid3-row-expanded';
// }
// return 'x-grid3-row-collapsed';
// }
// },
// bbar: new Ext.PagingToolbar({
// pageSize: 25,
// store: store,
// displayInfo: true,
// displayMsg: 'Displaying events {0} - {1} of {2}',
// emptyMsg: "No events to display",
// items:[
// '-', {
// pressed: true,
// enableToggle:true,
// text: 'Show Preview',
// cls: 'x-btn-text-icon details',
// toggleHandler: function(btn, pressed){
// var view = grid.getView();
// view.showPreview = pressed;
// view.refresh();
// }
// }]
// })
// });
// grid.render('test-grid');
// store.load({params:{start:0, limit:25}});
}
function updateTab(tabId, title, url) {
var tab = tabs.getItem(tabId);

if(tab) {
tab.getUpdater().update(url);
tab.setTitle(title);
}
tabs.setActiveTab(tab);
}
</script>
</html>

khalilm
24 Mar 2011, 8:16 AM
I am currently testing out your code. It seemed strange to me that you could not show it in FF. And when I tried it, it didnt work. In looking at your code you have the line:

renderTo: content,

which should be

renderTo: 'content',

Once that change was made, the tabs were rendered to the screen.

I am still looking at the rest, but hopefully this will get you started in being able to debug using Firebug as it is invaluable. Also, note there is a debug version of Extjs which you can use to help debug as well.

Also please remember to use the PHP tags when posting code to the forum. It greatly helps in readibility.

khalilm
24 Mar 2011, 9:17 AM
Ok first let me qualify that just like you I am learning new things about EXTJS every day and I would rate myself as a Beginner/Intermediate programmer when it comes to this stuff. From the forums you can see there are very brilliant programmers such as Animal, Condor, jgarcia etc who know a heck of a lot more than me. So I am hoping they will read this post and tell me if I am missing something as well as I have just recently come across the same thing in my project.

I have experimented and found no way of changing the HTML content of a tab using TabPanel.add only the ability to add a component. To change the content, I had to use the updater.

Honestly since I dont have all your code (css/json.js) etc, I took the essence of what you wanted and created some code to for you to use as a kind of guide. To make the code more readable, I separated out the javascript from the HTML. Please also note, that I changed the extjs paths to fit my setup.


<html>
<head>
<title>AMAC Metrics &amp; Events</title>
<!--<link type="text/css" href="static/styles/main.css" rel="stylesheet">-->

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="test.js"></script>
<!-- <script type="text/javascript" src="static/scripts/json2.js"></script>-->
</head>
<body>
<br><br>
<div id="button" ></div>
<br><br>
<div id="content" ></div>
</body>
</html>

Using this I created the "test.js" with the following code:


var mytabPanel = new Ext.TabPanel({
id:'mytabPanel',
//renderTo: 'content',
activeTab: 0,
items: [{
title: 'Event Search',
id:'tab0',
autoLoad:
{
url: 'help2.html'
}
,nocache: 'true',
autoHeight: 'true'
},{
title: 'Event Entry',
id:'tab1',
//autoLoad: 'event/entry',
autoHeight: 'true'
},{
title: 'Asset Search',
id:'tab3',
//autoLoad: 'asset/search',
autoHeight: 'true'
},{
title: 'Asset Entry',
id:'tab4',
//autoLoad: 'asset/entry',
autoHeight: 'true'
}]
});

//This changes tab content
var buttonHandler = function(button,event) {
var tab = mytabPanel.getItem('tab0');
if(tab) {
tab.getUpdater().update({
url: 'select.html'
});
}
mytabPanel.setActiveTab(tab);
};

//This adds a child component
var buttonHandler2 = function(button,event) {
var tab = mytabPanel.getItem('tab0');
var checkbx = new Ext.form.Checkbox({checked: true});
tab.add(checkbx);
mytabPanel.doLayout();
};

var addButton = new Ext.Button({
text: 'Change tab content',
width: 75,
handler:buttonHandler
});
var addButton2 = new Ext.Button({
text: 'Add checkbox',
width: 75,
handler:buttonHandler2
});

Ext.onReady(function(){

mytabPanel.render('content');
addButton.render('button');
addButton2.render('button2');
});


I realize this is not pretty code, but I was curious to try it myself so at least it is a place to start.

Finally if you havent already done so, read the FAQ on how to debug. Using Firebug really is a god-send.

EXTJS is great and learning it as I discovered will just take time.

I hope this helps.

Oh, I forgot to mention that the two html files that I loaded in (help2, select) need to be HTML code fragments, that is they can have no HTML/HEADER tags.

dranney
28 Mar 2011, 11:06 AM
khalilm (http://www.sencha.com/forum/member.php?127459-khalilm) , thanks for the help!! What are the PHP tags that i need to use?

khalilm
28 Mar 2011, 12:14 PM
For a full explanation look at the bottom of http://www.sencha.com/learn/Ext_Forum_Help

But basically if you are posting code to the forum use the PHP icon to wrap your code in

tags so that it will be properly formatted and easier to read.

Good luck and if you ever figure out whether you can do this with .add, let me know.