Filling data in Ext.net FormPanel

Question

I am using Ext.net 2.0 and I am trying to load the first record of the store inside a form panel. I always get no records (getCount() = 0) in the store ? Am I missing something ?

 @(Html.X().Store()
              .ID("myStore")
              .AutoSync(true)
              .AutoDataBind(true)
              .Proxy(proxy =>
                     proxy.Add(
                         Html.X().AjaxProxy().API(api =>
                                   {
                                       api.Create = "/Property/Save/";
                                       api.Read   = "/Property/GetById/";
                                   })                   
                             .Reader(reader => reader.Add(Html.X().JsonReader().Root("data").IDProperty("P_ID")))
                             .Writer(writer => writer.Add(Html.X().JsonWriter().AllowSingle(true)))
                     ))
               .Listeners(c =>
                              {
                                  c.DataChanged.Handler ="var store = Ext.getStore('myStore');" +
                                                          "alert(store.getCount());";



                              })

              .AutoLoadParams(parameters =>
                                   {
                                       parameters.Add(Html.X().Parameter().Name("id").Value("document.location.href.split('/')[5]").Mode(ParameterMode.Raw));
                                   })

              .Model(model => model.Add(
                  Html.X().Model()
                      .Fields(fields =>
                                  {

                                      fields.Add(Html.X().ModelField().Name("ID").Type(ModelFieldType.Int));
                                      fields.Add(Html.X().ModelField().Name("DispalyName").Type(ModelFieldType.String));
                                      fields.Add(Html.X().ModelField().Name("Title").Type(ModelFieldType.String));
                                      fields.Add(Html.X().ModelField().Name("ShortDescription").Type(ModelFieldType.String));


                                  })
                          ))
                    )

For the form panel

@(
        Html.X().FormPanel()
        .ID("myPanel")
        .Layout(LayoutType.Form)
        .Width(350)
        .FieldDefaults(d => {
            d.LabelWidth = 150;
        })
        .BodyPadding(10)
        .Items(item =>
                    {
                        item.Add(Html.X().TextField().ID("Id").Name("ID").FieldLabel("Id").Hidden(true));
                        item.Add(Html.X().TextField().ID("DispalyName").Name("IdDispalyName").FieldLabel("Id Dispaly Name").MaxLength(400));
                        item.Add(Html.X().TextField().ID("Title").Name("Title").FieldLabel("Title").AllowBlank(false).MaxLength(200));
                        item.Add(Html.X().TextField().ID("ShortDescription").Name("ShortDescription").FieldLabel("Short Description").MaxLength(200));
                             }
            ) )  

Thanks in advance.

Answer 1

More appropriate event is Load (it is fired when data is loaded to the store from a remote source)

See the following description http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-event-datachanged