问如何在我的dojo GridX中选择的特定列中将按钮对齐？
EN

Stack Overflow用户

提问于 2014-11-05 11:51:24

回答 1查看 185关注 0票数 0

我能够在标题中对文本进行居中，使用如下：

[colid="startstop"].gridxCell{ 
    text-align: center; 
}

我以为这将使所有属于startstop列的行单元格中心化，但它没有。我的startstop列在每一行中都包含一个按钮。我还有两个像这样的专栏。如何在我选择的三列中对按钮进行居中？

这是我的结构的一部分：

                     { id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px', 
                        widgetsInCell: true, 
                        navigable: true, 
                        allowEventBubble: true, 
                        decorator: function(){ 
                                //Generate cell widget template string 
                                return [ 
                                        '<button data-dojo-type="dijit.form.Button" ', 
                                        'data-dojo-attach-point="btn" ', 
                                        'class="startStopButton" ', 
                                        'data-dojo-props= ', 
                                        '"onClick: function(){', 
                                                'alert(\'Start/Stop\');', 
                                        '}"><img src="images/1413390026_control.png" /></button>' 
                                ].join(''); 
                        }, 
                        setCellValue: function(data){ 
                                //"this" is the cell widget 
                                this.btn.set('label', data); 
                        } 
                    },

这里是我的css类-它现在只做按钮的大小，因为我有其他困难，让它自己工作-但这是另一个问题。

.startStopButton .dijitButtonNode {
  width: 16px;
  height: 16px;
  text-align: center;
}

dojo

dijit.form

dojo.gridx

css

button

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-06 11:51:43

如果要在单元格中包含小部件，建议使用widgetsInCell标志以及onCellWidgetCreated和setCellValue方法(如文档中的这里)。

下面是如何使用带有水平滑块的单元格：

{
  id: 'scoreColId',
  field: 'score',
  name: 'Score',
  width: '15%',

  // flag there are widgets in cell so that they are destroyed when grid is destroyed
  widgetsInCell: true,

  // method to create the widget (no cell-specific data yet)
  onCellWidgetCreated: function(cellWidget, column) {
    // outer div to center align the widget inside placed in the cell
    var outerDiv = domConstruct.create('div', {
      style: {
        'text-align': 'center'
      }
    }, cellWidget.domNode);

    // create the widget and place it in the div (already inside the cell)
    cellWidget.slider = new HorizontalSlider({
      minumum: 0,
      maximum: 10,
    });
    cellWidget.slider.placeAt(outerDiv);
  },

  // set each cell with it's specific data
  setCellValue: function(gridData, storeData, cellWidget) {
    var score = gridData.docScore;
    cellWidget.slider.set('value', score);
  }
},