ExtJs getRecord()函数的形式不起作用

时间:2016-08-09 20:04:24

标签: forms extjs extjs5

我想通过getRecord()函数从我的表单中获取我的值。 这是我目前从form.getRecord()得到的结果:

getRecord

数据对象为空。

这是我的控制者:

onAddNewsClick: function(button, e, eOpts) {

    var win = this.getNewsEdit();
    if(!win){
        win = Ext.create('widget.newsedit');
    }
    this.getNewsPanel().loadRecord(Ext.create('model.news'));
    console.log(this.getNewsPanel());
    this.adding = true;
    win.show();
},

OnSaveNewsClick: function(button, e, eOpts) {

    var form = this.getNewsPanel();
    console.log(form);
    var selectedRecord = form.getRecord();
    console.log(selectedRecord);
    if (this.adding) {
        this.adding = undefined;
    }
}

对应的模型:

Ext.define('mobile_admin.model.News', {
extend: 'Ext.data.Model',
alias: 'model.news',

requires: [
    'Ext.data.field.Field'
],

fields: [
    {
        name: 'title'
    },
    {
        name: 'newscontent'
    },
    {
        name: 'newsdate'
    },
    {
        name: 'status'
    }
]});

使用form.getValues()我得到表单的所有值。 getValues

感觉模型没有连接到表单。在表单中我输入了必要的名称连接:(http://docs.sencha.com/extjs/5.1.0/Ext.form.Basic.html#method-loadRecord

我的表格项目:

    items: [
    {
        xtype: 'textfield',
        fieldLabel: 'Titel',
        name: 'title'
    },
    {
        xtype: 'datefield',
        fieldLabel: 'Datum',
        name: 'newsdate'
    },
    {
        xtype: 'htmleditor',
        height: 150,
        width: 600,
        fieldLabel: 'Inhalt',
        name: 'newscontent',
    },
    {
        xtype: 'textfield',
        fieldLabel: 'Status',
        name: 'status'
    },
]

有人有想法吗? 我使用ExtJs(5.1.3)。

//编辑: 我发现我可以像这样设置记录:

var b = form.getRecord()
b.set(form.getValues()

这个ExtJs不会自动完成吗?

1 个答案:

答案 0 :(得分:3)

loadRecord真正做的只是设置值。表格不再使用此记录。这是表单文档:

loadRecord: function(record) {
    this._record = record;
    return this.setValues(record.getData());
},

您询问是否可以自动完成记录的设置值。是的,这是可能的,但需要绑定。

我准备了一个示例代码:

Ext.define('mobile_admin.model.News', {
    extend: 'Ext.data.Model',
    alias: 'model.news',

    requires: [
        'Ext.data.field.Field'
    ],

    fields: [
        {
            name: 'title', defaultValue : 'test'
        },
        {
            name: 'newscontent'
        },
        {
            name: 'newsdate'
        },
        {
            name: 'status'
        }
    ]
});

Ext.define('mobile_admin.form.ViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.formpanel',

    links : {
        theModel : {
            type : 'mobile_admin.model.News',
            create : true
        }
    }
});

Ext.define('mobile_admin.form.formpanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.newsedit',
    viewModel : 'formpanel',

    items : [
        {
            xtype: 'textfield',
            fieldLabel: 'Titel',
            name: 'title',
            bind : {
                value : '{theModel.title}'
            }
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Datum',
            name: 'newsdate',
            bind : {
                value : '{theModel.newsdate}'
            }
        },
        {
            xtype: 'htmleditor',
            height: 150,
            width: 600,
            fieldLabel: 'Inhalt',
            name: 'newscontent',
            bind : {
                value : '{theModel.newscontent}'
            }
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Status',
            name: 'status',
            bind : {
                value : '{theModel.status}'
            }
        }],

    buttons : [{
        text : 'Save',
        handler : function(button) {
            var vM = button.up('form').getViewModel();
            vM.notify();
            console.log(vM.get('theModel').getData());
        }
    }]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        debugger;
        var form = Ext.widget('newsedit');
        var window = Ext.widget('window', {
            items : form
        });
        window.show();
    }
});