PDA

View Full Version : [CLOSED] Adding a new grid record



adelaney
May 31, 2012, 1:48 PM
I am using MVC and Razor and I am trying to create a new record. Here is my store:


.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:

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:

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?

Daniil
May 31, 2012, 3:27 PM
Hi,

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

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


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.

adelaney
May 31, 2012, 3:46 PM
I have updated my model to this:

.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:

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

adelaney
May 31, 2012, 3:59 PM
A small update:

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

.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")

Vladimir
May 31, 2012, 4:08 PM
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


<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)



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

Vladimir
May 31, 2012, 4:10 PM
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'

adelaney
Jun 06, 2012, 1:53 PM
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?

Daniil
Jun 06, 2012, 3:05 PM
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
AutoSync="true" and call the Store sync method explicitly.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-method-sync


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.
http://examples2.ext.net/#/GridPanel/Saving_Variations/StoreEvents/
http://examples2.ext.net/#/GridPanel/Saving_Variations/StoreCustomLogic/
http://examples2.ext.net/#/GridPanel/Saving_Variations/HttpHandler/
http://examples2.ext.net/#/GridPanel/Saving_Variations/WebService/

Daniil
Jun 06, 2012, 3:14 PM
Then, I think, you should not use
AutoSync="true" and call the Store sync method explicitly.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-method-sync (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.data.AbstractStore-method-sync)


You can still use

AutoSync="true"
if set up

AllowBlank="false"
for ModelFields or set up Validations.
http://examples2.ext.net/#/GridPanel/Update/AutoSave/