Question

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

检查屏幕：

以下是一个屏幕链接： Screenie

问题：

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

我天真地将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创建类似于screenie的内容吗？

Answer 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

希望这有帮助。

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

1 个答案: