CODEWITHSUNDEEP
extjs4
Sanjay Gaikwad
Sanjay Gaikwad

Reputation: 41

How to add grid to Extjs Form and submit its data?

I am designing a highly complex data entry form using extjs 4.0. I am binding a model to my form.

Inside my model I am having a property say "Products" which represent the Product model. Now I want to show these products in Grid on my form Panel. User can add remove the products from the grid and save the form.

What is the best way to achieve this ?

Upvotes: 4

Views: 5990

Answers (2)

dbrin
dbrin

Reputation: 15673

If I understood you correctly you have a 1 to Many association of objects where the 1 side is loaded into a form for editing and the Many need to also be show but in a grid within the form.

The way I approached a similar design is by adding a gridpanel below the form. In my case there were other components so my grid was wrapped in a tabpanel. Similar to this example see form 5.

Now, what goes in the grid? Well I added a store representing my Many objects - or Products for your example. I setup a writer proxy for that store and added a roweditor plugin to the grid. The end result was an easy way for users to manage the relationships, edit properties of both parent and children objects all from one screen. I chose to have an autosync store for the Many store, but you dont have to. You can easily add a save button to the grid, or just bind the action to the parent's Save button.

Hope this get's your creative juices flowing :)

Upvotes: 1

Andrey Selitsky
Andrey Selitsky

Reputation: 2604

You could overwrite setValues(), getValues() methods of your form. Just add grid binding to the base methods. Note - no need to extend the form to create your own class. You could overwrite these functions right where you declare the form.

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

Hope this helped.

Upvotes: 0

Related Questions