Can a grid contain other widgets?

[cesarulo]

Hey guys,

I'm pretty new to Ext and the forum. I've been programming in JavaScript "the hard way" for a while now and I just can't love this product enough. Congratulations Jack and team.

Now to my question: this might be an obvious question with answers in many threads and FAQs, but God knows I've done my homework and came out empty handed. The question is:

Can I put other widgets (specifically a button) in grid cells?

I have managed to get a button to display by programmatically generating the button and returning its innerHTML in a renderer. It looks real pretty, but it doesn't seem to be listening to my click event (for which I *did* define a handler) so it's kinda worthless.

I HAVE figured out that it's better to listen for a click event on the grid and use the coords made available to the handler to decide what to do, but I still want to know, just out of sheer curiosity, if it's possible to have buttons (or other widgets, and if so, which) inside a grid cell.

If the answer to this question is somewhere in the forums or the FAQs, then *any* kind of pointer would be supernice. If you don't have the time to find a link for me, then at least please throw me a couple keywords. I've run out of keywords, don't know what else to search for, and I haven't found a single mention to this problem anywhere.

Thanks in advance everybody! Best,

Cesarulo

[jsakalos]

I'm also interested.

[cesarulo]

Hey jsakalos,

thanks for your endorsement. Now that I know you don't know the answer either, at least I know I'm not asking a *totally* trivial question. I've seen your many posts in the forum.

I would like to add a little bit to the above. I've been thinking more about the problem I'm trying to solve, and as it turns out I don't think that hooking up a handler on cellclick is going to be my solution here.

The reason: I need the user to be able to click on one of several "action" buttons available for each item (ie row) in the grid. The index has columns that display different attributes of each item, some editable, some not. And in another column, I need to have widgets for each of the different actions. They need to be in the same column because I want them all to appear under the same, "Actions" title.

In this scenario, a cellclick event on the whole grid is no good - it doesn't provide enough resolution, as I need to know not only which CELL the user clicked on, but rather which ICON. And with all the action icons being in the same cell that data is not going to be available.

My guess is it's clear that I need to be able to somehow hook up a functioning widget into the grid... and I still can't quite figure out how. It doesn't need to be a button, anything that the user can click on and fire an event that I can hook my code onto is good enough.

Here's an excerpt of the code I mention above, which drew a button that refused to listen to click events:



indexGrid.prototype.typeRenderer = function(value, meta, record, row, col, store){
//create a span so we can return it innerHTML for rendering in the grid
var span = document.createElement('span');
var button = new Ext.Button(span, {
icon: 'template/images/action.gif',
handler: this.actionListener,
scope: record,
tooltip: 'Carry out action on this item',
});
return span.innerHTML;
}

FileIndexGrid.prototype.actionListener = function(a, b, c, d, e, f, g, h, i, j, k){ //I don't know which args this expects so I was hoping FireBug would help me establish their nature by naming them like this :)
//do action stuff...
.
.
.
}


indexGrid is a class that I created and which uses EditorGrid by means of delegation. I didn't want to extend the EditorGrid class, I'm not a huge fan of inheritance. indexGrid contains all the event handlers and state variables that the client needs to maintain around the grid.

'type' is one of the columns of the grid, and currently contains only some text that the server (in PHP) delivers. In the future I will want to display different buttons according to that value, but for now I'll be happy with one *workable* button for all cases.

As I said, this shows a button, but the actionListener code is never getting executed. I don't think it's a scoping problem either, as I'm not getting a javascript error (if FireBug is notoriously unreliable stopping on debugger calls and reporting errors in functions fired by asynchronous events, in my personal experience - perhaps I'm not *seeing* it break?)

Anyway, I thought I'd add that. Thanks again for a wonderful product and I hope we can get some of the gurus' attention on this issue :)

[jsakalos]

Hi C

[cesarulo]

Ah!

Jozef, thanks a lot man! (BTW, is it okay if I contact you via skype in the next couple days?)

I will look into this, but if you're around and looking, can you provide a very skeletal example of how you go about constructing those and hooking them onto the grid? Just so I know where to start looking in the docs. Or a pointer of any other kind, anything would be super.

And I completely agree that I'm still curious to find out which widgets can be put into grid cells and how.

