PDA

View Full Version : Tab panels working unusally



Rammynampati
10 Aug 2009, 2:48 AM
HI all,
I got a problem while using a tree panel and tab panels.My Tab panel code is

Ext.extend(Ext.TabPanel,
{
// private - holds the context that was passed from the parent container
id: 'center-container',
context: null,
// override
/**
* Initializes the component with the parameters passed to the object
* @param {Object} params The options passed to configure the object.
*/
initComponent:function(params){
var that = this;
//applying the default parameters for the grid container object
var dt = new Date();
Ext.apply(this, {
height: 700,
width:1000,
plain:true,
border:false,
cls:'no-tab',
region : 'center',
deferredRender:false,
defaults:{autoScroll:true,closable:true},
listeners: {
tabchange: function(tp,newTab){
alert("HIHIH");
var um = newTab.getUpdater();
if(um) um.refresh();
}
},
items:[
{
title: 'Home',
closable:false,
autoScroll:true,


}
]
}, params);

nsi.ct.web.ui.main.CenterContainer.superclass.initComponent.call(this);
}

I attached two screens shots. As shown in the screen shots if i click on the treenode first time its showing the tab well. If i click on the same node after opening other nodes its not showing the content but it activating the tab, if i click on the tab it showing the content then. I checked this with using "deferredRender:true". Then tabs are reloading each time i click on the treenode. But i want it to be as "deferredRender:false". Can any one Please help me in this.
The second screen shot shows the tab not displaying the data.

Animal
10 Aug 2009, 2:56 AM
Do not extend to configure.

If you want a TabPanel, then create a TabPanel.

Rammynampati
10 Aug 2009, 3:42 AM
Hi,
This TabPanel is a java script class which extends the functionality of an another class called "container". This tab panel is used to create different tabs by creating an object of this and adding panels to this.

Condor
10 Aug 2009, 3:50 AM
But you can never use this TabPanel descendant multiple times (because you've specified a unique id).

You only need to extend classes if you are planning to add unique behavior and want to use this class in multiple places. In all other cases a simple factory method will do.

Rammynampati
10 Aug 2009, 4:28 AM
Hi, sorry for my bad english..I am not using it multiple times. What i meant is I am calling this using
var tabPanel = Ext.getCmp('center-container');
and adding other classes as
var calContainer = new ux.ci.CalendarContainer({context: that});//where CalendarContainer is a extended panel
tabPanel.add(calContainer ).show();

This creates a tab with the content in the calendar container. Basic problem is with "deferredRender:true". When i use true , it loads the data whenever i call the node. If i use false it loads first time, if i come back and click i showing a activated tab with blank body. If i click on the tab then it's showing the content. What i need is that click functionality to be done automatically when i click on the node in the tree panel(ref screen shots).

Animal
10 Aug 2009, 4:47 AM
it's all an extend to configure problem.

As Condor said, just create a TabPanel

Rammynampati
11 Aug 2009, 5:18 AM
I still not getting that way. What i feel is the, functionality "hiding" rest of the tab contents when i open a new tab.What exactly i want is "To bring forward that data ".
How can i display the hidden content of a tab?
Other thing i noticed is, this type of functionality happening when i clicking on Tree nodes and not on tabs. Why is it so different. "What makes the content of one tab hide when i open two tabs?"

Any one has answers for these?
I am a new bie, still trying to clear my fundas.Thanks in advance.

Animal
11 Aug 2009, 5:18 AM
DO NOT CREATE A SUBCLASS!

JUst create a TabPanel, and all will work.

Rammynampati
11 Aug 2009, 5:56 AM
Hi Animal,
You always there to help others.That's very kind of you. I did exactly what you said. But there is no change in that. Can you please look back into my previous reply , I am doing very well with whatever except that error i am talking about. One bug can make your life vulnerable.This way i changed it
ux.main.CenterContainer = new Ext.TabPanel({
.............
............
});

Condor
11 Aug 2009, 6:07 AM
If you want to keep using an extended tabpanel then at least use:

nsi.ct.web.ui.main.CenterContainer = Ext.extend(Ext.TabPanel, {
constructor: function (config) {
nsi.ct.web.ui.main.CenterContainer.superclass.constructor.call(this, Ext.apply({
id: 'center-container',
context: null,
height: 700,
width: 1000,
plain: true,
border: false,
cls: 'no-tab',
region: 'center',
deferredRender: false,
defaults: {
autoScroll: true,
closable: true
},
listeners: {
tabchange: function (tp, newTab) {
alert("HIHIH");
var um = newTab.getUpdater();
if (um) {
um.refresh();
}
}
},
items: [{
title: 'Home',
closable: false,
autoScroll: true
}]
},
config));
}
});

Rammynampati
11 Aug 2009, 6:16 AM
HI condor,
That's great work. I am getting this error while changing tabs.


this.body has no properties
getUpdater()()ext-all-...647765667 (line 22480)
tabchange()(Object initialConfig=Object id=center-container, Object initialConfig=Object context=[Tree ext-comp-1006])CenterCo...918251112 (line 25)
(?)()(Object scope=Object options=Object)ext-all-...647765667 (line 2124)
apply()([Object scope=Object options=Object 0=Object], function(), undefined)ext-base...361285820 (line 7)
fire()()ext-all-...647765667 (line 2122)
fireEvent()()ext-all-...647765667 (line 1809)
setActiveTab()(Object initialConfig=Object context=[Tree ext-comp-1006])ext-all-...647765667 (line 40114)
onBeforeAdd()(Object initialConfig=Object context=[Tree ext-comp-1006])ext-all-...647765667 (line 39896)
add()(Object initialConfig=Object context=[Tree ext-comp-1006])ext-all-...647765667 (line 17476)
setActiveItem()([Node Orders] childrenRendered=false rendered=true)Actions....483867469 (line 48)
(?)()([Node Orders] childrenRendered=false rendered=true)

Condor
11 Aug 2009, 6:19 AM
What kind of component are you adding to the tabpanel?

Rammynampati
11 Aug 2009, 6:25 AM
Its a container
ux.CalendarContainer = Ext.extend(Ext.Panel,{.....
I am adding all these types of containers.

Rammynampati
11 Aug 2009, 6:53 AM
HI condor,
That's great work. I am getting this error while changing tabs.


this.body has no properties
getUpdater()()ext-all-...647765667 (line 22480)
tabchange()(Object initialConfig=Object id=center-container, Object initialConfig=Object context=[Tree ext-comp-1006])CenterCo...918251112 (line 25)
(?)()(Object scope=Object options=Object)ext-all-...647765667 (line 2124)
apply()([Object scope=Object options=Object 0=Object], function(), undefined)ext-base...361285820 (line 7)
fire()()ext-all-...647765667 (line 2122)
fireEvent()()ext-all-...647765667 (line 1809)
setActiveTab()(Object initialConfig=Object context=[Tree ext-comp-1006])ext-all-...647765667 (line 40114)
onBeforeAdd()(Object initialConfig=Object context=[Tree ext-comp-1006])ext-all-...647765667 (line 39896)
add()(Object initialConfig=Object context=[Tree ext-comp-1006])ext-all-...647765667 (line 17476)
setActiveItem()([Node Orders] childrenRendered=false rendered=true)Actions....483867469 (line 48)
(?)()([Node Orders] childrenRendered=false rendered=true)

Condor
11 Aug 2009, 6:55 AM
Are you sure it's a ux.CalendarContainer instance? Because it looks like you are adding a TreeNode ([Node Orders] childrenRendered=false rendered=true).

Rammynampati
11 Aug 2009, 7:07 AM
No, its nsi.ct.web.ui.calendar.CalendarContainer

Animal
11 Aug 2009, 7:09 AM
Hi Animal,
You always there to help others.That's very kind of you. I did exactly what you said. But there is no change in that. Can you please look back into my previous reply , I am doing very well with whatever except that error i am talking about. One bug can make your life vulnerable.This way i changed it
ux.main.CenterContainer = new Ext.TabPanel({
.............
............
});

Dots won't work in Javascript!

How on EARTH can we help you when you show dots?!

Rammynampati
11 Aug 2009, 7:21 AM
HI,

This is the container class


nsi.ct.web.ui.main.Container = Ext.extend(Ext.Panel, {
context: null,
// override
initComponent: function() {
var that = this;
var centerContainer = new nsi.ct.web.ui.main.CenterContainer({context: that});
var treeContainer = new nsi.ct.web.ui.main.TreeContainer({context: that});
Ext.apply(treeContainer, {
region: 'west',
width: 190,
minSize: 100,
maxSize: 300,
split: true,
border:false,
hideBorders: true,
collapsible: true,
hideCollapseTool: true,
collapseMode: 'mini',
context: this
});
this.getRepository().UI.centerContainer = centerContainer;
Ext.apply(this, {
border : true,
closable:true,
defaults:{autoScroll:true},
tbar: firstTbar,
title: 'Compensation Tool',
layout: 'border',
items: [
treeContainer ,
centerContainer

]
});
nsi.ct.web.ui.main.Container.superclass.initComponent.call(this);
},

This is the tabPanel class


nsi.ct.web.ui.main.CenterContainer = Ext.extend(Ext.TabPanel,
{

// private - holds the context that was passed from the parent container
id: 'center-container',
context: null,
// override
/**
* Initializes the component with the parameters passed to the object
* @param {Object} params The options passed to configure the object.
*/
initComponent:function(params){
var that = this;
//applying the default parameters for the grid container object
var dt = new Date();
Ext.apply(this, {
height: 700,
width:1000,
plain:true,
border:false,
/*cls:'no-tab',
renderTo: document.body,*/
activeTab: 0,
deferredRender:false,//whether or not each tab is rendered only when first accessed (defaults to true).
region : 'center',
enableTabScroll:true,
layoutOnTabChange : true,//do a layout of tab items as tabs are changed
defaults:{autoScroll:true,closable:true },
items:[
{
title: 'Home',
closable:false,
listeners:{
activate : {
fn : function() {
that.handleActivate();
}
}
}
}
]
}, params);

nsi.ct.web.ui.main.CenterContainer.superclass.initComponent.call(this);
},

handleActivate: function(){
}
});




Here i am adding every node to tabpanel



var tabPanel = Ext.getCmp('center-container');
tabPanel.setActiveTab();
//tabPanel.removeAll();
if(node.attributes.id == 'Calendar'){
var calendarContainer = new nsi.ct.web.ui.calendar.CalendarContainer({title: 'Calendar',context: that});
tabPanel.add(calendarContainer).show();
Ext.getCmp('calendar-container').doLayout();
tabPanel.doLayout();
}

tryanDLS
11 Aug 2009, 7:41 AM
http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

Condor
11 Aug 2009, 9:16 AM
You can't call tabPanel.setActiveTab(); without a parameter.

Rammynampati
11 Aug 2009, 10:37 PM
Thanks Condor,its written in the process of trying to activate the tab. commenting the line still error not removed. Can i get more help..

Condor
11 Aug 2009, 11:30 PM
You haven't posted your CalendarContainer code yet.

ps. And I would recommend changing initComponent to constructor (see my previous example on how to do this).

Rammynampati
11 Aug 2009, 11:50 PM
Ok.I am using your code. Here is my code .



nsi.ct.web.ui.calendar.CalendarContainer = Ext.extend(Ext.Panel,{
// private - holds the context that was passed from the parent container
context : null,
id: 'calendar-container',
// override
/**
* Initializes the component
*/
initComponent : function() {
var that = this;
var tabPanel = new nsi.ct.web.ui.calendar.CalendarTabPanel();
//applying the default parameters for the grid container object
Ext.apply(this,{
//creates button on the container
items:tabPanel,
layout: 'fit',
width:1000,
height:700,
defaults: {bodyStyle: 'padding:15px'},
closeAction:'hide'
});
nsi.ct.web.ui.calendar.CalendarContainer.superclass.initComponent.call(this);
}
});
Ext.reg('calendarcontainer',nsi.ct.web.ui.calendar.CalendarContainer);

Calendar Tab panel code


nsi.ct.web.ui.calendar.CalendarTabPanel = Ext.extend(Ext.TabPanel,
{

// private - holds the context that was passed from the parent container
context: null,
id: 'calendar-tab-panel',
// override
/**
* Initializes the component with the parameters passed to the object
* @param {Object} params The options passed to configure the object.
*/
initComponent:function(params){
var that = this;
//applying the default parameters for the grid container object
Ext.apply(this, {
height: 530,
width:800,
border:false,
activeTab : 0,
region : 'center',
layoutOnTabChange: true,
defaults:{autoScroll:true},
items:[
{
title: 'Channel List',
xtype: 'channellistview',
height: 530,
context:this,
listeners: {
render: function(g) {
g.initializeList()

},

delay: 750 // Allow rows to be rendered.

}

}

]
}, params);

nsi.ct.web.ui.calendar.CalendarTabPanel.superclass.initComponent.call(this);
},

getRepository: function() {
return this.context.getRepository();

}
});