Borders, Components, and maybe 3.0

[deanna]

In my current project I am finding a need to wrap component level items with rounded borders. I know this doesn't come in the hierarchy till Window, but is there any chance that Borders have been moved to component in 3.0? If not is there by any chance a border decorator object that can apply to anything inherited from component? (If not I know my next subproject)

PS The current client of mine isn't going to purchase the license until after the 3.0 release, so I can't check myself.

Thanks
Deanna

[mjlecomte]

I think you'll just need to skin the css as you want it.

[deanna]

I think you'll just need to skin the css as you want it.

That is what I would like, but Ext.Component/BoxComponent/Container does not a DOM model until the user adds them. But What I need is the 9 point border div's that Ext.Window provides - but I don't want all the overhead of a window, just needs to be a simple Component. If there were a decorator class that could decorate Ext.Component and its ancestors that would do the job, or if Ext.Component had an option to generate the border that would work too. That is what I was asking if anything like that is in 3.0.

[Animal]

frame: true is at the Panel level.

But I rarely use it. In a Viewport based application, you don't put fat, graphicy frames round the regions. For a start, frames in a layout looks weird. I see people do it here, and I reckon it looks weird.

And for another thing, screen real estate is at a premium in our app. We shoehorn a lot of data into the screen, I really don't want application chrome taking up more space than is necessary to describe the app.

[deanna]

frame: true is at the Panel level.

But I rarely use it. In a Viewport based application, you don't put fat, graphicy frames round the regions. For a start, frames in a layout looks weird. I see people do it here, and I reckon it looks weird.

And for another thing, screen real estate is at a premium in our app. We shoehorn a lot of data into the screen, I really don't want application chrome taking up more space than is necessary to describe the app.

I know animal, but when you get comps from a client you do as they ask. There are times when it is what is needed.

Panel is lighter than Window, but still not as light as a BoxComponent when all you need is a rounded border around a paragraph of text.

[Animal]

Actually, I think I've written a basic Box class which has none of the weight of Panel, but is just a BoxComponent with autoEl: 'div' who's onRender calls this.el.boxWrap() (http://extjs.com/deploy/dev/docs/?class=Ext.Element&member=boxWrap)

[pieturp]

Aren't you looking for el.BoxWrap() ?

[deanna]

Aren't you looking for el.BoxWrap() ?

I never thought of looking for it at the Element level, not the most intuitive spot to find it. I'm not at my development computer now. Does that create a 9 point border box?

[mjlecomte]

// special markup used throughout Ext when box wrapping elements
Ext.Element.boxMarkup =
'<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
<div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
<div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

[deanna]

Thanks MJ, Animal, and Pieturp I'll put that to good use. There all the time and I couldn't find it. I was looking in the higher level hierarchy, and since Component has an Element but doesn't inherit from it I didn't think to go there. You work with something for a year, and think you know it and find you can still be surprised.

[Animal]

try this



Ext.ux.Box = Ext.extend(Ext.Container, {
initComponent: function() {
this.autoEl = {};
Ext.ux.Box.superclass.initComponent.apply(this, arguments);
},

onRender: function(c) {
Ext.ux.Box.superclass.onRender.apply(this, arguments);
this.body = this.layoutTarget = this.el;
this.el = this.body.boxWrap();
this.bwrap = Ext.get(this.body.dom.parentNode);
this.top = this.el.child('.x-box-tl');
this.bottom = this.el.child('.x-box-bl');
this.ml = this.el.child('.x-box-ml');
this.mr = this.ml.child('.x-box-mr');
this.mc = this.mr.child('.x-box-mc');
if (this.title) {
this.header = this.bwrap.createChild({tag:'h3', html: this.title }, this.body);
}
if (this.resizable) {
this.resizer = new Ext.Resizable(this.el, {handles:'s,se,e'});
}
},

getLayoutTarget: function() {
return this.body;
},

getFrameHeight: function() {
var result = 0;
if (this.rendered) {
result = this.el.getPadding('tb') + this.top.getHeight() + this.bottom.getHeight() + this.mc.getPadding('tb');
if (this.header) {
result += this.header.getHeight();
}
}
return result;
},

getFrameWidth: function() {
var result = 0;
if (this.rendered) {
result = this.el.getPadding('lr') + this.ml.getPadding('lr') + this.mc.getPadding('lr') + this.mr.getPadding('lr');
}
return result;
},

onResize : function(w, h){
if(w !== undefined || h !== undefined){
if(typeof w == 'number'){
this.body.setWidth(w - this.getFrameWidth());
}else if(w == 'auto'){
this.body.setWidth(w);
}

if(typeof h == 'number'){
this.body.setHeight(h - this.getFrameHeight());
}else if(h == 'auto'){
this.body.setHeight(h);
}
}
}
});
Ext.reg('ux-box', Ext.ux.Box);