PDA

View Full Version : [2.x] Ext.ux.AdvancedTabPanel v0.1alpha



aurelien
23 Jun 2008, 7:08 AM
I would like to create an extension of tabPanel that provides:
current version 0.1 :
* tab adder (a tab that creates a new tab like I.E.)
* editable title (double click on title makes the title editable)

comming in next versions...
* sortable tabs (by dragging the title)
* customizable icons (like close: refresh, maximize...)

I have a problem with the editable tab item : I've managed to get the double click and switch the title to a input field. But :


the selection (by dragging the mouse or by using [Ctrl] + arrow keys doesn't render (both IE and FF). I think this is linked to the click event catch by the tabPanel.

Further, the rendering of the input field is not perfect, does someone would like to have a look on this ?



Ext.namespace('Ext.ux');

Ext.ux.AdvancedTabPanel = Ext.extend(Ext.TabPanel, {
tabCount: 0,
tabAdderTitle: '+',
tabAdderNewTitle: 'new',
enableTabScroll: true, // default behavior

afterRender: function(){
Ext.ux.AdvancedTabPanel.superclass.afterRender.call(this);

// add the double click event for editable titles
if (this.editable) {
this.strip.on('dblclick', this.onStripDblClick, this);
}

// insert the tab adder
if (this.tabAdder) {
var tab = new Ext.Panel({ id: this.id + '-adder' });

tab.setTitle(this.tabAdderTitle);
if (this.tabAdderIconCls) { tab.setIconClass(this.tabAdderIconCls); }

this.add(tab);
}
},

onStripMouseDown: function(e) {
var t = this.findTargets(e);
if (t.item && t.item.id != this.id + '-adder') {
if(!e.getTarget('.ux-tab-strip-field', this.strip)) {
console.log('call superclass');
Ext.ux.AdvancedTabPanel.superclass.onStripMouseDown.call(this, e);
} else {
e.stopEvent();
}
}

},

onStripClick : function(e){
var t = this.findTargets(e);
if (t.item && t.item.id == this.id + '-adder') {
this.tabCount++;
this.insert(this.items.length - 1, {
title: this.tabAdderNewTitle + this.tabCount,
closable: true,
autoScroll:true,
html: 'nouvel onglet<br>'
}).show();

} else {
if(!e.getTarget('.ux-tab-strip-field', this.strip)) {
Ext.ux.AdvancedTabPanel.superclass.onStripClick.call(this, e);
}
}
},

onStripDblClick : function(e){
// the field is not currently edited?
var t = this.findTargets(e);
if (t.el && !e.getTarget('.ux-tab-strip-field', this.strip)) {
// get the text element clicked

var el = Ext.fly(Ext.fly(t.el).child('span.x-tab-strip-text', true));
var title = el.dom.innerHTML;

// create the editable field and insert it
var f = new Ext.form.TextField({
restore: function() {
Ext.DomHelper.overwrite(span.parentNode, this.getValue());
},
width: Ext.get(el).getWidth(),
height: 13,
style: 'padding:0 2px 0 2px;margin:0;border:0 none;font-size:11px;',
selectOnFocus: true,
value: title
});

var span = Ext.DomHelper.overwrite(el, {tag:'span', cls: 'ux-tab-strip-field'});
// render the editable field and bind events
f.render(span);

f.on("specialkey", function(field, e){
if(e.getKey() == e.ENTER){
e.preventDefault();
field.el.dom.blur();
}
if(e.getKey() == e.ESC){
field.reset();
field.el.dom.blur();
}
});
f.on("blur", function(field){
field.restore();
});

f.focus(true);
}
}
});

// register xtype
Ext.reg('ux-advancedtabpanel', Ext.ux.AdvancedTabPanel);


Ext.onReady(function(){

var tabs = new Ext.ux.AdvancedTabPanel({
renderTo:'ct'
,id:'myTabs'
,width:600
,height:200
,tabPosition:'top'
,activeTab:0
,items:[
{title: 'Tab Number 1'},
{title: 'Tab Number 2'},
{title: 'Tab Number 3'}
],
tabAdder: true,
tabAdderTitle: '&nbsp;',
tabAdderIconCls: 'ux-tab-add',
tabAdderNewTitle: 'custom label ',
editable: true
});

});




.ux-tab-add {
margin-left: 8px; /* because of the nbsp; at the right of the icon... */
background-image: url( tab_add.gif ) !important;
}

The attached zip file would work if you unzip it in your examples directory of ExtJS.

ankri
30 Jun 2008, 2:43 PM
Hi,

I really love this plugin. I had almost the same idea as you had: I wanted to make the title of a normal panel editable on click and your solution really helped me a lot, thanks!

Furthermore I had the same problem with selecting the text in the textfield, but I found a solution:

You cannot select the text, beacause the header has a css-class called "x-unselectable".

change your afterRender:



afterRender : function()
{
Ext.ux.PanelEditableTitle.superclass.afterRender.call(this);

this.header.removeClass("x-unselectable");
this.header.dom.style.cssText = "";

// ... your code
}
I hope there is no problem with overwriting the style of the header.

-
ankri

PS: As soon as I finish my plugin, I will publish (http://extjs.com/forum/showthread.php?t=40042) it in the forums.