PDA

View Full Version : [RESOLVED][3.0.0] Invisible Button (solved)



patton99
10 Jul 2009, 1:28 PM
Ext version tested:

* Ext 3.0 rev 0




Adapter used:

*
*
ext




Browser versions tested against:

*
*
FF3 (firebug 1.3.0.10 installed)




Operating System:

* Fedora Linux kernal 2.26.1




Description:

* When upgrading to 3.0.0 i had a button disappear from a form. It turns
out the button is there, i can click on it and it expands its
surrounding container like it should, its just not being rendered. If i
stick a textfield in its place, that renders fine.
*
Note that i'm using the css that came with 3.0.0 and that i'm not doing
any custom rendering stuff. Its just a basic button. Changing the
layout to fit or something doesn't help either.

*
I have tried other containers as well to no avail. My first choice would be a VBox actually.






Test Case:






<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test app</title>

<link rel="stylesheet" type="text/css" href="[% c.uri_for('static/css/ext-all.css') %]">
<link rel="stylesheet" type="text/css" href="[% c.uri_for('static/css/xtheme-blue.css') %]">

<script type="text/javascript" src="[% c.uri_for('static/js/ext-base.js') %]"></script>
<script type="text/javascript" src="[% c.uri_for('static/js/ext-all-debug.js') %]"></script>
</head>

<body> <div class="xtheme-blue">
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
xtype: 'panel',
id: 'workspaceContainer',
layout: 'fit',
items: [{
xtype: 'panel',
layout: 'column',
labelWidth: 75,
border: false,
items: [{
columnWidth: .7,
xtype: 'panel',
bodyStyle: 'padding:0 5px 0 0',
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'One',
anchor: '%100'
},{
xtype: 'textfield',
fieldLabel: 'Two',
anchor: '%100'
}]
},{
columnWidth: .3,
xtype: 'panel',
bodyStyle: 'padding:5px 5px',
layout: 'form',
border: false,
items: [{
// invisible button
xtype: 'button',
width: 100,
height: 50,
text: 'Search',
}]
}]
}]
}]
});

viewport.render(document.body);
});
</script>
</div> </body>
</html>

See this URL : http://





Steps to reproduce the problem:

* foo

*
bar




The result that was expected:

* foo

*
bar




The result that occurs instead:

* foo

*
bar




Screenshot or Video:

* attached




Debugging already done:

* none




Possible fix:

* not provided

mjlecomte
10 Jul 2009, 2:15 PM
Thanks for your post.

It would be more helpful if you post in this format:
http://extjs.com/forum/showthread.php?t=71015

A screenshot would be helpful so we know what you are seeing.

Animal
11 Jul 2009, 1:32 AM
Button is a BoxComponent. It must be sized into a two dimensional area either by a layout, or by configuration.

evant
11 Jul 2009, 7:41 PM
Seems quite odd, why are you wrapping a button inside a panel like that? Remember buttons changed in 3.x so that they can support different heights/widths.

Is it possible to post a locally runnable test case?

patton99
13 Jul 2009, 7:54 AM
Okay. First of all let me apologize, I've been using Extjs for about 2 weeks now so i'm definately a Nub.

The idea behind the panel layout in the original code is that i have a handful of search screens that do database searches. Each screen gives a base search class a list of fields it needs, etc, and the base class assembles ext code for it, with a search button attached. Later there will be additional buttons. I would prefer the buttons to be housed in a VBox, but that didn't work. The best luck i've had is with a panel using a fit or form layout.

I've changed the code in the post to be a relatively stand-alone app that demonstrates this behavior. Hopefully also i've attached a screenshot of that here.

evant
13 Jul 2009, 8:27 AM
This doesn't appear to be a bug, I'm not able to reproduce the behaviour you're describing using the sample code. I can see the button rendered correctly to the right of the text fields.

patton99
13 Jul 2009, 8:43 AM
Ack. As you can see from the screenshot above the button isn't displayed for me. Note that the button is in fact there: you can mouse over it, click on it, etc, and the text for it is there, but the button itself doesn't render. In 2.2.1 it did. I copied over the css files from 3.0.0 (again) to no avail. Anyways, i understand that you won't be able to do much if you can't reproduce it. But thanks for trying.

evant
13 Jul 2009, 8:45 AM
Going to move this to help.

patton99
13 Jul 2009, 12:32 PM
The images have changed quite a bit. Updating the image tree fixed this.

Thanks for everybodies help.

mjlecomte
13 Jul 2009, 1:16 PM
Ok, so to clarify, once you updated the images directory the button appearance problem you were having was fixed?

patton99
14 Jul 2009, 6:15 AM
Yes. Apparently the image graphics used to display buttons has changed from 2.2.1. Once I deleted the old images tree from my build and replaced it with the one from 3.0.0 the buttons displayed correctly.

kngai
15 Jul 2009, 10:55 AM
I too was having this exact issue and puzzled me for a good hour. I'm currently in the process of upgrading/debugging to 3.0 from 2.2.1 and I basically forgot to replace the "ext\resources\images\default" folder with the new one in 3.0.
Everything is solved now after doing so.