Question

我有以下代码。我正试图通过json创建商店。我可以看到firebug调用json但是这个数据没有加载表单。这适用于模型的本地实例。所以我相信包含“formJobSummary”的面板正在运行。这个问题就在商店的某个地方。

Ext.define('user', {
    extend: 'Ext.data.Model'
    fields: ['quotedPrice']
});

var store = Ext.create('Ext.data.Store', {
    model: 'user',
    proxy: {
        type: 'ajax',
        url: '/data/users.js',
        reader: {
            type: 'json',
            root: 'user'
        }
    },
    autoLoad: true
});


Ext.define('MyApp.view.MyPanel', {
    extend: 'MyApp.view.ui.MyPanel',
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        var form = Ext.getCmp('formJobSummary'); 
        form.loadRecord(store);
    }
});

Json'/data/users.js'

{
    "success":"true",
    "user": [{
        "quotedPrice":"12345"
    }]
}

为了完整性，这里是view.ui

Ext.define('MyApp.view.ui.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 600,
    width: 950,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'JobPanel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'tabpanel',
                    activeTab: 0,
                    flex: 1,
                    items: [
                        {
                            xtype: 'panel',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            title: 'Job Summary',
                            items: [
                                {
                                    xtype: 'form',
                                    id: 'formJobSummary',
                                    layout: {
                                        align: 'stretch',
                                        type: 'hbox'
                                    },
                                    bodyPadding: 10,
                                    title: '',
                                    url: '/submit.html',
                                    flex: 1,
                                    dockedItems: [
                                        {
                                            xtype: 'toolbar',
                                            flex: 1,
                                            dock: 'bottom',
                                            items: [
                                                {
                                                    xtype: 'button',
                                                    text: 'Submit'
                                                },
                                                {
                                                    xtype: 'button',
                                                    text: 'Cancel'
                                                }
                                            ]
                                        }
                                    ],
                                    items: [
                                        {
                                            xtype: 'panel',
                                            flex: 1,
                                            items: [
                                                {
                                                    xtype: 'radiogroup',
                                                    width: 400,
                                                    fieldLabel: 'Job Type',
                                                    items: [
                                                        {
                                                            xtype: 'radiofield',
                                                            boxLabel: 'Fix Price'
                                                        },
                                                        {
                                                            xtype: 'radiofield',
                                                            boxLabel: 'Production'
                                                        }
                                                    ]
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'quotedPrice',
                                                    name: 'quotedPrice',
                                                    fieldLabel: 'Quoted Price'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'clientPO',
                                                    name: 'clientPO',
                                                    fieldLabel: 'Client PO'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'jobQuantity',
                                                    name: 'jobQuantity',
                                                    fieldLabel: 'Job Quatity'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'filesOver',
                                                    name: 'filesOver',
                                                    fieldLabel: 'Files Over'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'previousJobId',
                                                    name: 'previousJobId',
                                                    fieldLabel: 'Previous JobId'
                                                },
                                                {
                                                    xtype: 'textfield',
                                                    id: 'estimate',
                                                    name: 'estimate',
                                                    fieldLabel: 'Estimate'
                                                }
                                            ]
                                        },
                                        {
                                            xtype: 'panel',
                                            flex: 1
                                        },
                                        {
                                            xtype: 'panel',
                                            layout: {
                                                align: 'stretch',
                                                type: 'hbox'
                                            },
                                            flex: 1
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            title: 'Parts'
                        },
                        {
                            xtype: 'panel',
                            title: 'Process'
                        },
                        {
                            xtype: 'panel',
                            title: 'Invoice'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    title: 'FooterPanel',
                    flex: 1
                }
            ]
        });

        me.callParent(arguments);
    }
});

Answer 1

问题在于将记录设置为表单。首先，loadRecord接受记录，而不是存储。接下来的问题是，当您致电loadRecord时，商店未加载。下面是修改后的商店定义，解决了问题。基本上你应该绑定到商店的load事件，以确保已经加载了记录。

var store = Ext.create('Ext.data.Store', {
    model: 'user',
    proxy: {
        type: 'ajax',
        url: 'data2.json',
        reader: {
            type: 'json',
            root: 'user'
        }
    },
    autoLoad: true,
    listeners: {
        load: function() {
            var form = Ext.getCmp('formJobSummary'); 
            form.loadRecord(store.data.first());
        }
    }
});

发出加载json存储在extjs 4.0中的形式

1 个答案: