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:
Code:
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:
Code:
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!