How to add a grid to an Extjs form and present its data?

Question

I am developing a very complex form of data entry using extjs 4.0. I bind the model to my form.

Inside my model, I have the ability to say “Products” that represent the product model. Now I want to show these products in the Grid in my form panel. The user can add the removal of products from the grid and save the form.

What is the best way to achieve this?

Answer 1

If you understand correctly, you have an association of objects from 1 to many, where one side is loaded into the form for editing, and many should also be displayed, but in the grid in the form.

The way I approached a similar design is to add a grid under the form. In my case, there were other components, so my grid was wrapped in a tabpanel. Like this example, see Form 5.

Now what goes on the grid? Well, I added a store representing my many objects - or products for your example. I installed a proxy server for this store and added a roweditor plugin to the grid. The end result was a simple way for users to manage relationships, edit the properties of both parent and child objects from one screen. I chose autostart for the Many store, but you do not need it. You can easily add a save button to the grid or simply bind the action to the parent Save button.

Hope your creative juices flow :)

Answer 2

You can overwrite the setValues() , getValues() methods of your form. Just add the mesh binding to the basic methods. Note. No need to extend the form to create your own class. You can rewrite these functions right where you declare the form.

 { xtype: 'form', setValues: function(){} } 

Hope this helps.