[CLOSED] Adding a new grid record

I am using MVC and Razor and I am trying to create a new record. Here is my store:

Code:

---

.Store(Sub(str)
                                                            str.Add(Html.X.Store().ID("tmStore").AutoLoad(True) _
                                                                    .Model(Sub(mdl)
                                                                                    mdl.Add(Html.X().Model.Fields(Sub(fields)
                                                                                                                          fields.Add(Html.X.ModelField.Name("CWTeamID").Type(ModelFieldType.Int))
                                                                                                                          fields.Add(Html.X.ModelField.Name("Name"))
                                                                                                                          fields.Add(Html.X.ModelField.Name("DrafterEmployeeID").Type(ModelFieldType.Int))
                                                                                                                          fields.Add(Html.X.ModelField.Name("ReviewerEmployeeID").Type(ModelFieldType.Int))
                                                                                                                          fields.Add(Html.X.ModelField.Name("CorrespondentEmployeeID").Type(ModelFieldType.Int))
                                                                                                                          fields.Add(Html.X.ModelField.Name("QAReviewerEmployeeID").Type(ModelFieldType.Int))
                                                                                                                  End Sub))
                                                                            End Sub) _

---

Here is my JavaScript:

Code:

---

function addTeam() {
        var grid = App.TeamGrid;  //$("#TeamGrid");
        debugger;

        var r = Ext.ModelManager.create({
        CWTeamID:0,
        Name:'New Team',
        DrafterEmployeeID: 0,
        ReviewerEmployeeID: 0,
        CorrespondentEmployeeID: 0,
        QAReviewerEmployeeID: 0
        }, 'Team');

        grid.store.insert(0,r);
        grid.editingPlugin.startEdit(0,0);
    }

---

Now in looking in the page source, the store gets defined like this:

Code:

---

Ext.create("Ext.grid.Panel", {
    store: {
        model: Ext.define(Ext.id(), {
            extend: "Ext.data.Model",
            fields: [{
                name: "CWTeamID",
                type: "int"
            }, {
                name: "Name"
            }, {
                name: "DrafterEmployeeID",
                type: "int"
            }, {
                name: "ReviewerEmployeeID",
                type: "int"
            }, {
                name: "CorrespondentEmployeeID",
                type: "int"
            }, {
                name: "QAReviewerEmployeeID",
                type: "int"
            }]
        })

---

When I try to run the code, I get this error:
TypeError: c is not a constructor


Since this is generated in Razor, I am not sure what the 'Team' parameter (in Javascript) value should really be. However, I have tried a variety of values, including nothing, with all generating the same error as above.

Additionally, my grid uses a combobox in edit mode. I would like the same effect during the add. The value zero is not amoung the set of values in my store. So, how can I basically get null value comboboxes in the place of all the ID fields? And finally, how can I validate the data entered (all is required) once the data is entered?

Hi,

You should set up ID for the Model (for example, "Model1") and use it within the create method.

Code:

---

Ext.create('App.Model1', {
    test1: 'new 1',
    test2: 'new 2',
    test3: 'new 3'
});

---

Quote:

---

Additionally, my grid uses a combobox in edit mode. I would like the same effect during the add. The value zero is not amoung the set of values in my store. So, how can I basically get null value comboboxes in the place of all the ID fields? And finally, how can I validate the data entered (all is required) once the data is entered?

---

Please keep one issue per thread.

I have updated my model to this:

Code:

---

.Model(Sub(mdl)
                  mdl.Add(Html.X.Model.Fields(Sub(flds)
                                                      flds.Add("Selected", Ext.Net.ModelFieldType.Boolean)
                                                      flds.Add("Text")
                                                      flds.Add("Value", Ext.Net.ModelFieldType.Int)
                                              End Sub) _
                                              .IDProperty("Value") _
                                              .ID("mdlTeam"))
          End Sub))

---

I have changed my Javascript to this:

Code:

---

var r = Ext.create('mdlTeam',{
        CWTeamID:0,
        Name:'New Team',
        DrafterEmployeeID: 0,
        ReviewerEmployeeID: 0,
        CorrespondentEmployeeID: 0,
        QAReviewerEmployeeID: 0
        });

---

Now, I receive this error:
Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: mdlTeam

A small update:

I found the .Loader property on the grid and have configured this much

Code:

---

.Loader(New Ext.Net.ComponentLoader() With {.Enabled = True, .ClientIDMode = ClientIDMode.Static, .AutoLoad = True, .AutoDataBind = True, .Mode = LoadMode.Data}) _

---

What I need to understand now is how this needs to interact with my proxy and how I use this to call the ajax methods in my controller.
(I am assuming that "autoload=true" causes it to "auto postback")

Hi,

1. If you want to create records of particulat model type then you have to set ID for model but it is better to set Name

Code:

---

<ext:Model Name="Employee" ...

---

2. After that you can create record using Ext.create
- Please note that if you use ID then on client side need to use ClientID, ClientID can be different due namespace using (for example, if ID="TestModel" then need use Ext.create('App.TestModel', ...). Therefore Name option is better, it is always predictable on client side
- 'add' and insert methods of Store can understand pure objects instead record (record will be created automatically)

Code:

---

store.insert(0, {
    CWTeamID:0,      Name:'New Team',
      DrafterEmployeeID: 0,
      ReviewerEmployeeID: 0,
      CorrespondentEmployeeID: 0,
      QAReviewerEmployeeID: 0
});

---

Quote:

---

Now, I receive this error:
Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: mdlTeam

---

The exception occurs because you pass incorrect model name to Ext.create, i guess it should be 'App.mdlTeam' instead 'mdlTeam'

Ok. I am finally getting back to this and I can now get a record to "insert." However, I am hitting some roadblocks. First, the "insert" action fires my server-side code as I have AutoSync set to true, but this isn't really the way I want I am trying to accomplish - at least not on the "Add" button click. Instead, on "Add" click, I simply want a new (blank) record in my grid that the user can enter data. Then, when done, they can click "update" (I am using the RowEditing plugin), that will call my my server-side code. Additionally, when the store calls my server-side code, I need to know what my function should look like. Right now, even wrapping the grid in a form, I am getting nothing in my form collection and my querystring reads "[object Object],[object Object],[object Object],[object Object]." I know you are bundling up JSON, but how do I retrieve it?

Quote:

---

Originally Posted by adelaney

First, the "insert" action fires my server-side code as I have AutoSync set to true, but this isn't really the way I want I am trying to accomplish - at least not on the "Add" button click. Instead, on "Add" click, I simply want a new (blank) record in my grid that the user can enter data. Then, when done, they can click "update" (I am using the RowEditing plugin), that will call my my server-side code.

---

Then, I think, you should not use

Code:

---

AutoSync="true"

---

and call the Store sync method explicitly.
http://docs.sencha.com/ext-js/4-1/#!...re-method-sync

Quote:

---

Originally Posted by adelaney

Additionally, when the store calls my server-side code, I need to know what my function should look like. Right now, even wrapping the grid in a form, I am getting nothing in my form collection and my querystring reads "[object Object],[object Object],[object Object],[object Object]." I know you are bundling up JSON, but how do I retrieve it?

---

Please investigate the following examples.
https://examples2.ext.net/#/GridPane...s/StoreEvents/
https://examples2.ext.net/#/GridPane...reCustomLogic/
https://examples2.ext.net/#/GridPane...s/HttpHandler/
https://examples2.ext.net/#/GridPane...ns/WebService/

Quote:

---

Originally Posted by Daniil

Then, I think, you should not use

Code:

---

AutoSync="true"

---

and call the Store sync method explicitly.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-method-sync

---

You can still use

Code:

---

AutoSync="true"

---

if set up

Code:

---

AllowBlank="false"

---

for ModelFields or set up Validations.
https://examples2.ext.net/#/GridPanel/Update/AutoSave/