PDA

View Full Version : Incorporating Saki's ExtJs extensions



r_honey
May 01, 2009, 1:35 PM
This is just a wish. I have checked out Saki's ExtJs extensions (No doubt you know Saki, don't you) at:
http://extjs.eu/

I am beginning to use some of them in my Web apss. But again, writing so much JS directly is a pain. Would the Coolite core team look at adding Saki's extensions to the Coolite toolkit?
It is LGPL licensed I believe. Most of the extensions (rather all of them) are extremely useful in day-to-day work.

If that is not so, I would request a Button column for the GridPanel. I checked out that ExtJs does not support it directly. I know I can implement it using a renderer function on the column, but right now I am working on finer details on how to know which row button was clicked on the server-side. If I get it going, I would submit to you people so that others can use it also.

It would be nice to have it built-in in the toolkit itself.

geoffrey.mcgill
May 01, 2009, 5:00 PM
Yes, Saki does some fabulous work. Unfortunately we are prevented from incorporating his extensions because of license exceptions layered on top of the standard LGPL 3.0 license. Here's an example from the IconMenu ux widget:


Ext.ux.menu.IconMenu is licensed under the terms of the Open Source LGPL 3.0 license. Commercial use is permitted to the extent that the code/component(s) do NOT become part of another Open Source or Commercially licensed development library or toolkit without explicit permission.

I believe the above license exceptions do not prevent individuals (or companies) from incorporating Sakis' ux extensions into their own projects if they so choose to make asp.net controls based upon the widgets.

In the upcoming v0.8 release we've included new <ext:CommandColumn> support which should help with your requested "button column" functionality.

The following code sample demonstrates a simple CommandColumn with two "buttons". There's also a .jpg screen capture attached to this forum post.

Example


<ext:CommandColumn Width="60">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="Delete">
<ToolTip Text="Delete" />
</ext:GridCommand>
<ext:CommandSeparator />
<ext:GridCommand Icon="NoteEdit" CommandName="Edit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>

r_honey
May 02, 2009, 2:53 AM
You should also notice the rider, "without explicit permission". I do believe with the good work the Coolite team is doing, and the principles ExtJs is built upon, if you approach Saki, he would allow his extensions to be incorporated in your toolkit.

Off-course, I would be more than willing to pay a little extra for the Professional edition, for the Saki's extensions being included. After all, a part of the Professional edition already goes to ExtJs. Also, you can consider releasing a separate version of your toolkit, like Pro Edition with extensions, for those users who are not willing to pay for Saki's extensions. Although, I do believe, having more versions creates confusions.

Coming back to your GridCommand column, yes that's exactly what I need. Any timeline for 0.8 release. If that's a bit late, can you oblige by sending the related code just for the GridCommand column. I need to use it immediately, and my work is stuck trying to create one of my own.

geoffrey.mcgill
May 02, 2009, 4:47 AM
Hi r_honey,


Thanks for the comments and feedback.


I would love to strike a deal with Saki, although at the moment we're focused on finishing up the v0.8 release and incorporating as much of the core ExtJS functionality as we can.


Saki has been an amazing member of the ExtJS community. The guy is a widget factory. :)


The <ext:CommandColumn> is currently only available to Professional License holders with SVN access. If you have SVN access, there are six various CommanColumn examples within the following location, see 



\trunk\Coolite.Examples\Examples\GridPanel\Command s\


Unfortunately we do not have a public release date for v0.8. We still have a few issues (re: UpdatePanel) to deal with.

r_honey
May 02, 2009, 5:32 AM
I have finally managed to get something of the sort working on my own, and so would like to wait for the official 0.8 release. I must admit that the combination of ExtJs, Coolite and ASP.NET offers possibilities that atleast I did not believe was possible on the web.

Here's a sanpshot of what I have done, in case others are interested:


<script type="text/javascript">
function buttonRenderer(value, metadata, record, rowIndex, colIndex, store) {
var edit = '<a href="' + record.data.editUrl + '"><img src="<%= Me.editImageUrl %>" alt="Edit" /></a>&amp;nbsp;&amp;nbsp;&amp;nbsp;';

var del = '<img src="<%= Me.deleteImageUrl %>" alt="Delete" style="cursor: hand" &#111;nclick="deleteTherapy(' + record.id + ')" />';
var div = '' + edit + del + '
';

return (div);
}

function deleteTherapy(id) {
if (confirm('Are You Sure You Wish To Delete This Item?')) {
var mask={showMask:true, minDelay: 1000};
Coolite.AjaxMethods.<%= Me.ClientID %>.deleteTherap(id, {success: deletedTherapy, eventMask:mask});
}
}

function deletedTherapy(p1,p2,p3)
{
if(typeof(p1) == 'string')
Ext.Msg.alert('Error', p1);
}
</script>


<ext:GridPanel ID="grdTherapy" runat="server" AutoExpandColumn="name" StoreID="storeTherapy">
<ColumnModel runat="server">
<Columns>
<ext:Column Width="70">
<Renderer Fn="buttonRenderer" />
</ext:Column>
..... (more GridColumn code)


Basically, I have rendered 2 Image Button kindda things in the first column in the grid. The first one is an Edit button, and the second is a Delete button. The Edit button when clicked takes you to a new page, where you can edit the item.

However, the Delete button produces a PostBack-like effect to delete the item &amp; update the grid. It actually calls an AjaxMethod passing in the id, to delete the item.

Clean solution with no flickers, I believe!!!

Another thing I would like to mention here is that the solution is a whole lot simpler than I imagined it would be. Initially, I was trying to get an ExtJs button in each column. I could not succeed in doing so cleanly, because I need to return Html from the rendering function. I created an Ext Button, but could not get my hands on its Html without rendering it inside a Container. So, what I did was to return a code from the rendering function, and set a timeout to another function which created &amp; rendered the button in this div. So, it poses a basic question as to how to get an Ext element's Html without actually getting it rendered (applyToMarkup, render etc. all need a valid DOM element to be passed).

Although the final solution I have created is a lot simpler, still I would like to have a solution for the above problem (getting Ex element's Html without rendering it), as I might need it at another place.

michaeld
Sep 06, 2009, 6:12 PM
It's Saki's upload panels, I'd love to see integrated or similarly built.