作为网格编辑器的容器控件不会更新值

Posted 2023-02-26

【中文标题】作为网格编辑器的容器控件不会更新值

【英文标题】：container control as a grid editor does not update values

【发布时间】：2012-12-10 08:12:41

【问题描述】：

所以我有一个包含两列的网格，第一列只有文本，第二列需要自定义控件（带有复选框和组合框）

检查屏幕：

这是一个屏幕截图的链接：

问题：

当我单击更新以更新行时。 第一列会更新，但第二列不会

我天真地将getValue() 添加到我的自定义控件中，但没有运气！！ （注：我使用的是行编辑插件）

这是我的代码：

Ext.define('MainGrid', 
    extend: 'Ext.grid.Panel',
    //defs for all the toolbars and buttons
    plugins: [rowEditing],
    columns: [
                
                    xtype: 'rownumberer'
                ,
                
                    xtype: 'gridcolumn',
                    text: 'Column Titles',
                    dataIndex: 'ColumnTitle',
                    editor: 
                        xtype: 'textfield',
                    
                ,
                
                    xtype: 'gridcolumn',
                    sortable: false,
                    align: 'center',
                    dataIndex: 'IssueCondition',
                    editor: 
                        xtype: 'reportpopulation'
                    ]
);

reportpopulation 是此处的自定义控件。这是它的代码：

Ext.define('SelectPopulation', 
    extend: 'Ext.container.Container',
    itemId: 'ctrSelectpopulation',
    alias: 'widget.reportpopulation',
    layout: 
        type: 'hbox'
    ,
    initComponent: function () 
      //code to add combo box and checkbox snipped
      ....
    ,
    getValue: function () 
        //This doesn't work! 
        return "Booo";
    
);

所以点击更新不会：

我有什么遗漏吗？ 我应该从 FieldBase 继承吗？我可以使用多个控件并使用 FieldBase 创建类似屏幕的东西吗？

【问题讨论】：

第一列没有绑定到任何字段（dataIndex）并且可以工作，第二列绑定到 IssueCondition 并且它不起作用...嗯...你能分享你的模型吗（或者如果没有模型则存储）

@lontivero 这只是一个错字，而我正在最小化我在这里发布的代码。我更新了问题。任何猜测为什么第二列没有显示任何数据？是不是因为是容器控件？

第二列没有显示任何数据，因为它不知道如何呈现该字段的“复杂”值，请查看我的答案。

如果答案解决了您的问题，请采纳，谢谢。

【参考方案1】：

这行得通，即使您的 getValue() 工作正常，问题是您在该网格列 (IssueCondition) 上使用了自定义类型值并且没有为其指定任何渲染器，请尝试以下操作：

Ext.define('MainGrid', 
extend: 'Ext.grid.Panel',
height: 300,
plugins: [Ext.create('Ext.grid.plugin.RowEditing', 
    clicksToEdit: 1
)],
columns: [
    xtype: 'rownumberer'
, 
    xtype: 'gridcolumn',
    text: 'Column Titles',
    dataIndex: 'ColumnTitle',
    editor: 
        xtype: 'textfield'
    
, 
    xtype: 'gridcolumn',
    sortable: false,
    text: "Issue Condition",
    align: 'center',
    dataIndex: 'IssueCondition',
    width: 200,
    editor: 
        xtype: 'reportpopulation'
    ,
    renderer: function (v, attr, rec) 
        console.info(arguments);
        return 'cb: ' + rec.data.IssueCondition.cb + ' combo: ' + rec.data.IssueCondition.combo;
    
],
store: Ext.create("Ext.data.Store", 
    fields: ["ColumnTitle", "IssueCondition"],
    proxy: 
        type: "memory",
        reader: 
            type: "json"
        
    
)
);

Ext.define('SelectPopulation', 
extend: 'Ext.container.Container',
itemId: 'ctrSelectpopulation',
alias: 'widget.reportpopulation',
layout: 
    type: 'hbox'
,
initComponent: function () 
    Ext.apply(this, 
        items: [
            xtype: "checkbox"
        , 
            xtype: "combobox",
            allowBlank: false,
            store: [
                [0, 'Zero'],
                [1, 'One'],
                [2, 'Two']
            ]
        ]
    );
    this.callParent(arguments);
,
getValue: function () 
    return 
        cb: this.child('checkbox').getValue(),
        combo: this.child('combobox').getValue()
    ;

);

请注意，这只是一个示例。

Check the Fiddle here

希望这会有所帮助。