PDA

View Full Version : Tab Panel Items Help



errodr
17 Jul 2008, 8:59 AM
I have a viewport which contains a tabpanel that contains 10 tabs. One of the tabs contains a portal. When a user clicks a link in this tab I want to replace the portal with a grid how is that done? Nothing that I have tried has worked so far. I have tried remove and add, and also replace.

errodr
17 Jul 2008, 10:09 AM
Anybody? I simply want to replace the content in one tab with different content.

Here is what I have tried so far:


var tp;
var viewport;

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

gridC = function(limitColumns){

function italic(value){
return '<i>' + value + '</i>';
}

function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}


var columns = [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
];

// allow samples to limit columns
if(limitColumns){
var cs = [];
for(var i = 0, len = limitColumns.length; i < len; i++){
cs.push(columns[limitColumns[i]]);
}
columns = cs;
}

SampleGrid.superclass.constructor.call(this, {
store: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]),
data: [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
]
}),
columns: columns,
autoExpandColumn: 'company',
height:250,
width:600
});


}

Ext.extend(SampleGrid, Ext.grid.GridPanel);

// create some portlet tools using built in Ext tool ids
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

// Go ahead and create the TreePanel now so that we can use it below
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: '',
region:'north',
split: true,
height: 300,
minSize: 150,
autoScroll: true,
border:false,

// tree-specific configs:
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.id + '"');
}
},
lines: true,
singleExpand: true,
useArrows: true,

loader: new Ext.tree.TreeLoader({
dataUrl:'http://www.opdec.com/eis/tree-data.php'
}),

root: new Ext.tree.AsyncTreeNode()
});

// TAB Panel
tp = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
margins:'0 5 5 5',
items:[{
contentEl:'home_div',
title: 'Home',
closable:false,
autoScroll:true
},{
title: 'Maintenance',
closable:false,
autoScroll:true,
border:false,
id:'maint',
items:[
{
xtype:'portal',
region:'north',
border:false,
items:[{
columnWidth:1,
style:'padding:10px 0 10px 10px',
items:[{
title: '&nbsp;',
tools: tools,
contentEl: r1
},{
title: '&nbsp;',
tools: tools,
contentEl: r2
}]
}]
}
]
},{
contentEl:'supply_div',
title: 'Supply',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'sam_div',
title: 'SOFs/ASAMs/MIMs',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'er_div',
title: 'ECPs/RFDs',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'iam_div',
title: 'ISAQs/AWRs/MWOs',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'2410_div',
title: '2410',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'rel_div',
title: 'Reliability',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'rp_div',
title: 'Reset/Preset',
autoScroll:true,
closable:false,
disabled:true
},{
contentEl:'conf_div',
title: 'Configuration',
autoScroll:true,
closable:false,
}]
});

// Go ahead and create the TreePanel now so that we can use it below
var treePanel2 = new Ext.tree.TreePanel({
id: 'tree-panel2',
title: '',
region:'north',
split: true,
height: 300,
minSize: 150,
autoScroll: true,
border:false,

// tree-specific configs:
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.id + '"');
}
},
lines: true,
singleExpand: true,
useArrows: true,

loader: new Ext.tree.TreeLoader({
dataUrl:'http://www.opdec.com/eis/tree-data.php'
}),

root: new Ext.tree.AsyncTreeNode()
});

viewport = new Ext.Viewport({
layout:'border',
items:[new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}), {
region:'west',
id:'west-panel',
title:'E.I.S. Navigation',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 0 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},

items: [{
title:'Organization',
border:false,
iconCls:'nav',
items:[treePanel]
},{
title:'Action Items',
html:'<p>Action Items</p>',
border:false,
iconCls:'nav'
},{
title:'Calendar',
html:'<p>Calendar</p>',
border:false,
iconCls:'nav'
},{
title:'Document Management',
html:'<p>Document Management</p>',
border:false,
iconCls:'nav'
},{
title:'User Options',
html:'<p>User Options</p>',
border:false,
iconCls:'settings'
},{
title:'Administration',
html:'<p>Administration</p>',
border:false,
iconCls:'nav'
}


]
},tp


,
{
region:'east',
id:'east-panel',
title:'View Panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 5 5 0',
cmargins:'0 5 5 0',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
title:'View',
border:false,
iconCls:'nav',
items:[treePanel2]
},{
title:'View Options',
html:'<p>View Options</p>',
border:false,
iconCls:'settings'
}]
}]
});
});

function test(){
//tp.items.replace('1',[{title: 'Grid in a Portlet',layout:'fit',items: new SampleGrid([0, 2, 3])}]);
//tp.items.replace('maint',[{title: 'Grid in a Portlet',layout:'fit',items: new SampleGrid([0, 2, 3])}]);
tp.items.add(1,[{title: 'Grid in a Portlet',layout:'fit',items: new SampleGrid([0, 2, 3])}],'gridd')
//tp.doLayout();
}

The test() function is called from an href click. I want to replace the second item.

Any help is appreciated.

devnull
17 Jul 2008, 11:41 AM
in your test function:


tp.remove(Ext.getCmp('idOfTabToRemove'));
tp.add(1,[{title: 'Grid in a Portlet',layout:'fit',items: new SampleGrid([0, 2, 3])}],'gridd');
tp.doLayout();

note that this is overnesting of the new tab, in the future you should add the grid as a tabItem directly without nesting it in another panel.

errodr
17 Jul 2008, 12:16 PM
in your test function:


tp.remove(Ext.getCmp('idOfTabToRemove'));
tp.add(1,[{title: 'Grid in a Portlet',layout:'fit',items: new SampleGrid([0, 2, 3])}],'gridd');
tp.doLayout();
note that this is overnesting of the new tab, in the future you should add the grid as a tabItem directly without nesting it in another panel.

Thanks for your help. It works partially. When the function is executed the tab does disappear, but instead of adding a new tab with a grid I see two tabs created with blank titles:

http://www.opdec.com/tabs.jpg


Here is the code I have used:


tp.remove(Ext.getCmp('maint'));
tp.add(1,[{title: 'Grid in a Portlet',layout:'fit',items: new SampleGrid([0, 2, 3])}],'gridd');
tp.doLayout();Here is the JS error I get:

http://www.opdec.com/error.jpg

Is there any way to replace the content in the maintenance tab with the grid? I have a chart in and I want to allow a user to click on a bar, in order to show the data behind the chart. Sort of a drill-down.

See http://www.opdec.com/eis/portal.html if you want to see what I am talking about. It is under the maintenance tab.

Thanks for any help. It is appreciated.

devnull
17 Jul 2008, 12:27 PM
Sorry, I neglected to check the API docs for add; it accepts only one type of argument which is the panel(s) to be added. you cannot control where they are added.

errodr
17 Jul 2008, 4:24 PM
Sorry, I neglected to check the API docs for add; it accepts only one type of argument which is the panel(s) to be added. you cannot control where they are added.

So is there a way to replace the contents of a specific tab panel item with another item? I checked the API docs and there seems to be a replace method but I cannot get it to work.

Any help is appreciated.

Thanks...

Animal
17 Jul 2008, 11:57 PM
Container has http://extjs.com/deploy/dev/docs/?class=Ext.Container&member=insert