如何使用 Extjs Form loadRecord 设置复选框和组合框的值？答案

【问题标题】：How to set values of checkbox and combobox by using Extjs Form loadRecord?如何使用 Extjs Form loadRecord 设置复选框和组合框的值？
【发布时间】：2015-01-16 06:27:21
【问题描述】：

当我运行form.loadRecord(record); 时，数据进入 tetfields 但使用 id 值的复选框和组合全部为空...我尝试了很多解决此问题的方法，但对我不起作用。

    Ext.define('Ext.migration.ProductEditPanel', { 
        extend:  'Ext.panel.Panel',
        alias: 'widget.producteditpanel',
        title: 'Genel Bilgiler',
        layout: 'column',
        bodyPadding: 5,
        ds_activeProductTypes: this.ds_activeProductTypes,
        initComponent: function() {
            this.items = [{
                columnWidth: 0.5,
                xtype: 'form',
                id: 'productcrudform',
                margin: '0 5 0 0',
                bodyPadding: 5,
                name: 'productcrudform',
                url: baseUrl + "productcrud",
                defaultType: 'textfield',
                items: [{
                        scale: this,
                        inputType: 'hidden',
                        id: 'actionType',
                        name: 'actionType',
                        value: this.actionType
                    },{
                        fieldLabel: 'ID',labelWidth: 140,
                        id: 'id',
                        name: 'id',
                        disabled: true,
                        anchor : '100%'
                    },{
                        fieldLabel: 'Ürün Adı',labelWidth: 140, anchor : '100%',
                        id: 'name',
                        name: 'name'                            
                    },{
                        fieldLabel: 'Kod', labelWidth: 140, anchor : '100%',
                        name: 'code',
                    },
                    {
                        xtype : 'combo', labelWidth: 140, anchor : '100%',
                        fieldLabel : 'Ürün Tipi',
                        name : 'productType.name',
                        hiddenName : 'productType.id',
                        store : new Ext.data.ArrayStore({
                            fields : [ 'productType.id', 'productType.name'],
                            data : [
                                [ 1, 'TISORT'],
                                [ 2, 'POSTER'],
                                [ 3, 'KAPSONLU'],
                                [ 4, 'TELEFON_KAPAK']]
                        }),
                        mode : 'local', 
                        valueField : 'productType.id',
                        displayField : 'productType.name'
                    },{
                        fieldLabel: 'Aktif', labelWidth: 140, width: 180,
                        inputType: 'checkbox',
                        name: 'activeFlag'
                    },{
                        name: 'newFlag',
                        fieldLabel: 'Yeni Ürün', labelWidth: 140, width: 180,
                        inputType: 'checkbox'
                    },{
                        name: 'clearanceFlag',
                        fieldLabel: 'Tasfiye Ürün', labelWidth: 140, width: 180, anchor : '0%',
                        inputType: 'checkbox'
                    }
                ]
            },
            {   // PRICE GRID INIT
                columnWidth: 0.5,
                title: 'Prices',
                requires: 'Ext.migration.PriceGrid',
                xtype: 'productpricegrid',
                id: 'prices-grid',
                region: 'center',
                border: true,
                store: pricesStore
            }];

            this.callParent(arguments);
        },            
        onSubmit: function() {}
    });

解决方案一：

field: {
    xtype: 'checkboxfield',
    name: 'active_state',
    value: 1,
    inputValue: 1,
    uncheckedValue: 0
}

或：

field: {
    xtype: 'checkboxfield',
    name: 'active_state',
    value: 1,
    inputValue: true,
    uncheckedValue: false
}

或：

field: {
    xtype: 'checkboxfield',
    name: 'active_state',
    value: 1,
    inputValue: 'true',
    uncheckedValue: 'false'
}

【问题讨论】：

标签： forms extjs checkbox extjs4

【解决方案1】：

当您调用 loadRecord 时，对于记录的每个字段，都会搜索具有相同名称的表单字段，如果找到该记录的“setValue”，则会调用该记录的“setValue”，因此您必须查看该方法的复选框和组合。对于复选框，这相当简单：默认情况下，只有这些值会检查您的复选框：

true
'true'
'1'
'on'

而任何其他值都会将其检查为假。因此，如果您的模型中的字段定义为 boolean 类型，则一切正常（所以也许您应该检查模型字段和表单项名称是否匹配）。如果您需要自定义“真”值，只需指定 inputValue 属性即可。

对于组合框，如果它们的存储设置为远程并且设置为 forceSelection true 并且值字段与显示字段不同，则它会稍微复杂一些，但在您的情况下应该完全没有问题。我认为您的问题是您使用了ArrayStore，只需切换到数据存储即可。

jsfiddle example

【讨论】：