PDA

View Full Version : button display problem after upgrade



pdchapin
25 Nov 2009, 6:43 AM
I've just upgraded from 2.something to 3.0.3 and everything went better than I expected. However, I've run into a strange problem with the way the buttons are being displayed. As you can see

http://www3.amherst.edu/%7Epdchapin/images/problem.jpg
I've managed to acquire some odd dots along the edges. I'm working on firefox with firebug and if I look at the html I find


<tbody class="x-btn-small x-btn-icon-small-left"> + <tr>
-<tr>
-<td class="x-btn-ml">
<i>?</i>
</td>

+<td class="x-btn-mc">

<td class="x-btn-mr">
<i>?</i>
</td>

</tr>
+<tr>
</tbody>
If I then look at the css <td class="x-btn-ml"> I find


.x-panel-fbar td, .x-panel-fbar span, .x-panel-fbar input, .x-panel-fbar div, .x-panel-fbar select, .x-panel-fbar label {
-x-system-font:none;
font-family:arial,tahoma,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;


}
ext-all.css (line 6490)
.x-panel-fbar td, .x-panel-fbar span, .x-panel-fbar input, .x-panel-fbar div, .x-panel-fbar select, .x-panel-fbar label {
white-space:nowrap;


}
ext-all.css (line 4065)
.x-btn td {
padding:0 !important;


}
ext-all.css (line 1426)

.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
background-image:url(/ext-3.0.3/resources/images/default/button/btn.gif);


}
ext-all.css (line 5412)
.x-btn-ml {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none no-repeat scroll 0 -24px;
width:3px;


}
ext-all.css (line 1583)
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0;


}

plus some other inherited values further up the food chain that have mostly been replaced. I also have a problem in that the close icon in the upper right on my windows isn't displaying correctly and has the same strange <i>?</i> but I'm assuming that this is the same basic problem.

Since everything seems to work correctly, and look correct, I don't think I have any fundamental problem here; just an oddity thats causing problems in very specific situations.

Is there some doc somewhere on changing versions?

25 Nov 2009, 6:46 AM
browser/os? Code to reproduce this?

pdchapin
30 Nov 2009, 7:17 AM
I'm working with Firefox, version 3.5.5 on Windows 7. The relevant code is


function login(tcallback) {
callback = tcallback;

if (!loginForm) {
loginForm = new Ext.FormPanel({
labelWidth:80,
closeAction:'hide',
defaultType:'textfield',
frame:true,
items:[{
xtype:'textfield',
fieldLabel:USERNAME,
width:240
},{
fieldLabel:PASSWORD,
xtype:'textfield',
inputType:"password",
width:240
}]
}); // End of form
} else {
loginForm.items.get(0).setValue('');
loginForm.items.get(1).setValue('');
}

loginWindow = new Ext.Window({
title:'Login',
modal:true,
width:400, // Width of form box
draggable: true,
closable: false,
resizable: false,
items:loginForm,
buttons:[{
text:LOGIN,
handler:function() {
checkLogin();
}
},{
text:CANCEL,
handler:function() {
loginApp.loginStatus['status'] = 0;
callback(loginApp.loginStatus);
loginWindow.hide();
}
}]
});

loginWindow.show();
loginForm.items.get(0).focus('', 10);
}Nothing fancy going on here. This is exactly the same code that worked with the 2.x version of Extjs. However, since I originally wrote this, other problems have appeared, such as the icons in the htmleditor fields.

To see what the button problem looks like you can go to http://www.ats.amherst.edu/MapApp and click on the login link.

30 Nov 2009, 7:41 AM
first:

try Ext JS 3.0.3 if you have not done so.
Try removing the UTF8 charset from your site.



