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
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