Cheers,

[jsakalos]

C

[cesarulo]

Jozef,

this is great man! Thank you soooo much! I'll let you go to bed now. BTW, I'm based out of Mexico City, so I guess I *will* have to mind TZ diffs :D - It's 9:30pm here right now.

Talk to you soon! Let's see what the experts have to say about buttons in grids.

Best,

[cesarulo]

Hi,

Jozef, I've tried your menues idea, changing it quite a bit to adapt it to my application. I very much like the idea of lazy creation of components, too. Initial setup times for these rich clients gets loooong if one tries to do everything upon download, and lazy creation is a pretty basic technique but I hadn't thought of using it in this case (hehe). Plus I've also learned to use a new kind of widget. Thanks for your help.

Now that being said, the context menu is not exactly what I'm looking for. I'll probably keep it as an additional way to access the same functionality, but I still need little icons that people can just left-click and carry out the action right away.

Team, any ideas anybody? Some help with this would be very gratefully welcome.

Best,

[jsakalos]

Hi C

[cesarulo]

Hey Community,

no thoughts at all on this? I thought it was a pretty good question....

[dfenwick]

This is a renderer I added for my test grid. It renders the IP address as a button in the grid cell. The defer adds a 1ms deferral to the execution of the function. This actually just queues the addition of the button to the grid cell. Since Javascript is single threaded it will continue execution of the script that called the renderer. We need this so the DIV tag we're adding to the grid cell is added before we attach the button to it.

Technically you could do this for just about any Ext widget in the library. For example, you could create a BorderLayout and stick it in the div you created in the cell, provided that div has appropriate height and width to support the underlying layout. Height can be provided in the div itself. Width you'd provide in the ColumnModel for the grid.


function renderIp(val, p, record) {
var contentId = Ext.id();
createGridButton.defer(1, this, [val, contentId]);
return('<div id="' + contentId + '"></div>');
}

function createGridButton(value, id) {
new Ext.Button(id, {text: value, handler : function(btn, e) {
alert(btn.getText() + ' Clicked');
}});
}

[cesarulo]

Hey dfenwick,

wow, thanks a lot! This is an extremely elegant and lightweight solution. I'm going to try it right away, or sooner.

This community rocks! Thanks everybody.

[sintax.era]

Just wondering if anyone has done it yet? :)

[cesarulo]

Hey,

I did try this, just as in dfenwick's code, with only minor modifications to fit it into my application. It works like a charm. As a matter of fact the defer(1, ...) trick has proved useful in ohter situations too...

Hope that helps. If something doesn't work I can definitely try to help.

Cheers,

[dantheman]

Just wondering if anyone has done it yet? :)I did something like this recently, though in neither as elegant nor as lightweight a manner
(serves me right for not searching first 8-|)

The technique does indeed work. I found the button Ext created tended
to stretch vertically the cell and this would throw off the rendering of the
whole grid height, leaving some/one row (partially) obscured at the bottom.
Likely this was because I used a longer delay for the button construction.
I solved this with an explicit height in the returned empty div.

If I were doing this now, I'd definitely use dfenwick's pattern.

--dan

[rberger]

Could someone post a simple example of creating a grid that would insert a button into a cell/column of the grid?

I'm new to javascript and ext, so the context of use is still a bit murky for me.

PS I am very impressed with the power of ext.js. But the learning curve is steep! The examples are very helpful!

Thanks
Rob

[smumey]

Thanks for the code dfenwick; nice work :D--it rocks! Here is a minor change for Ext2 compatibility:


function renderIp(val, p, record) {
var contentId = Ext.id();
createGridButton.defer(1, this, [val, contentId]);
return('<div id="' + contentId + '"></div>');
}

function createGridButton(value, id) {
new Ext.Button({text: value, handler : function(btn, e) {
alert(btn.getText() + ' Clicked');
}}).render(id);
}

[talshadar]

I just wanted to say that your example of the context menu for clicking works awesome!! I'm having trouble linking it to right clicks only and I'm trying to use a double click event at the same time that is confusing the issue but it works! So thank you very much for a great example!

EDIT: Never mind - I solved my issue - I added rowcontextmenu as the listener instead of rowclick and everything works.