PDA

View Full Version : Using toolbar on CMS edit page



666ragez666
16 Sep 2009, 7:15 PM
Hi Everyone,

Here come my situation and how I deal with it, basically I have made a CMS system which behave like flickr/facebook/myspace. The user can point and click on some part of the article and edit them (title, paragraph, upload images, etc...).

To achieve this, I have used some toolbar attached to HTML elements (div, img, p), when the user hover on that html elements the toolbar appear and the user can do some action on that element. So far so good, the only problem I ran into problem of alignment and I had to call Ext.EventManager.fireResize(); every time the layout of the content change to realign all the toolbar. so is there a good way to align hided elements to an another ? Right now I use a dodgy trick where I show the toolbar align them and rehide them, you cannot see in the browser but that's definitely a hack.

The system is working great but suffer of poor performance when there is many editable elements (~10), I am wondering if the code don't look into the fireResize event infinitely.

So here come my question would someone had a better way to do it, or have a better way to build the UI?

Sorry for the long post and hoping someone would be able to helps:D

following the code of my "inline" toolbar


Ext.Container.LAYOUTS['itoolbar'] = Ext.layout.HBoxLayout;


Ext.namespace('Ext.ux');
Ext.ux.InlineToolbar = Ext.extend(Ext.Toolbar, {
constructor: function(config){
config = config || {};

if(config.inlineElement){
if(typeof config.inlineElement == "string" ){
this.inlineEl = Ext.fly(config.inlineElement);
} else if(config.inlineElement.tagName) { // dom
this.inlineEl = new Ext.Element(config.inlineElement);
} else {
this.inlineEl = config.inlineElement;
}
} else {
throw new Exception('no element to hook specified!');
}
this.inlineEl.bar = this;
this.inlineEl.hover(function(){

this.show();
this.globalHovered = true;
if(!this.initWidth){

var last = this.items.last();
var a = this.el.getBox();
var b = last.el.getBox();

this.el.setWidth((b.x - a.x) + b.width);
this.initWidth = true;
this.el.alignTo(this.inlineElement.id,this.align, [ 0 , 0 ]);
}
}, function(){
this.hide();
this.globalHovered = false;
}, this);

Ext.ux.InlineToolbar.superclass.constructor.apply(this, arguments);
}
,initComponent: function(){
cfg = {
renderTo: document.body

}

Ext.apply(this,cfg);
Ext.ux.InlineToolbar.superclass.initComponent.apply(this, arguments);
}
,onRender: function(){
Ext.ux.InlineToolbar.superclass.onRender.apply(this, arguments);
this.align = this.align || 'tl';

this.el.hover(function(){
this.show();
} , function(){
if(this.globalHovered == false){
this.hide();
}
}, this);

Ext.EventManager.onWindowResize(function(){
this.show();
if(this.inlineElement.id){
try {
this.el.alignTo(this.inlineElement.id,this.align, [ 0 , 0 ]);
}
catch(e){
}
this.hide();
}
this.initWidth = false;
}, this);

this.hide();



}
});

Ext.reg('itoolbar', Ext.ux.InlineToolbar)

666ragez666
27 Sep 2009, 8:07 PM
~BUMP~,

I don't know if my question was too long or no one have interest in that? :((

Condor
27 Sep 2009, 10:07 PM
You might need to add hideMode:'offsets', because sizing in a display:none element doesn't work correctly.

666ragez666
28 Sep 2009, 5:08 PM
Thank you Condor,

I will try that, at same time I think I have found the cause of the poor performance, I happen to use the 'scroll' event on a panel to realign all the toolbar. Adding a DelayedTask really helped firefox to perform well, so with your advice and the patch I managed to code yesterday I think we are almost perfect :D