View Full Version : Access center region

22 Feb 2008, 12:00 PM
Hi All,

I'm working with a layout that has a center region with a toolbar. I've given it an id of "center". I'm then accessing it via Ext.get('center') to load content dynamically. The initial load works, and the reload works when a menu item is clicked however, this overwrites my tbar, and the object originally passed to tbar (tb) does not exist where I am making the call to center, so I can't just pass it again. My initial thought was using Ext.get on the div inside of the "center" div that represents the content I want to update, but the id for that is created by EXT on the fly (ext-gen15 in this case) and I have know way of knowing what it will be consistently. Here is the code I'm working with. Any tips on rearranging it such that my toolbar isn't overwritten when a user clicks a menu item would be appreciated.


var onNavClick = function(menuItm){
var center = Ext.get('center');
//Ext.MessageBox.alert('Good Job', myDiv);
tbar: tb,
url: menuItm.navURL,
text: 'Updating...'


var conn = new Ext.data.Connection();
url: 'nav.asp',
success: function(a){
var tb_items = Ext.util.JSON.decode(a.responseText);
var tb = new Ext.Toolbar({
items: tb_items

var v = new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0
items: [{
region: 'north',
html: '<h1 class="x-panel-header" style="background: white"><img src=logo.jpg></h1>',
autoHeight: true,
border: false,
margins: '0 0 0 0'
region: 'center',
id: 'center',
margins: '5 5 5 5',
autoLoad: 'aboutus.asp',
tbar: tb

failure: function(){
Ext.MessageBox.alert('Error', 'Unknown Failure');

22 Feb 2008, 1:02 PM
specify an id for your panel so you can consistently access it using that id.

and try Ext.getCmp('center') instead.

22 Feb 2008, 1:50 PM
Ext.getCmp worked - thanks!!! So I can add this to my knowledgebase, can you articulate the difference for me? The API didn't really give me any idea what the difference between the two might be.

22 Feb 2008, 1:55 PM
Ext.getCmp worked - thanks!!! So I can add this to my knowledgebase, can you articulate the difference for me? The API didn't really give me any idea what the difference between the two might be.

Check out the source code, it's a great improvement over how well the docs can describe what each method's original intention was expected to be.

22 Feb 2008, 2:18 PM
I suppose that might be better suited for someone with more javascript expertise than me. I have enough trouble getting answers from the API; wading through 1MB of javascript code isn't a solution for me at this stage of my understanding. Eventually I will go down that path, but I need to grasp some more fundamental concepts first.

22 Feb 2008, 4:17 PM
Makes sense.

.get is used to select dom elements..
.getCmp is used to select Ext Components by ID.

they both use a domquery to search.

23 Feb 2008, 4:21 AM
That helps, thanks for the solution and the explanation!

23 Feb 2008, 4:31 AM
Just nitpicking, but neither use DomQuery.

Ext.get uses getElementById (if passed a string)
Ext.getCmp uses a hashtable implementation.

23 Feb 2008, 4:36 AM
Well not quite.

Ext.get returns an Ext.Element which is an abstraction of a DOM element with greatly enhanced capabilities. It only accesses the DOM to do a getElementById if it has not already created an Ext.Element for that id. It caches them for fast reaccess.

Ext.getCmp looks up created Components in a hashtable of Components.

The docs seem unambiguous to me if you actually read and digest what they are trying to say. You read that Ext.get returns en Element, so off you toddle to read that link. You read that Ext.getCmp is a shortcut to Ext.ComponentMgr.get, so off you go and read that. After this excercise, you can imagine they are the same function?

23 Feb 2008, 4:37 AM
Not @evant, BTW, I was replying to thatcoder.

9 Mar 2008, 4:57 PM
Not @evant, BTW, I was replying to thatcoder.

A lil feisty or rattled by my comment on the docs? don't be so emotional. It is no secret that it is confusing as hell.