PDA

View Full Version : div.show() does not seem to work



n0ha
5 Jul 2007, 11:18 AM
Hello,

I started to play a little with ExtJS today, and decided that the best way to learn my way around it would be to try to build my own app with it. After a few hours of fun, I just cannot move further with this little problem:

My little app is a clone of the Feed Reader 2.0 example application. I have a toolbar with two buttons:



// setup project sidebar's toolbar
projectListToolbar = new Ext.Toolbar('list-controls');
projectListToolbar.add(
new Ext.Toolbar.Button({
id: 'add-project-button',
text: 'Add New',
tooltip: 'Add a new Project',
handler: this.showAddProject.createDelegate(this)
}),
new Ext.Toolbar.Button({
id: 'remove-project-button',
text: 'Remove',
tooltip: 'Remove selected Project'
})
);


I then have a div with a dialog for entering the project's name.



<div id="add-project" style="visibility:hidden;">
<img alt="tab-close" id="add-project-close" />
<p class="active-msg">Please, enter name of the new project you wish to create:</p>
<input type="text" id="add-project-name" name="project-name" class="input-text" />
<input type="button" id="add-project-create" value="Create Project" />
</div>


Obviously, I want to show that little div on the Add Project button's onclick event. Like this:



showAddProject: function() {
console.log(addProject);
addProject.alignTo('list-controls', 'tl', [3,3]);
addProject.show();
}


My problem is, the div does not show up. In Firebug's console, I see the addProject object like this:


Object dom=div#add-project id=add-project visibilityMode=1

It looks good to me. The showAddProject function is certainly being called, and the div's show() method is being called as well. There seems to be something wrong with the position of the div, but I just can't figure it out.

I tried to copy-paste various snippets dealing with the div from the Feed Reader but nothing helped. I test on FF2.0 on Linux.

I can provide full sources and/or screenshots if needed. Thanks a lot in advance for your help.
-n0ha

BernardChhun
5 Jul 2007, 12:05 PM
I just copied and paste your html and called the show() function on it...and it works dude. :-|

show us the whole html will ya? My guess for now is that some other DOM object has a higher z-index value than your div.

a live link would be better :)

n0ha
5 Jul 2007, 2:23 PM
Hi,

Here's the whole html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Easy Project List</title>

<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="projectlist.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../resources/css/ytheme-vista.css">
<link rel="stylesheet" type="text/css" href="projectlist.css">
</head>
<body>
<div id="header">My Easy Project List</div>
<div id="project-list">
<div id="list-controls"></div>
</div>
<div id="main">
<div id="controls"></div>
<div id="project-description"></div>
</div>
<div id="add-project" style="visibility:hidden;">
<img alt="tab-close" id="add-project-close" />
<p class="active-msg">Please, enter name of the new project you wish to create:</p>
<input type="text" id="add-project-name" name="project-name" class="input-text" />
<input type="button" id="add-project-create" value="Create Project" />
</div>
</body>
</html>