296 // private
297 onRender : function(ct, position){
298 if(!this.template){
299 if(!Ext.Button.buttonTemplate){
300 // hideous table template
301 Ext.Button.buttonTemplate = new Ext.Template(
302 '<table cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
303 '<tr><td class="x-btn-tl"><i>&#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&#160;</i></td></tr>',
304 '<tr><td class="x-btn-ml"><i>&#160;</i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td>
305 '<tr><td class="x-btn-bl"><i>&#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&#160;</i></td></tr>',
306 '</tbody></table>');
307 Ext.Button.buttonTemplate.compile();
308 }
309 this.template = Ext.Button.buttonTemplate;
310 }
311
312 var btn, targs = this.getTemplateArgs();
313
314 if(position){
315 btn = this.template.insertBefore(position, targs, true);
316 }else{
317 btn = this.template.append(ct, targs, true);
318 }


That &#160; is a non-breaking space:


pecial Character Cases:
HTML Reserved characters: (Less than, Greater than, Ampersand and Quotation mark)

* Use character entity names
* The quotation mark ('&quot;') character entity was retracted from HTML 3.2 (it exists in HTML 2.0, 3.0 and 4.0 though.) Safest use of this character is its numbered version.

Newer commonly used entities:

* Copyright and Registered Trademark (&#169; and &#174;):
Most browsers now support the named entity versions, but it is probably a bit safer to use the numbers instead.
* Non-breaking space (&#160;):
The named version is covered by most browsers now, but to be absolutely sure use the number instead.
http://www.ascii.cl/htmlcodes.htm

pdchapin
1 Dec 2009, 8:05 AM
The problem appears to be with <i>?</i>. My browser is set to UTF-8 and changing that causes the problem to go away. The problem is that I do a lot of work with Japanese and Chinese so that's not really a good, long-term solution.

1 Dec 2009, 8:12 AM
I would create a bug report and link this thread.

lorezyra
2 Dec 2009, 8:58 PM
The problem appears to be with <i>?</i>. My browser is set to UTF-8 and changing that causes the problem to go away. The problem is that I do a lot of work with Japanese and Chinese so that's not really a good, long-term solution.


I had this same problem when I updated my php.ini config file... It didn't matter if I specified the content-type with UTF-8 in the header command of each php page... But when I changed my php.ini file to:


default_charset = UTF-8; everything displayed correctly...

Also, if your back-end is running PHP, then the following will also help with displaying non-English character based websites...



$setloc= setlocale(LC_ALL, 'ja_JP.UTF8', 'ja_JP.eucJP', 'en_US.UTF8');
date_default_timezone_set('Asia/Tokyo');

$phpV=(float) substr(phpversion(),0,strpos(phpversion(), '.',2));
//if(version_compare(PHP_VERSION, '5.2.0', '>')) {
if($phpV>=5.2){
mb_internal_encoding("UTF-8");// add support for Asian languages
mb_regex_encoding("UTF-8");
}//end if PHP is too old

// if running DB:
$dbh = sql_connect($baseConfig->DB_HOST, $baseConfig->DB_USERNAME, $baseConfig->DB_PASSWORD, $baseConfig->DB_NAME);
$result = sql_query("set names 'utf8'", $dbh);


Hope this helps.

Animal
3 Dec 2009, 7:24 AM
The problem appears to be with <i>?</i>. My browser is set to UTF-8 and changing that causes the problem to go away. The problem is that I do a lot of work with Japanese and Chinese so that's not really a good, long-term solution.

Why do you think UTF8 not good? It is a character encoding scheme which is able to encode the whole Unicode character set into a byte stream for placing into an HTTP packet.

Animal
3 Dec 2009, 7:35 AM
I don't think those NBSPs need to be there.

Try the following in your overrides file:



Ext.Button.buttonTemplate = new Ext.Template(
'<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
'<tr><td class="x-btn-tl"></td><td class="x-btn-tc"></td><td class="x-btn-tr"></td></tr>',
'<tr><td class="x-btn-ml"></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"></td></tr>',
'<tr><td class="x-btn-bl"></td><td class="x-btn-bc"></td><td class="x-btn-br"></td></tr>',
'</tbody></table>');
Ext.Button.buttonTemplate.compile();


Could be that they are only needed in crap browsers like IE6 which I don't have. The above works fine in IE8, FF and Chrome.

pdchapin
3 Dec 2009, 8:37 AM
Your override solved the one problem, but the button text disappeared. Also some of my windows were messed up. I was probably putting it the wrong place. I don't have an override file since I generally avoid messing with the code for utilities like this.

What did work was going into the ext-all-debug.js and removing the code there. Now my only worry is that it's going to bite me someplace else. I should probably figure out how to create a proper override file.

Animal
3 Dec 2009, 8:43 AM
The substitution numbers are different between 3.1 (Where I took that from) and 3.0.3

You can extract the template from your own version of Ext.Button and remove the <i>...</i> elements

Animal
3 Dec 2009, 8:43 AM
You don't change ext-all-debug.js!

Just set the value as you want it!

pdchapin
3 Dec 2009, 8:46 AM
I've discovered that I still have problems with the window close icon and the toolbar for htmleditor fields. There needs to be a generic solution to this.

pdchapin
3 Dec 2009, 8:52 AM
I'm just going to go back to 2.2. It works fine and I haven't seen anything in 3 that I need.