View Full Version : Panel id n title change

3 Dec 2009, 9:03 AM
Hi all,

I have a panel inside a tabbed panel where the user saves changes to the data. Once the data is saved the panel id + title is changed as follows:

panel.id = data; Though the title and Id get reflected fine, the Panel does not behave normally.

If alternate tabs are opened, one cannot navigate back to the changed panel
The changed Panel cannot be closed

Is this the wrong way to change to id/title of a panel?

3 Dec 2009, 9:10 AM
What is data?

id cannot start with a numeric value.

3 Dec 2009, 9:12 AM
Data is a numeric value. It is being set as:

panel.id = 'text_'+data;

3 Dec 2009, 11:38 AM
setTitle is correct.

I don't know if you should be messing with the id. There are two layers that the framework runs on. The object level and the display level. EXT JS manages a lot of divs to render the object. If you access the id through the property, then you are not guaranteed to make modifications to the rest of the objects.

Do a getId before and after and it looks like you have changed it, but if you look in the html in Firebug. It didn't change it. Nor should you want to.


In the case of a tabbed panel. There is another div used for the tab, that when you select this, it is going to set the visibility of the panel that it references, and if you change that div, it doesn't know where to refer to.

Is it necessary to change the id? You could use itemId.

3 Dec 2009, 12:19 PM
Thank you for your reply. That explains why the panel functions differently when the Id is changed.

The application involves a tree structure where each node click takes you to a panel. And once a node.id is changed the corresponding panel id also must be changed since they are related. I have changed the code now to use itemId. Thanks for the tip! Does this apply to a 'treenode' also?


Once a node Id is changed like above will the parent node and other features get affected as well?

3 Dec 2009, 12:39 PM
Well, because a function is exposed in the API to set the Id, I don't see why there should be any problem.

I have a similar application that sends the id to create the panel, but you should send it in the config before the panel renders.

click: {
fn: function(node, e) {
var tab = Ext.ComponentMgr.get(node.id);

// Checking to see if the tab panel exists
if (tab == null) {
var config = {
id: node.id,
xtype: 'gridpanel'
var tabs = Ext.ComponentMgr.get('your_tabbed_panel_id');
tab = tabs.add(cfg);
else {

3 Dec 2009, 12:44 PM
Nevermind. I see what you are doing.

The Tree opens the panel. The panel gets edited, and then updates the database, which then updates the panel, and in turn updates the treenode.

Hmm... Sorry, I couldn't provide more insight into your problem.

By the way, it is important that you don't have multiple 'id' for divs. Otherwise, the object would render in the id you give it.

3 Dec 2009, 12:56 PM
I've tried to explain this issue before, and was told it's some weird use case or something.

What I ended up doing is to extend TabPanel and to have it maintain a hash array of tabs. When I add a tab to the panel, I add to the hash array using a custom ID field in the config. I provide a function to change the custom ID that removes the item from the hash array and re-adds it with the new ID. I also provide a custom find by id function that uses the hash array.

Keeping the custom ID in sync with a custom ID in the tree's nodes is trivial.

The use case I have is you have a tree and a tabpanel. When you click an "Add new item" button, it opens a form in the tabpanel to edit/create the new item. When you click save on that form, it does AJAX to the server and the server stores it in the database, and now it has a unique ID. The tree has to update to show the new "document" and the tab needs a new title other than "new document" and the tab's ID has to be made unique so when you click on the document in the tree, you can activate the tab instead of opening some second new one.

22 Mar 2011, 4:11 AM
Instead of extending TabPanel and dealing with hash, I followed a simple and straight forward way.
When I want to change the Id and the title of the Panel in TabPanel, I just closed it, and add a new one, used some events to achieve this.

In my scenario, I have a tree on the left, and a form in tab panel used to add, change items.

code in tree:

newItem : function() {
/* listened by TabbedPanel. */
return this.fireEvent('newItem', this.ctxNode);
openItem: function() {
/* listened by TabbedPanel. */
return this.fireEvent('openItem', this.ctxNode);
addItem : function(parentId, childId) {
var parentNode = this.getNodeById(parentId);
function () {
var sel = this.getNodeById(childId);
}, this);

and this is the code in TabPanel:

addItemTab : function(record) {
var tab;
if (!(tab = this.getItem(record.childId))) {
tab = new ItemForm(record);
tab.on('addItem', function(attrs) {
Ext.getCmp("Item-tree").addItem(attrs.parentId, attrs.childId);
}, this);
tab.on('close', function(attrs) {
tab = null;

addItem event is fired like this:

this.fireEvent('addItem', {
'oldId': oldId,
'childId' : newId,
'parentId' : parentId