JSON记录中的Sencha填充选项卡

Sencha fill tab from JSON record

本文关键字：填充选项 Sencha 记录 JSON 更新时间：2023-12-22

我的JSON文件：

{
    "options":{
        "someString": "SomeText",
        "someNumber": 42,
        "someCombo": 2,
        "someBool" : true
    }
}

我为那个JSON文件制作了一个JSON存储，它加载正确。

现在，我的选项选项卡：

items: [
    {
        xtype: 'panel',
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        title: 'Options Tab',
        tabConfig: {
            xtype: 'tab',
            flex: 1
        },
        items: [
            {
                xtype: 'textfield',
                id: 'someString',
                fieldLabel: 'Some String:',
            },
            {
                xtype: 'numberfield',
                id: 'someNumber',
                fieldLabel: 'Some Number',
            },
            {
                xtype: 'combobox',
                id: 'someCombo',
                fieldLabel: 'Some Combo',
                editable: false,
                store: [['0','Option Zero'],['1','Option One'],['2','Option Two']]
            },
            {
                xtype: 'checkboxfield',
                id: 'someBool',
                fieldLabel: 'Some Boolean',
                boxLabel: 'Yes'
            }
        ]
    }
]

经过多次尝试，我还没有找到用JSON数据填充表单元素的方法：

onJsonstoreLoad: function(store, records, successful, eOpts) {
    // this.child("#sepString").update(store.getAt(0).fields.getByKey("sepString"));
    // Ext.fly("someString").update(store.getAt(0).fields.getByKey("someString"));
    // Ext.fly("someString").setValue(store.getAt(0).fields.getByKey("someString"));
    Ext.fly("someString").value=store.getAt(0).fields.getByKey("someString");
    ...
    Ext.fly("someBool").checked=store.getAt(0).fields.getByKey("someBool");
}

那么，如何将数据导入表单元素呢？

使用FormPanel及其loadRecord方法。你也应该看看Ext.form.Basic#setValues。

var formPanel = Ext.widget({
    xtype: 'form', // Use form xtype instead of panel
    renderTo: Ext.getBody(),
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'Options Tab',
    tabConfig: {
        xtype: 'tab',
        flex: 1
    },
    items: [{
        xtype: 'textfield',
        // We need names, not ids
        name: 'someString',
        fieldLabel: 'Some String:',
    },{
        xtype: 'numberfield',
        name: 'someNumber',
        fieldLabel: 'Some Number',
    },{
        xtype: 'combobox',
        name: 'someCombo',
        fieldLabel: 'Some Combo',
        editable: false,
        store: [['0','Option Zero'],['1','Option One'],['2','Option Two']]
    },{
        xtype: 'checkboxfield',
        name: 'someBool',
        fieldLabel: 'Some Boolean',
        boxLabel: 'Yes'
    }]
});
// Create a mock record
var MyRecord = Ext.define(null, {
    extend: 'Ext.data.Model'
    ,fields: ['someString', 'someNumber', 'someCombo', 'someBool']
});
var record = new MyRecord({
    "someString": "SomeText",
    "someNumber": 42,
    "someCombo": 2,
    "someBool" : true
});
// You would use the record loaded in your store instead:
//     var record = store.getAt(0);
// In recent version of Ext4, you can call formPanel.loadRecord directly
formPanel.getForm().loadRecord(record);