PDA

View Full Version : How to create tab on click



ludhiana
14 May 2008, 9:22 AM
Hi,
I want to create a tab when user user clicks on a link in Grid. Right now my program is displaying 2 grids and 2 tabs but I want to display one tab (which contains grid and a column with link) and second tab should be created with user clicks on a link. Please help.
Here is my code.
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
renderTo: 'tabs1',
width:1100,
height:900,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'grid-example', title: 'Result'},
{contentEl:'pocn', title: 'Dynamic Tab'}
]
});

allTabs = tabs;
var gridPartList;
var sm = new Ext.grid.CheckboxSelectionModel();
var rn = new Ext.grid.RowNumberer(),
b = new Array(1,0,2);
var allcols = [];
allcols.push({header: 'Price',width: 50,sortable: true,dataIndex: 'p1'});
allcols.push({header: 'New Price',width: 50,sortable: true,dataIndex: 'p2'});

allcols.push({header: 'sum',renderer: function(v, params, record){
return String.format('<b><a href="#" onClick="javascript: getPopUp();">{0}</a></b>',((+record.data.p1) + (+record.data.p2)));


},dataIndex: 'p1'});

var i;
var newcols = [sm,rn];
for(i=0;i<b.length;i++)
{
newcols.push(allcols[b[i]]);

}
var ds = new Ext.data.GroupingStore({

proxy: new Ext.data.HttpProxy({url: 'http://localhost:8080/ABC/service/search/?page=0&size=10'}),
reader: new Ext.data.XmlReader({
record: 'res',
totalRecords: '@total'

}, [

{name: 'p1', mapping: '@p1'},
{name: 'p2', mapping: '@p2'}


]),

sortInfo:{field: 'p2', direction: "ASC"}//,
});

var cm = new Ext.grid.ColumnModel([{
dataIndex: 'p2',
header: 'p2' }]);

gridPartList = new Ext.grid.GridPanel({
el:'grid-example',
width:1100,
height:480,
store: ds,
sm:sm,
columns:newcols,
enableDD:true,
sm2:new Ext.ux.grid.MultiCellSelectionModel(),
plugins: filters,
trackMouseOver:true,
viewConfig: {forceFit:true },
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
gridPartList.render();
ds.load();
function handlePOCN(strHtml) {
var target = Ext.get('pocn');
target.update(strHtml);
}

function getPOCNPopUp() {
var mydata = null;
allTabs.setActiveTab(1);
Ext.Ajax.request({
url: 'http://localhost:8080/ABC/service/service/?page=0&size=5',
success: wasOK,
failure: wasBAD,
response: mydata

});
alert(mydata);
Ext.get('searchprogress').show();
}

function wasOK(somedata) {

var someDocument;
someDocument = somedata.responseText; //HTML
alert(someDocument);
Ext.get('searchprogress').hide();
handlePOCN(someDocument);
}

function wasBAD() {
alert('bad');
}


// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'http://localhost:8080/ABC/service/search/?page=0&size=5'}),
// the return will be XML, so lets set up a reader
reader:new Ext.data.XmlReader({
record: 'res'
}, [
{name: 'p1', mapping: '@p1'},

{name: 'p2', mapping: '@p2'}


])
});

//create the columns
var columns = new Ext.grid.ColumnModel([
{header: "PO Number", width: 70, dataIndex: 'p1'},

{header: "Model Year", width: 70, dataIndex: 'p2'}

]);
columns.defaultSortable = false;
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
cm: columns,
loadMask: true,
title: 'Prices',
renderTo:'pocnscreen-grid',
width:790,
height:150
});
store.load();



});


HTML
<body>

<h1>ExtJS Filter Grid Example</h1>
<div id="tabs1"><div id="grid-example" style="margin: 10px;"></div>


<div id="pocn">
<div id="pocnscreen-grid"></div>
</div>
<div id="searchprogress">
<img src="/ABC/ui/searchprogress.gif" />
</div></div>


</body>
</html>
When I click on link, I get run time error indicating object expected.

mjlecomte
14 May 2008, 9:46 AM
what function gets called when the user clicks on whatever?

ludhiana
14 May 2008, 10:04 AM
2 grids are there but I do not know how to connect them. When I click on link, I get runtime error.
function getPOCNPopUp() {
var mydata = null;
allTabs.setActiveTab(1);
Ext.Ajax.request({
url: 'http://localhost:8080/ABC/service/service/?page=0&size=5',
success: wasOK,
failure: wasBAD,
response: mydata

});
alert(mydata);
Ext.get('searchprogress').show();
}

ludhiana
14 May 2008, 10:08 AM
In Mozilla, I am getting error message that getPopUp() is not defined. Which is not true.

ludhiana
14 May 2008, 10:30 AM
I am trying to add store in function like this, but I do not see any value in the second grid and I am getting the same error message.
function getPOCNPopUp() {
var conn = new Ext.data.Connection();
allTabs.setActiveTab(1);
conn.request({
url: 'http://localhost:8080/abc/service/search/?page=0&size=5',
method: 'POST',
success: function(responseObject) {
alert(responseObject.responseText);
var data = responseObject.responseXML;
createAll(data);
handlePOCN(data);

},
failure: function() {
alert('Something fail');
}
});
}
// create the Data Store
function createAll(data) {
var store = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'http://localhost:8080/abc/service/search/?page=0&size=5'}),
// the return will be XML, so lets set up a reader
reader:new Ext.data.XmlReader({
record: 'res'
}, [
{name: 'p1', mapping: '@p1'},

{name: 'p2', mapping: '@p2'}


])
});

//create the columns
var columns = new Ext.grid.ColumnModel([
{header: "PO Number", width: 70, dataIndex: 'p1'},

{header: "Model Year", width: 70, dataIndex: 'p2'}

]);
columns.defaultSortable = false;
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
cm: columns,
loadMask: true,
title: 'Best PO',
renderTo:'pocnscreen-grid',
width:790,
height:150
});
store.load();
}
I think that code below is not updating the tab.

function handlePOCN(strHtml) {
var target = Ext.get('pocn');
target.update(strHtml);
}