Results 1 to 1 of 1

Thread: Grid form

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2007
    Vote Rating

    Default Grid form

    Hi folks, another newbie here

    I wanted to have an editable grid appear within a dialog with no special layout requirements. I couldn't find an example that did what I want, but after quite a bit of investigation I managed to piece it together. In case it's useful to somebody else I'd like to contribute it here. My secondary motive of course is to get some feedback from the more experienced Ext users as I'm sure there are ways this can be improved. In fact I have some specific questions - some of them probably arising from the limited nature of my Javascript and CSS knowledge - but here goes:

    1) I couldn't figure out a way of separating the grid and dialog definitions in the js as the dialog needs to see the grid in the form of the local "grid" variable. I'm sure there is a way of doing this however, so let tell me if you know how.

    2) I don't know why, but even with style="visibility:hidden" in the div for the dialog (see comments-dlg in TestGridDialog.html) the div would still sometimes appear on the page. I worked around this by setting the "top" to -10000 - but this seems like a hack. Any ideas on this?

    3) I wanted to be able to display messages from my back end server code, but couldn't see a way of doing this using the "gridForm" approach that you see in the examples, where a form is used to send the data and receive a success or failure response. Instead I explicitly create a connection and used that to interact with the server using a technique I found in one of the forum posts. Is this the way to go - or is there some way to get the form to receive more than success/failure?

    Enough questions - now to the example. The idea of this dialog is to allow the user to maintain a list of "Comments" - the reason why isn't important.

    Other newbs might appreciate me mentioning that the html file pulls it all together, including the Ext framework and the GridDialog.js script - as you can see in the html head section. The html body contains the button that invokes the dialog and a "template" that describes the dialog using some named div tags.

    The GridDialog.js script contains the definitions for the dialog, grid and associated components in a single function that gets added to the onReady chain of event handlers on the last line. All the handlers registered with Ext.onReady get invoked once the document has loaded.

    If you look inside the GridDialog function you will see a bunch of objects being created and linked together in various ways that I won't go into here, along with event handlers that are defined to handle their behaviour. You will also see that these components are linked to the other components in the html page using the Ext.get method to refer to them. In particular you should notice that this is how the button and Divs mentioned in the html file are linked up.

    I have commented out the code that populates the grid from my server and replaced it with some data that is hard coded in an array using the MemoryProxy component that you may have seen in various examples. This means that you can run the example by just copying the files into a folder where the "ext" framework folder also resides and then opening TestGridDialog.html in your browser. The add and delete functions will work, and you can edit the cells by double clicking them, but of course you won't be able to save your changes as this would require a link to the server.

    I'd like to thank Scott Walter for the great screencasts (which incidentally are much better downloaded from Scott's site than the Flash versions ypu might have seen) and also the other forum users whose posts have been very helpful. And as this is my first post here I'd like to thank Jack Slocum for not only the much needed and excellent Ext framework, but also this terrific infrastructure for the Ext community.

    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts