如何在 OnDemandGrid 中更改小部件的宽度答案

【问题标题】：How do I change width of a widget in OnDemandGrid如何在 OnDemandGrid 中更改小部件的宽度
【发布时间】：2017-03-05 04:03:08
【问题描述】：

我想更改通过 dgrid/editor 插入 OnDemandGrid 的小部件的宽度。模板文件通过调用this.ruleLinesColumns() 来设置列，该this.ruleLinesColumns() 返回函数返回的列。我通过以下代码在列中使用 dgrid/editor 插件。默认情况下，小部件的宽度设置为比列宽宽很多。我想将其设置为 100%，以便它适合列而不是越过它。

这是我的文件：

模板文件

<div data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region: 'center', gutters: false">

        <div data-dojo-type="dgrid/OnDemandGrid" 
             data-dojo-mixins="dgrid/Selection, dgrid/extensions/DijitRegistry, prophet/common/dgrid/_StandardGridMixin, prophet/common/dgrid/_TreeRowHighlightingMixin"
             data-dojo-attach-point="ruleLinesGrid"
             data-dojo-props="'class': 'grid',
                              store: this.ruleLinesStore,
                              columns: this.ruleLinesColumns(),
                              sort: 'sequence',
                              selectionMode: 'single',
                              deselectOnRefresh: false">
    </div>
</div>

我在哪里设置列

ruleLinesColumns: function() {
    var self = this;
    return [
        ...
        editor({
            field: "training",
            label: msgs.editor.training,
            sortable: false,
            required: true,
            autoSave: true
        }, NumberTextBox),
        ...
    ];
},

我尝试了几种不同的方法，例如 style: {width: '100%'} 和 width: '100%'，但似乎没有任何效果。

这里是 dgrid/editor 的文档： https://github.com/SitePen/dgrid/blob/master/doc/components/mixins/Editor.md

【问题讨论】：

标签： javascript dojo dgrid

【解决方案1】：

我找到了答案！

因为列小部件是通过 dgrid/editor 传入的，所以您实际上可以在 editorArgs 中包含您需要为 NumberTextBox 设置的所有内容。

例如，我必须让小部件的 宽度为 100%，并且还要确保 NumberTextBox 在使其 时只能输入 正整数 >必需：

editor({
    field: "training",
    label: msgs.editor.training,
    sortable: false,
    autoSave: true,
    editorArgs: {
        required: true,    // Since required isn't part of editor's field, I had to put it into editorArgs as well
        constraints: {min: 0, places: 0},
        style: {width: '100%'}
    }
}, NumberTextBox),

【讨论】：