PDA

View Full Version : Editable header of tabPanel



babaqga123
20 Sep 2010, 5:40 AM
Hi, I am wondering if there is a way to make a tabPanel header/footer editable.

I imagine it would be something like setting the contentEditable property of the header by a custom css, but I seem to be stuck. Any pointers?



xtype:'tabpanel',
id:'tabPanel,
items:
[
{
id:'PanelWithCustomHeader',
//here be code that makes the custom header, something like headerCfg: ....
},
//etc....
]

beegeedee
20 Sep 2010, 6:00 AM
Do you want to actually be able to type into the header or click and use a form?

babaqga123
20 Sep 2010, 6:04 AM
I wanna be able to actually type into the header of the panel.

beegeedee
20 Sep 2010, 6:13 AM
Well, it's easy enough to dynamically change the content of something via the DOM, don't know about using extJS controls to do it.

What you could do is use the headerCfg to create your custom header - styling should be easy enough. In there you could have a div with the content you want as editable, assuming just text only and no formatting etc. Attach an onclick and in that onclick you change the content of the div to be a textbox, transparent background, no border. You could even have a little icon or something when you mouseover that you have to click on - personal preference I guess.

Catch key presses for return to finish editing and also blur so clicking away will finish and change the content of the header.

You'd also need something to save the new value somewhere but that would depend on the implementation.

Sound like the kind of thing you're looking for?

babaqga
20 Sep 2010, 6:21 AM
Correct, it is exactly what I need, but how do I create a listener for the header, how do I refer to it?
If I use the default xtype:'tabpanel' I have only the headerCfg property for the header. I don't see any events connected to it.
I would want first the header to throw some onClick event, then, ya, to become a transparent textbox and then be editable.
Anywho, how do I refer to the header at all?
How do I set what type of input it is?
It looks to me as if by default it is a list item. To change it, I assume I should use something like:

headercfg:{
tag:'?',
cls: 'x-panel-header',
//moreproperties
}

beegeedee
20 Sep 2010, 6:32 AM
The header, as far as I can see, is a DomHelper and has an html propert exposed. So, in theory, something like this would work:



// for the panel
new Ext.Panel({
headerCfg: {
useDom: true,
html: "<div onclick=\"InitClick(event, this)\">Content Here</div>"
}
});

// and the function
function InitClick(evt,ctl) {
evt=evt?evt:event;
tgt=Ext.isIE?evt.srcElement:evt.target;
tgt.innerHTML="<input type=\"text\" style=\"border:0px;width:100%;height:100%;background-color:transparent;\" onblur=\"LoseFocusEvent(event,this)\" onkeypress=\"IsKeyReturn(event,this)\" id=\"magictxtControl\" value=\""+tgt.innerHTML+"\" />";
}

This would be a starting point and it wouldn't/shouldn't take much to finish it. The LoseFocusEvent should take the value property and pop it into the DIV, and IsKeyReturn checks the charCode/keyCode - some browser specific stuff there. Formatting may need to be played with but this should mostly do it.

Let me know how you get on.

babaqga123
20 Sep 2010, 7:41 AM
I forgot to mention that I want actually to edit the headers of the tabs in the tab panel. Seems to me that they are just the headers of the children of the parent tabpanel (and those children by default are simple panels). Therefore, in theory, the following configuration should work:

{
region:'center',
xtype:'tabpanel',
id:'DashboardTabPanel',
layoutOnTabChange:true,
items:
[
{ headerCfg:{
useDom: true,
html: "<div onclick=\"InitClick(event, this)\">Content Here</div>"
},
height:200,
width:200,
frame:false
}
]
}
However, when this panel with a custom header is a child of a tabpanel, nothing happens. The child header is fully empty and not rendered correctly. If, on the other hand, the panel with the custom header is a standalone panel, (not a child of a tabpanel), it works.

I wonder how come?


Edit:
Even if I set the html: property to something like:

html:'blablabal'I get an empty header, like this:
22482

Here is the firebug of the fragment:


<li class="">
<a class="x-tab-strip-close">
</a>
<a href="#" class="x-tab-right">
<em class="x-tab-left">
<span class="x-tab-strip-inner">
<span class="x-tab-strip-text ">
</span>
</span>
</em>
</a>
</li>

For some reason, the header is ignored and replaced with a default header, but with no title (figures...).

beegeedee
20 Sep 2010, 7:56 AM
The principle is the same regardless of the element you wish to edit so yes, it should work just fine. ContentEditable would work too but it has its own issues and I know this technique works with pretty much any browser without too many headaches - been using it since the early days of IE4.

jarlau
20 Sep 2010, 7:18 PM
http://www.extjs.com/forum/showthread.php?82076-TabPanel-tab-title-editor