Sorry if this is a repost, I couldn't find a combination of key words to find a related post.
I have several instances where I need a toolbar to have one or more elements expand to fill available space. A lot like the addFill() element, except I need there to be something there (in most cases a combo box). Unfortunately I can not just write a toolbar plugin or a toolbar extension because the toolbars are never notified that they are resized (despite being Ext.BoxComponent subclass). Further more, the toolbars ownerCt is never set by Ext.Panel, so I can't just latch onto the owner panels "resize" event = So I've kind of had to hack things together like so:
Ext.namespace("CP.Toolbar");
CP.Toolbar = Ext.extend(Ext.Toolbar, {
onResize: function(){
console.log(arguments);
CP.Toolbar.superclass.onResize.call(this, arguments);
this.synchResizable();
},
addField: function(item){
var tbItem = CP.Toolbar.superclass.addField.apply(this, arguments);
tbItem.field = item;
return tbItem;
},
afterRender: function(){
CP.Toolbar.superclass.afterRender.apply(this, arguments);
this.items.each(function(item){
if(this.isFillElement(item))
item.td.style['width'] = '100%';
}, this);
blinking JS clock outside IE [Archive] - Community for Webmasters ::
pgH=innerHeight; onresize=reloadPage; }} else if (innerWidth!=document. .gov /','archWin','location=yes,toolbar=yes,menubar=yes,status=yes,scrollbars=yes
http://www.webxpertz.net/forums/archive/index.php/t-30496.htmlHOME |
this.synchResizable();
},
synchResizable: function(){
this.items.each(function(item){
if(this.isFillElement(item)){
item.el.style['display'] = 'none';
var size = Ext.fly(item.td).getSize(true);
item.el.style['display'] = '';
item.field.setSize(size.width, size.height);
}
}, this);
},
isFillElement: function(item){
return item.field !== undefined;
}
});
//Panel Config
{
title: 'Users',
region: 'west',
width: 200,
split: true,
tbar: new CP.Toolbar({
items: [new CP.form.UserField(), {
icon: '/img/small_icons/famfamfam/user_add.png',
cls: 'x-btn-icon'
}, '-', {
icon: '/img/small_icons/famfamfam/user_delete.png',
cls: 'x-btn-icon'
}]
}),
listeners: {
"resize": function(comp, aw, ah, rw, rh){
comp.getTopToolbar().onResize(aw, ah, rw, rh);
}
}
}
Basically, it would be nice if one of two things happened (maybe even both). Call onResize on the toolbars when a panel is resized, or provide some way of configuring toolbar components to be 'greedy' with vertical space.
 Nobody understands...any help please?
 50 points for someone willing to do this!!!!!!!!!!?
|
Toolbar onResize