PDA

View Full Version : How to change the title of region:'center'?



edwardking
10 Aug 2010, 10:15 PM
I make a tree menu,when click tree node,it will change the content and title of center region,it works well,but the title of center region is not changed ,but I don't know how to write the code. How to do it? Thanks!

Code is follows:
[CODE]
var root=new Ext.tree.TreeNode({
text:'Info',
[URL=

11 Aug 2010, 4:56 AM
Since you are using static IDs (bad practice), you can use Ext.getCmp('center-panel').setTitle('your new title');.

The title bar needs to be rendered first though.

edwardking
15 Aug 2010, 12:32 AM
Since you are using static IDs (bad practice), you can use Ext.getCmp('center-panel').setTitle('your new title');.

The title bar needs to be rendered first though.

I use the statement

Ext.getCmp('center-panel').setTitle('your new title');

But the title of center-panel is not changed! Why? Would you give me example code?

Thank

Animal
15 Aug 2010, 2:09 AM
You have not configured your center panel with a title, so it does not display a header.

Your center panel is a TabPanel.

Do you want to change the title of ONE OF the center panel's child items?

Read and understand your code before you press ahead.

Animal
15 Aug 2010, 2:10 AM
Where is the "region" config in that tree panel????

Surely, the tree IS the west region?

edwardking
15 Aug 2010, 2:47 AM
[QUOTE=Animal;501384]Where is the

Andrew Peacock
16 Aug 2010, 12:10 AM
Hi Joe,


Since you are using static IDs (bad practice)...

I'm new to ExtJS, and certainly to complex JS development, so I'm still struggling with the good/bad practice in JS. I know you and the rest of the team that offer support are EXTREMELY busy judging by the 13K posts you've made, so you don't have time to say more than "bad practice", but one thing that ExtJS docs are very poor on is "best practice" advice. I find that alot of the tutorials are either lacking practical examples, or refer to ExtJS 1.x/2.x, with no real clue as to whether they still apply for 3.x

As such, when you say "bad practice", I do kind of understand what you're saying, but I'm totally unclear on what "best practice" is. Can you point me to somewhere which explains why


var menu=new Ext.tree.TreePanel({.... });is bad; what the alternative(s) is/are; and why they are better than the above?

Any advice you can offer would be great,

Regards,
Andy

Animal
16 Aug 2010, 1:26 AM
Having to hard code known IDs into Components, and then reference those is not best practice.

Really, you need to design your UI ni an OO manner from the beginning. The UI application will be an object which maintains references to its important Components (like the center TabPanel) as member properties.

Also, loading HTML into an element is bad practice.

There's no point transporting <blah><more blah> tag soup and throwing it into an Ext application.

Load JSON configurations using the RemoteComponent UX. Textual HTML is not useful.

edwardking
16 Aug 2010, 1:40 AM
Having to hard code known IDs into Components, and then reference those is not best practice.

Really, you need to design your UI ni an OO manner from the beginning. The UI application will be an object which maintains references to its important Components (like the center TabPanel) as member properties.

Also, loading HTML into an element is bad practice.

There's no point transporting tag soup and throwing it into an Ext application.

Load JSON configurations using the RemoteComponent UX. Textual HTML is not useful.

Mr. Animal,
Where is wrong with my code? I am puzzled with this problem for several days. Would you tell me how to correct my code? A code is better.

Thanks

Animal
16 Aug 2010, 1:52 AM
Correct it to fullfil what specification? What application are you writing?

You appear to be just playing with attempting to load HTML. That's not an application. There's no future there.

But back on the thread topic. Panel.setTitle sets the title of a Panel.

edwardking
16 Aug 2010, 4:39 AM
Correct it to fullfil what specification? What application are you writing?

You appear to be just playing with attempting to load HTML. That's not an application. There's no future there.

But back on the thread topic. Panel.setTitle sets the title of a Panel.

Mr Animal,
I find a puzzled question,I new a TabPanel,and it's title is 'function area',and item's title is 'function one',but when I run it under tomcat,I find the center area only show the title 'function one',why the title 'function area' don't show? How to make the TabPanel title show? How to write the code? Maybe the reason why I can't change the title name.
Thanks


new Ext.TabPanel({
region:'center',
id:'center-panel',
title:'function area',
deferredRender:true,
activeTab:0,
items:[{
contentEl:'center1',
id:'center1',
title:'function one',
closable:false,
autoScroll:true,
listeners:{
activate:function(tab){
tab.getUpdater().refresh();
}
}
}
]

Animal
16 Aug 2010, 4:49 AM
TabPanels cannot show a title because they put the tab strip in the header.

edwardking
16 Aug 2010, 5:01 AM
TabPanels cannot show a title because they put the tab strip in the header.

You say

Animal
16 Aug 2010, 6:33 AM
Yes. It's a conflict. TabPanel should not use the header. It should use its top toolbar to house the tab strip.

But we are where we are.

Ext 4.0 will fix this inconsistency.

edwardking
16 Aug 2010, 6:43 AM
Yes. It's a conflict. TabPanel should not use the header. It should use its top toolbar to house the tab strip.

But we are where we are.

Ext 4.0 will fix this inconsistency.

When will Ext 4.0 issue? Maybe it is a very long time. My purpose is when click the item of menu tree,the title of Panel will change dynamically. Now I am puzzled with it,I don't know how to do it. I look up extjs3.2 example code,but I don't find any example about it. Mr Animal, would you give me a whole code?
Thanks

Animal
16 Aug 2010, 9:52 AM
You must wrap the TabPanel in a layout:'fit' Panel for now, and THAT wrapping Panel will have the title.

Then make the TabPanel border:false so that you don't get border cruft building up.

Animal
16 Aug 2010, 9:54 AM
I don't know when 4.0 will issue. But they are working hard on it, and there is a conference session devoted to it:

http://www.sencha.com/conference/sessions/

It will be very good!

sntial
1 Sep 2010, 6:15 PM
If you want to defer the title of the panel initially set it to one space (" "). It will render the header (with no visible content), then when you click on a node you can get a handle to the panel and execute the setTitle method as noted previously in the post.

I'm struggling a bit myself with using some static IDs for a few important elements. It may not be ideal, but in some cases it is still the simplest solution depending on what you are trying to accomplish ... some clients have some crazy ideas about how navigation should work.

Animal
1 Sep 2010, 9:38 PM
I'm struggling a bit myself with using some static IDs for a few important elements. It may not be ideal, but in some cases it is still the simplest solution depending on what you are trying to accomplish

Ext 4 will also have more powerful ways of finding the Component you want to manipulate from within the Container hierarchy.