PDA

View Full Version : Scalable (wrapping) Toolbar for when toolbar needs to wrap



Rowan
3 Sep 2007, 6:06 AM
Here's a little extension I knocked up today, i'm using an HTML editor that I needed to work when it's not very wide, so the buttons need to wrap (booyakasha and all that)




Ext.ux.ScalableToolbar = function(el, config){
Ext.ux.ScalableToolbar.superclass.constructor.call(this, el, config);
};

Ext.extend(Ext.ux.ScalableToolbar, Ext.Toolbar, {

render : function(ct){
this.el = Ext.get(ct);
if(this.cls){
this.el.addClass(this.cls);
}

this.el.update('<div class="x-toolbar x-small-editor"><div class="tbHolder"></div></div>');
this.tr = this.el.child("div.tbHolder", true);
var autoId = 0;
this.items = new Ext.util.MixedCollection(false, function(o){
return o.id || ("item" + (++autoId));
});
if(this.buttons){
this.add.apply(this, this.buttons);
delete this.buttons;
}
},

addClear : function(){
var clear = document.createElement('div');
clear.className='clear';

this.tr.appendChild(clear);
},

nextBlock : function(){
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");

table.cellspacing='0';
table.className='x-tbLeft';

table.appendChild(tr);
tr.appendChild(td);
this.tr.appendChild(table);

return td;
}
});

Add the following CSS




.clear {
clear:both;
width:auto;
min-height:0 !important;
height:0 !important;
line-height:0 !important;
font-size:0 !important;
float:none !important;
padding:0 !important;
border:0 !important;
}

/* toolbar overrides */
.x-tbLeft {
float:left;
height:25px;
}

.x-toolbar{
background:#C9DEFA url(/CMS/js/EXT/resources/images/default/layout/panel-title-light-bg.gif) repeat-x;
}

The bottom style is used because the background image is only 98px high

use in the following fashion




var tb = new Ext.ux.ScalableToolbar(this.wrap.dom.firstChild);
tb.el.on('click', function(e){
e.preventDefault();
});

tb.add(
btn('insertparagraph',false),
'-'
);

if(this.enableFont && !Ext.isSafari){
this.fontSelect = tb.el.createChild({
tag:'select',
tabIndex: -1,
cls:'x-font-select',
html: this.createFontOptions()
});
this.fontSelect.on('change', function(){
var font = this.fontSelect.dom.value;
this.relayCmd('fontname', font);
this.deferFocus();
}, this);
tb.add(
this.fontSelect.dom,
'-'
);
};

if(this.enableFormat){
tb.add(
btn('bold'),
btn('italic'),
btn('underline')
);
};

if(this.enableFontSize){
tb.add(
'-',
btn('increasefontsize', false, this.adjustFont),
btn('decreasefontsize', false, this.adjustFont)
);
};

if(this.enableColors){
tb.add(
'-', {
id:'forecolor',
cls:'x-btn-icon x-edit-forecolor',
clickEvent:'mousedown',
tooltip: editor.buttonTips['forecolor'] || undefined,
tabIndex:-1,
menu : new Ext.menu.ColorMenu({
allowReselect: true,
focus: Ext.emptyFn,
value:'000000',
plain:true,
selectHandler: function(cp, color){
this.execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
this.deferFocus();
},
scope: this,
clickEvent:'mousedown'
})
}, {
id:'backcolor',
cls:'x-btn-icon x-edit-backcolor',
clickEvent:'mousedown',
tooltip: editor.buttonTips['backcolor'] || undefined,
tabIndex:-1,
menu : new Ext.menu.ColorMenu({
focus: Ext.emptyFn,
value:'FFFFFF',
plain:true,
allowReselect: true,
selectHandler: function(cp, color){
if(Ext.isGecko){
this.execCmd('useCSS', false);
this.execCmd('hilitecolor', color);
this.execCmd('useCSS', true);
this.deferFocus();
}else{
this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isSafari || Ext.isIE ? '#'+color : color);
this.deferFocus();
}
},
scope:this,
clickEvent:'mousedown'
})
}
);
};

if(this.enableAlignments){
tb.add(
'-',
btn('justifyleft'),
btn('justifycenter'),
btn('justifyright')
);
};

if(!Ext.isSafari){
if(this.enableLinks){
tb.add(
'-',
btn('createlink', false, this.createLink)
);
};

if(this.enableLists){
tb.add(
'-',
btn('insertorderedlist'),
btn('insertunorderedlist')
);
}
if(this.enableSourceEdit){
tb.add(
'-',
btn('sourceedit', true, function(btn){
this.toggleSourceEdit(btn.pressed);
})
);
}
}
tb.addClear();//after all buttons are added insert this line
this.tb = tb;
I'm using the HTML editor with it but it should work with any elements. I hadn't added the UX namespace before writing this post so that may blow it up.

Rowan
3 Sep 2007, 6:13 AM
This could be cleaned up to use blocks of floats around grouped items so that things like B/I/U are always together but I just needed it to wrap.

We could convert this completely to Div based too but I thought the easier the superclass is the less effort we have to go to when we upgrade.

Hope it works for you.

Rowan

PFM
3 Sep 2007, 6:47 AM
Nice Rowan! thanks a lot... this will come in handy

Rowan
4 Sep 2007, 10:12 AM
The remove function may need looking at, I just needed it to wrap but it should be pretty easy to extend it to work with that.