带有 JSON 读取的 EXTJS 4 表单填充

Posted 2023-02-26

【中文标题】带有 JSON 读取的 EXTJS 4 表单填充

【英文标题】：EXTJS 4 form population with JSON read

【发布时间】：2012-05-18 15:42:30

【问题描述】：

我是 EXTJS 的新手，目前正在使用 EXTJS-4.1。 我有一个基本表单，我需要在页面加载时填充数据。 服务器 url 将返回一个 JSON。

["countryid":1,"countrycode":"US","countryname":"United States"]

我的表单代码是

Ext.require([
    'Ext.form.*'
    //'Ext.layout.container.Column',
    //'Ext.tab.Panel'
    //'*'
]);

Ext.onReady(function() 
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild(tag: 'h2', html: 'Form 1 - Very Simple');

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.define('app.formStore', 
extend: 'Ext.data.Model',
fields: [
   name: 'countryid',
   name: 'countrycode',
   name: 'countryname'
]
);

var myStore = Ext.create('Ext.data.Store', 
model: 'app.formStore',
proxy: 
    type: 'ajax',
    url : 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
    reader: 
        type:'json'                     
    
,
autoLoad:true,
    listeners: 
        load: function() 
            var form = Ext.getCmp('formJobSummary'); 
            form.loadRecord(myStore.data.first());
        
    
);


var testForm = Ext.create('Ext.form.Panel', 
                    width: 500,
                    renderTo: Ext.getBody(),
                    title: 'Country Form',
                    waitMsgTarget: true,
                    fieldDefaults: 
                        labelAlign: 'right',
                        labelWidth: 85,
                        msgTarget: 'side'
                    ,
                    items: [
                        xtype: 'fieldset',
                        items: [
                                xtype:'textfield',
                                fieldLabel: 'ID',
                                name: 'countryid'
                            , 
                                xtype:'textfield',
                                fieldLabel: 'CODE',
                                name: 'countrycode'
                            , 
                                xtype:'textfield',
                                fieldLabel: 'COUNTRY',
                                name: 'countryname'
                        ]
                    ]

            );


    this.testForm.getForm().loadRecord(app.formStore);
);

我能够将相同的 JSON 填充到网格中。你能帮我解决吗... 我在网上得到了很多例子并尝试过，但仍然没有运气。上面给出的也是我浏览时得到的修改后的代码sn-p。

【参考方案1】：

load() 函数是异步的。所以你做了一件正确的事——为加载事件创建一个处理程序并将逻辑放在那里。但是你犯了几个错误：

在负载处理程序中，您将拥有一些函数参数。第一个参数将被存储 - 所以你不需要使用全局变量。

你不需要this.testForm.getForm().loadRecord(app.formStore); - 因为它不是一个有效的命令，而且你不知道你的商店是否真的被加载了。去掉它。您已经在 store 处理程序中有 loadRecords。

表单呈现和存储自动加载是两个不同的事件，您无法控制它们的时间。所以我建议为商店禁用autoLoad，并在您知道表单准备好后手动调用store.load()。

【参考方案2】：

var form = Ext.getCmp('formJobSummary');console.log(form) 可能会返回 undefined。为表格指定一个名称，然后就可以了。或者更好……

// Ext.require([
// 'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
// ]); // you dont need ext.require for ext integrated stuff

Ext.onReady(function () 
    Ext.QuickTips.init();

    //var bd = Ext.getBody(); 

    /*
     * ================  Simple form  =======================
     */
    //bd.createChild(
    //  tag: 'h2',
    //  html: 'Form 1 - Very Simple'
    //); // over written by the form anyway

    // var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; // never used

    Ext.define('app.formStore', 
        extend: 'Ext.data.Model',
        fields: [
            name: 'countryid'
        , 
            name: 'countrycode'
        , 
            name: 'countryname'
        ]
    );



    var testForm = Ext.create('Ext.form.Panel', 
        width: 500,
        renderTo: Ext.getBody(),
        name:'formJobSummary', //why your orignal bit wasn't working
        title: 'Country Form',
        waitMsgTarget: true,
        fieldDefaults: 
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
        ,
        items: [
            xtype: 'fieldset',
            items: [
                xtype: 'textfield',
                fieldLabel: 'ID',
                name: 'countryid'
            , 
                xtype: 'textfield',
                fieldLabel: 'CODE',
                name: 'countrycode'
            , 
                xtype: 'textfield',
                fieldLabel: 'COUNTRY',
                name: 'countryname'
            ]
        ]

    );

    var myStore = Ext.create('Ext.data.Store', 
        model: 'app.formStore',
        proxy: 
            type: 'ajax',
            url: 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
            reader: 
                type: 'json'
            
        ,
        autoLoad: true,
        listeners: 
            load: function (store,record,e) 
                testForm.loadRecord(store.first());
            
        
    );


);

【讨论】：

加载：函数 (store,record,e) form.loadRecord(store.first()); 应该是： load: function (store,record,e) textForm.loadRecord(store.first());

编辑是你的朋友咳嗽

【参考方案3】：

可以尝试的几件事：

1) 如果你在 localhost 上寻找你的文件，不要把 localhost 放在 url 只写

网址：'/milestone_1/web/app_dev.php/md/country/show/1'

你的 php 文件是做什么的？可以发一下代码吗？

3) 将代理配置放在模型上而不是存储上。

4) 你有没有尝试测试商店是否在加载时读取了记录？使用 console.log？

【讨论】：

只是出于好奇，您为什么建议个别记录有自己的代理设置？

你是什么意思..我只问他是否验证商店是否上传数据。你如何检查它？我通常要求记录计数。你不觉得吗？

"3) 将代理配置放在模型上而不是存储上。"嗯，我想这是一个错误的措辞。模型，不是记录。