About This Code
Brief Description:
Action Bar Skinner For ExtJS v1.1.1
Contributor:
M D McNamara
Notes Version:
R6.x, R7.x
Last Modified:
17 Dec 2007
OpenNTF Disclaimer
All of the program code and information presented in the OpenNTF.org Code Bin are provided "as-is", and should be used at your own risk. OpenNTF.org make no express or implied warranty about anything in the Code Bin, and OpenNTF.org will not be responsible or liable for any damage caused by the use or misuse of anything from this site. OpenNTF.org makes no guarantees about anything. Please thoroughly test all of the knowledge and code you find here before you attempt to use them in your production environment.
Code / Description
Just a simple little script that'll skin your action bar in a Domino web application document. It's a hack, but it works for me. I've tested it with ExtJS v1.1.1, but it works with v1.1 too. It successfully skins nested menuitem-style actions, too.
I haven't tried it out in many different settings, so I don't know what it'll do in your particular application, so don't come crying to me if it breaks something.
12/17/2007: Included tentative support for action bar positioning (top/bottom).
Usage / Example
Include it in a document along with your other favorite ExtJS plugins/scripts. The init script will run by itself, skinning your action bar to "Ext" style.
Configuration variables are passed in the init() function as an object (you'll see in the code). So far, the only config option is "renderAtBottom", which renders the action bar at the bottom of the default Domino <form>.
(Of course, Requires the ExtJS core files from ExtJS.com.)
Code Attachments
Comments
Posted by Steve Smillie on 12/14/2007 01:55:37 PMEXTMD.ACTIONBAR.js - Very Nice
I just did a quick test and really like the way that it made the Action bar look.
I am going to dive in and see how this works.
Any hints on how to position the "skinned" action bar? (mine is currently below the content of the page)
Posted by Steve Smillie on 12/17/2007 08:31:44 AMEXTMD.ACTIONBAR.js - Very Nice (continued)
I found that the database where I was testing this I was using Ext 2.0 instead of Ext 1.1.1
Works great on Ext 1.1.1
I am now looking at fixing for Ext 2.0. The problem appears to be that the html for the new action bar is not rendered in to the <div id="DOMINO-Toolbar"></div> like it was in Ext 1.1.1
Posted by M D McNamara on 12/17/2007 11:03:37 AMThanks!
First of all, thanks for the positive comments.
Secondly, I've included a new version here that'll let you specify in the init() method whether or not you want the bar to appear at the bottom of the default Domino <form> object.
About Ext 2.0 -- I've been busy designing apps with 1.1.1 up until now, and have only begun to look at the 2.0 API. Hopefully, I'll have something made soon (because I'm definitely going to need this script to work).
I don't think the problem's too hard -- the action bar html probably isn't being rendered because of the changes to the way the 2.0 toolbar object works (is it throwing up any specific errors?).
Posted by Steve Smillie on 12/17/2007 12:24:02 PMRe Thanks!
It renders the HTML perfectly, just not in the "DOMINO-Toolbar" container. It places it below the page content.
I have been playing with some changes, trying to figure where the problem is. I changed the ActionBar object over to the Ext 2.0 method (I think). But the problem might be with the MenuObject object.
Posted by Steve Smillie on 12/17/2007 02:10:21 PMMake it Ext 2.0 Compatible
Here is how to make this work on Ext 2.0:
Replace:
Ext_ActionBar = new Ext.Toolbar(
Ext.DomHelper.insertFirst(Ext.DomQuery.selectNode('form'), '<div id="DOMINO-Toolbar"></div>')
//);
With:
Ext_ActionBar = new Ext.Toolbar({
renderTo: Ext.DomHelper.insertFirst(Ext.DomQuery.selectNode('form'), '<div id="DOMINO-Toolbar"></div>')
});
Posted by M D McNamara on 12/17/2007 03:52:28 PMRe Ext 2.0
That didn't seem so hard after all -- I hope all my Ext 1.1.1 scripts are this easy to convert! I'm getting it converted over right now into some sort of finished form -- I'm modernizing a few of the calls in it, too. Thanks for the help!
Posted by Steve Smillie on 01/21/2008 02:39:28 PMAny thoughts on supporting Action Button Images?
I was look at the code to see what it might take to support Images from the Action Buttons.
It currently adds the images fine but the button is then too tall and things don't look very good.
If you have any ideas for to fix let me know!
Posted by M D McNamara on 02/06/2008 09:00:25 AMRe:
Aye, I tried that, and got the same result -- currently, the standard look of Ext toolbar buttons is too slim to use the standard Domino icons, but I'm pretty sure a smaller set could be used.