View Full Version : [FIXED-200] tabTip missing

4 Aug 2010, 7:01 PM
I noticed that in the EXT Designer the contentEl property is missing (or at least I cannot find it). What I was hoping to do is reference a div tag ID whose content is generated by the server without ajax and before the entire page is sent to the browser.
With this in mind I have two questions :

1) The sample that I was working with generates 4 files


Here is some of the code generated by eXt Designer

MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
frame: true,
footer: true,
id: 'myTest',
initComponent: function() {

I noticed that that if I place code like this in the MyPanel.js the panel now shows the contend of my div tag. I actually placed it in the predefined funtion initComponent after the method call MyPanel.superclass.initComponent.call(this);

var x = Ext.getCmp("myTest");
x.contentEl = "madmax";

Is this the correct way to do this or is there another way?

BTW I can also just added the contentEL config option to the generated JS file directly but the same problem will occur when I save the project with the designer my changes are gone, which is understandable

2) The same is true for the HTML page that ext designer generates the content will always be overridden. Therefore, if I want to create DIV tags in the body that will be bound to my components at runtime what is the proper strategy to do this?

This works but everytime the project is saved with EXT designer I will loose my modifications which is also understandable.

<div id="madmax">xxxxxxxxxxx</div>

4 Aug 2010, 7:51 PM
Hi Max,

contentEl has been omitted on purpose. If we provide contentEl, it will break the rendering of the Design canvas. We may offer it in a future release and simply strip out the contentEl configuration before rendering to the Design canvas. But, because you can add it manually in the exported .js file (much like you did in #1 above), it isn't a high priority. Your logic for adding it is precisely what you can do. My only added suggestion is to look into using "ref"s, or specifically the "autoRef" config in the Designer, rather than using Ext.getCmp(). It's cleaner :-)

For #2, I have been suggesting to make a copy of the HTML file and to modify/load the copy instead of the original. If anything changes about the original after an export (e.g., another top-level component js file is included) then the modifications can be duplicated in the copy...but it doesn't happen often, literally only when new top-level components are created.

Hope that helps.

4 Aug 2010, 8:35 PM
Hi Jared,

Thanks for the quick reply and suggestion and yes it is much cleaner, asuming I implemented it the way you are suggesting. So I went from this:

var x = Ext.getCmp("myTest");
x.contentEl = "madmax";


this.MyPanel.contentEl = "madmax";

I have another question I also noticed that the TabTip looks to be missing from the properties of EXT Designer. In this case should I employ the same method? or did I misconfigure something?

Thanks again


4 Aug 2010, 10:03 PM
Hi Max,

tabTip is accidentally missing...thanks for reporting this. I'll open a ticket and get it in there for the next release. With that said, you can use the same technique as you did for contentEl, and it should work for you.


P.S. Yep, your "ref" looks good to me :-)