Setting Values In a Form Using the Sencha Architect 2.0 (ExtJS 4.0)

Let’s say you want to make a simple modal window that appears when you double click on a row in a Sencha Grid Panel.  Let’s assume you have the panel created and in the double click event you need to put some code.  You want that code to pass in some values to the window, then have the window pop up and look something like this:

 

image

 

We know we need to create a form panel, but first, let’s code the double click event in the grid that brings it up.  To do this, we add the DoubleClick event to the Grid Panel and then, using the “record” passed in, we pass that to our new Windows we are about to create.  below is some code I wrote to do this (3 lines).

 

image

 

Next, let’s go into designer and make a simple form that is basically a top level window that has a form panel as a client, then the form panel has a fieldset, and that fieldset has 3 textfields.  Very straight forward and what you end up getting from SA (Sencha Architect) looks like the following.  I won’t go through the drag and drops to make it, but it is pretty straight forward.  It took me about 30 seconds.

 

image

 

The code it created looks like the following (which also contains the load event I entered myself and is pictured separately below it.

Below is the code I wrote which you can see incorporated in the code above.  Notice the lines I commented out.  I just did this to show what is really happening, but I condensed it a little in my real JavaScript.

 

image

 

So basically, that’s it.  We created a double click event in a grid panel and from that we opened a pop up form and populated it with data.  Very straight forward.

HTH’s.

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. Kevin Woods says:

    That’s great well done. Any idea how to get back to the main grid with the particular row reference? I got as far as they click on the grid, popup box (modal) comes up with details from the grid. They add a field, this triggers a jsp page which returns a success or failure json.

    I want to be able to update the grid based on this (e.g. remove a record from the grid or change its colour) but how do I know the row reference after the submit stage? Can’t figure it out at all have tried lots of approaches but no dice!

  2. very true warleyalex. It is a short trip though from the view to the controller for the event code. with a simple app (like my example). With Sencha Architect, you can do events both ways. embedded in the view and also in the MVC

  3. warleyalex says:

    Peter,

    I guess the whole concept of MVC is that Controller controls Views.
    In your architect project, your events live in the Views (not in the Controllers). In Controller you can add a listener to manage the events, I can’t see this in your Sencha Architect, that’s why i ask you for the file.

    regards,
    warleyalex

  4. Hi warleyalex,

    Sorry, but if I don’t post the code with the article it’s usually not in good enough shape to post.

    -Peter

  5. warleyalex says:

    Peter Kellner,

    I am writing to ask whether it would be possible for you to send this SA2 project .xds to my email.

    Thank you.

Follow

Get every new post delivered to your Inbox

Join other followers: