Extjs 复选框显示始终选中（第二次开始，在动态添加的窗口模式中（即，如果仅在正文中呈现）答案

【问题标题】：Extjs checkbox shows always checked (second time onwards, within a dynamically added window modal (i.e if rendered within body only)Extjs 复选框显示始终选中（第二次开始，在动态添加的窗口模式中（即，如果仅在正文中呈现）
【发布时间】：2017-06-13 15:38:01
【问题描述】：

我有一个users 网格，双击users 网格我在窗口模式弹出窗口中显示更新用户表单。
在 users 网格的 dblClick 上，我正在添加 user-detail-window 到mainView。
user-detail-window 包含一个 user-detail 表单，其中包含名为 active 的复选框字段

如果 user_abc 未处于活动状态，则在打开 user_abc 的更新表单后第一次，其显示未选中的 active 字段（此是正确的行为，user_abc 已停用）

如果您打开任何其他用户记录（处于活动状态）然后再次打开 user_abc（这已停用），它会显示 active 已选中（而不是显示未选中）

i) 我在用户更新表单中有一个复选框字段，即我的 UserDetail 视图

Ext.define('TestCMS.view.UserDetail', {
extend: 'Ext.form.Panel',
alias: 'widget.user-detail',
itemId: 'user-detail',

items: [
    {
        xtype: 'combobox',
        name: 'locale',
        fieldLabel: 'Taal',
        store: 'i18n.Language',
        displayField: 'iso639',
        valueField: 'iso639',
        autoLoad: true,
        forceSelection: true,
        editable: false,
        triggerAction: 'all',
        bind: '{currentText.locale}',
    },
    {
        xtype: 'checkboxfield',      //all fields in this form
        name: 'active',              //are showing proper data,
        fieldLabel: 'Actief',        //except this checkbox
        bind: '{currentText.active}'
    },
    {
        xtype: 'ckeditor',
        fieldLabel: 'description',
        itemId: 'ckeditor-body',
        name: 'text',
        bind: '{currentText.text}',
        msgTarget: 'under',

        CKConfig: {
            extraPlugins: wordcount,notification',
        }
    }
});

ii) 以下是主视图

    Ext.define('TestCMS.view.UserMain', {
    extend: 'Ext.container.Container',
    alias: 'widget.user-main',
    itemId: 'user-main',
    layout: 'border',
    defaults: {
        split: true,
        border: 0
    },
    viewModel: {
        type: 'user-vm',
    },
    items: [
        {
            xtype: 'user-grid',
            reference: 'user-grid',
            region: 'west',
            width: 350,
            title: 'users',
            multiSelect: false
        }
   });

iii) 以下是详细窗口视图

Ext.define('TestCMS.view.UserDetailWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.UserDetailWindow',
    itemId: 'user-detail-window',
    controller: 'user-detail',
    requires: [
        'TestCMS.controller.UserDetail',
    ],

    layout: 'fit',
    minHeight: 632,
    minWidth: 1088,
    closable: true,
    modal: true,
    closeAction: 'destroy',
    maximizable: true,

    bind: {
        hidden: '{userDetailPanelDisabled}',
    },
    items: [
        {
            xtype: 'user-detail',
        }
    ],
    renderTo: Ext.getBody(), //This line causes the bug
});

我已添加此行（即 renderTo: Ext.getBody()）以在整个屏幕上显示 Popup window。没有这条线 popup window 只会在容器中显示。

在上面的代码中只添加这一行后，出现与复选框功能相关的错误，否则它工作正常。

iv) 以下是用户 gridview dblClick 处理程序

onItemDblClick: function (view, record, item, index, e, eOpts) {
    var userDetailWindow = Ext.widget('UserDetailWindow');
    var mainView = view.up('#user-main');
    viewModel = mainView.getViewModel();

    mainView.add(userDetailWindow);
    userDetailWindow.down('#user-detail').loadRecord(record);
    contentWindow.show();
    contentWindow.setTitle('user: ' + viewModel.data.userName);
},

【问题讨论】：

你能给一些小提琴而不是这么冗长的东西吗？

标签： extjs

【解决方案1】：

在尝试了许多不同的事情后找到了解决方案

1) 从detailWindowView 中删除的项目[]

items: [
    {
        xtype: 'user-detail',
    }
],

2) 将user-detail 运行时添加到user-detail-window 在onItemDblClick内

mainView.add(userDetailWindow);
//added this line and problem solved
contentWindow.add(Ext.widget('user-detail'));
contentWindow.show();
contentWindow.setTitle('user: ' + viewModel.data.userName);

【讨论】：