PDA

View Full Version : Toolbar with title and subtitle



bluehipy
26 Apr 2012, 6:15 AM
I was in need of a toolbar which would allow a title and a subtitle with some control on each ones text and style.

Title implementation:

Ext.define( 'MyApp.view.SplitTitle',
{
extend:'Ext.Component',
xtype:'splittitle',
config:{
title:'',
detail:'',
titleClass:'',
detailClass:'',
baseCls:'x-splittitle',
centered:true
},
updateTitle:function(newValue,oldValue)
{
this.titleEl.setHtml(newValue);
return newValue;
},
updateDetail:function(newValue,oldValue)
{
this.detailEl.setHtml(newValue);
return newValue;
},
updateTitleClass:function(newValue,oldValue)
{
if(oldValue)
{
this.titleEl.removeCls(oldValue);
}
this.titleEl.addCls(newValue);
return newValue;
},
updateDetailClass:function(newValue,oldValue)
{
if(oldValue)
{
this.detailEl.removeCls(oldValue);
}
this.detailEl.addCls(newValue);
return newValue;
},
getTemplate: function() {
return [
{
reference:'titleEl',
className: this.getTitleClass(),
tag:'span'
},
{
tag:'br' //ha ha :))
},
{
reference:'detailEl',
className: this.getDetailClass(),
tag:'span'
}
];
}
}
);

Toolbar implementation:

Ext.define(
'MyApp.view.DetailToolbar',
{
extend:'Ext.Toolbar',
requires:['MyApp.view.SplitTitle'],
xtype:'detailtoolbar',
config:{
splitTitle:true,
title:'',
detail:'',
detailClass:'x-splittitle-detail',
titleClass:'x-splittitle-title'

},
applyTitle: function(value) {
this.getSplitTitle().setTitle(value);
},
applyDetail: function(value) {
this.getSplitTitle().setDetail(value);
},
applyTitleClass: function(value) {
this.getSplitTitle().setTitleClass(value);
},
applyDetailClass: function(value) {
this.getSplitTitle().setDetailClass(value);
},

applySplitTitle:function(cfg)
{
return Ext.factory(cfg, MyApp.view.SplitTitle, this.getSplitTitle());
},
updateSplitTitle: function(newTitle, oldTitle) {
if (newTitle) {
this.add(newTitle);
this.getLayout().setItemFlex(newTitle, 1);
}

if (oldTitle) {
oldTitle.destroy();
}
}
}
);

A test case : http://www.senchafiddle.com/#vJdBT


I am not really happy with the result, I guess the "br" can be skipped, with some better css adjustments.
I would be glad to hear some improvement ideas.

Thank you!

intellix
27 Apr 2012, 1:47 AM
Great, I was going to create something like this. Would be nice to have it included in the framework as standard as I would have thought it was common practise to have subtext on a page.

For instance I have a registration page with different steps (cards) so would like:

Registration
Step 1/5

Registration
Step 2/5

etc