PDA

View Full Version : [2.0a1][CLOSED] BoxWrap ...the blue one

thaiat
10-03-2007, 03:36 PM
Hi Everyone,

I'm not sure this is really a bug cause the initial post see here (http://extjs.com/forum/showthread.php?p=59080#post59080)
was more like a workaround

If you use this workaround against framework 2.0 then it breaks the look of the message box (see the attachement)

Here is a simple code to reproduce the bug:

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="test.js"></script>

</head>
<body id="body">
<div style="width:200px">
<div id="content" >
<h2 class="wrapped" style="text-align: center; font-size: 20px;">This is a title</h2>
<br />
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
</div>

<br/>

<div id="button"></div>

</body>
</html>


and here is the js
Ext.onReady( function() {

// this is the workaround so it's possible to use the following syntax : Ext.get('foo').boxWrap("x-box-blue");
Ext.Element.boxMarkup = '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div><div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"></div></div></div><div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>';

Ext.override(Ext.Element, {
boxWrap : function(cls) {
cls = cls || 'x-box';
var el = Ext.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
el.child('.x-box-mc').dom.appendChild(this.dom);
return el;
}
});

Ext.get("content").boxWrap();
Ext.get('title').boxWrap('x-box-blue');

var o = new Ext.Button({ applyTo:'button',text:'This is my button'});
o.on("click" , function() {
Ext.Msg.alert('Status', 'Changes saved successfully.');
});

});

Also note that the simple syntax Ext.get("foo").boxWrap().replaceClass("x-box" , "x-box-blue"); does not work anymore with 2.0

I hope this can be solved... also another possibility would be to change the HTML so everything is encapsulated into a DIV with style 'x-box-blue' but it would be much simpler to achieve that in the code.


Cheers

Thierry
jsakalos
10-03-2007, 04:29 PM
Thanks for your proposal although it's more feature request than bug report. Anyway we will investigate it and let you know then.
jack.slocum
10-04-2007, 05:36 AM
You have changed the Ext.Element.boxMarkup markup. This is the markup used in several spots in Ext, which is why those spots are going to break.

The whole reason it is set up the way it is, is so completely custom box styling can be applied using the box wrap markup.

I think you are also confused about how to apply x-box-blue. It is a compliment to x-box, not requiring new class names on child elements.

If you remove all your overrides, you can do:

Ext.get("foo").boxWrap().addClass("x-box-blue");

x-box-blue works by just placing the class x-box-blue on a set of elements with default x-box classes.
mystix
10-04-2007, 12:01 PM
If you remove all your overrides, you can do:

Ext.get("foo").boxWrap().addClass("x-box-blue");

x-box-blue works by just placing the class x-box-blue on a set of elements with default x-box classes.

jack, perhaps it would be good to include that example usage in the docs.

the docs are also incorrect

class: A base CSS class to apply to the containing wrapper element (defaults to 'x-box')

and should probably say something like "class: A class name for the containing wrapper element, and a class name prefix for it's related child elements. (defaults to 'x-box')"
mystix
10-04-2007, 11:16 PM
alritey. i've added this to the 1.x doc bugs thread
andrei.neculau
10-13-2007, 10:39 AM
I've started to use Ext2 so I restarted the search for the Ext1.1 threads that I started.

In addition to what mystix said... shouldn't it be the logical thing to just change the box.css to look like this:


.x-box-blue-bl, .x-box-blue-br, .x-box-blue-tl, .x-box-blue-tr {
background-image: url(../images/default/box/corners-blue.gif);
}

.x-box-blue-bc, .x-box-blue-mc, .x-box-blue-tc {
background-image: url(../images/default/box/tb-blue.gif);
}

.x-box-blue-mc {
background-color: #c3daf9;
}

.x-box-blue-mc h3 {
color: #17385b;
}

.x-box-blue-ml {
background-image: url(../images/default/box/l-blue.gif);
}

.x-box-blue-mr {
background-image: url(../images/default/box/r-blue.gif);
}


And thus ignore that Ext.get("foo").boxWrap().addClass("x-box-blue"); in place of the simple Ext.get("foo").boxWrap("x-box-blue");
mystix
10-13-2007, 11:01 AM
haha... here we go again. :)

boxWrap() was designed with customisation in mind. the class string argument it accepts allows you to define a custom name to be used as the class for the main wrapper element, and as a prefix to the corresponding child wrapper elements.

in fact, the fix you suggested in the 1.x thread was the way to go. my "patch" was supplied 'cos i, like you, misunderstood the class string argument to the boxWrap() method, when all that was needed was to add an x-box-blue class to the main boxWrap() container.

the docs have already been updated in SVN with an example usage that should clear up this misunderstanding; as such, there's no need to update the CSS classes as you've suggested unless you've chosen to use "x-box-blue" as the base class name for your main wrapper element.

HTH.
andrei.neculau
10-14-2007, 11:52 AM
no, no.. we won't go again :)

We'll see what comes out of the SVN, and we'll stick to that, and then we can have our own customization if their is a contradiction in logic/purpose.

Just as a conclusion: isn't this something like... promoting ExtJS customization?:) Here we have boxWrap('myclass') which should have CSS like .myclass, .myclass-bl, .myclass-br,... and in the main trunk the usage is implied to be boxWrap().addClass('myclass')

If a method has a specific definition, then why also have some CSS which would not apply to that function without using a "hack"?
MaxT
10-15-2007, 04:40 AM
I understand both methods of being able to apply the x-box-blue styling.

The only thing I'm uncomfortable with is that having an absolute "x-box-blue" style doesn't fit into the concept of having CSS colour schemes. For this reason, I'd never use "x-box-blue" but would have a theme along the lines that Andrei suggested. (Ok, if I really want to optimize my code I can remove the styles I don't want to use, such as x-box-blue, from the default or theme style sheets.)

Maybe worth looking at the number of "absolute" CSS styles that can be applied and see if they are worth maintaining. Even something like "x-box-alt" would be preferable to "x-box-blue" so that it could be themed.

Max