在 EXT 表单面板中填充 EXT JS 存储

Posted 2023-04-12

【中文标题】在 EXT 表单面板中填充 EXT JS 存储

【英文标题】：Populating EXT JS Store in a EXT form Panel

【发布时间】：2015-06-10 22:44:04

【问题描述】：

使用 ASP.NET MVC action 方法将 Json 返回到视图，以便以 EXT JS 表单显示数据。尽管我可以看到操作方法在 Ext.Create 之后返回 JSON 数据，但我总是在函数 EverythingLoaded 中将“记录”值设为 null。我想要实现的是填充从操作方法传回的名字和姓氏参数到面板内的文本框。你能帮我吗？下面是代码

->App.JS

Ext.onReady(function() 

  //Define Store  
    Ext.define('StudentModel', 
        extend: 'Ext.data.Model',
        idProperty: 'Id',
        fields: [
             name: 'Id', type: 'int' ,
             name: 'firstName', type: 'string' ,
             name: 'lastName', type: 'string' ,
             name: 'birthDate', type: 'date' ,
             name: 'street', type: 'string' ,
             name: 'apartment', type: 'string' ,
             name: 'city', type: 'string' ,
             name: 'state', type: 'string' ,
        ],
        validations: [
            type: 'presence',
            field: 'firstName'
        ]
    );

var store = Ext.create('Ext.data.Store', 
    model: 'StudentModel',
    storeId: 'StudentStoreId',
    proxy: 
        type: 'ajax',
        url: '/Home/GetStudentSubmissions',
        reader: 
            type: 'json',
            rootProperty: 'data'
        
    ,
    autoLoad:  callback: everythingLoaded  
 
);

function everythingLoaded()

    var record = store.getAt(0);                
     //Here record is always null
    Ext.form('MyPanel').getForm().loadRecord(record); 


Ext.define('StudentView', 
    extend: 'Ext.form.Panel',
    id: 'MyPanel',
    alias: 'widget.StudentView',
    title: 'Student Information',
    resizable: false,
    collapsible: true,
    store:store,
    bodyPadding: '5',
    buttonAlign: 'center',
    border: false,
    trackResetOnLoad: true,
    layout: 
        type: 'vbox'
    ,
    defaults: 
        xtype: 'textfield',
        msgTarget: 'side',
        labelAlign: 'top',
        labelStyle: 'font-weight:bold'
    ,
    items: [
        xtype: 'fieldcontainer',
        layout: 'hbox',
        defaultType: 'textfield',
        width: '100%',
        fieldDefaults: 
            labelAlign: 'top',
            labelStyle: 'font-weight:bold'
        ,
    items: [
        fieldLabel: 'First Name',
        name: 'firstName',
        allowBlank: false
    , 
        fieldLabel: 'Last Name',
        name: 'lastName',
        allowBlank: false
        ]
    ]        
);

 //Here count is always 0
var i = store.getCount();

Ext.create('widget.StudentView', 
    renderTo: 'studentMasterForm'
);

);

-> C# 动作方法

  public JsonResult GetStudentSubmissions()
    
        return Json(GetStudents(), JsonRequestBehavior.AllowGet);
    
    public Student GetStudents()
    
        Student studobj = new Student();

        studobj.Id = 1;
        studobj.firstName = "Aravind";
        studobj.lastName = "R";
        studobj.state = "NJ";
        studobj.street = "Center Grove";
        studobj.birthDate = new DateTime(1989, 6, 6);
        studobj.apartment = "DD8";
        studobj.city = "XYZ";

        return studobj;

    

->学生模型班

公开课学生 公共 int ID 获取；放; 公共字符串名字 得到；放; 公共字符串姓氏得到；放; 公共日期时间出生日期得到;放; 公共字符串街道 获取；放; 公共字符串公寓 得到；放; 公共字符串城市获取；放; 公共字符串状态 获取；放;

【参考方案1】：

您的 c# 代码返回一个对象“学生”，但它应该返回一个对象，该对象具有一个 学生数组作为其“数据”属性。

你需要返回这个类型的对象：

public class ExtStore

    public List<Student> data = new List<Student>();

以这种方式为例：

public ExtStore GetStudents()

    Student studobj = new Student();

    studobj.Id = 1;
    studobj.firstName = "Aravind";
    studobj.lastName = "R";
    studobj.state = "NJ";
    studobj.street = "Center Grove";
    studobj.birthDate = new DateTime(1989, 6, 6);
    studobj.apartment = "DD8";
    studobj.city = "XYZ";

    ExtStore exs = new ExtStore();
    exs.data.Add(studobj);

    return exs;

【讨论】：

谢谢马修！！想知道为什么我不早点抓住它！这就是为什么记录总是为空的原因。现在我可以看到填充的记录值。现在我遇到了一个 EXT JS 问题：“Ext.form('MyPanel').getForm().loadRecord(record); ”出现异常“0x800a138a - javascript 运行时错误：预期功能”

Ext.get('MyPanel').loadRecord(record);

感谢 Mathieu.. 它抛出异常“对象不支持属性或方法 'loadRecord'”。但是我尝试了不同的方式。 var formPanel = Ext.create('widget.StudentView'.. & 然后 formPanel.getForm().loadRecord(record); 有效！！在不同的说明中，不是传递列表并使用 GetAt(0)，是否存在一种传递对象类型并在表单面板中填充它的值的方法？就我而言，我只有一行数据..

您应该将此线程标记为已解决（接受我的回答）。是的，有一种方法：formPanel.getForm().setValues(yourobject);

您好 Mathieu，我正在尝试使用对象类型而不是列表集合来实现相同的解决方案。 getForm().setValues 似乎在版本 5 中已被弃用。我尝试了 formPanel.getForm().loadRecord(store) 但它不起作用。但是我可以在 store.proxy.reader.rawdata 中看到来自服务器的返回数据。