Добавление dgrids с переменной шириной в TabContainer

Question

Я заполняю TabContainer сетками (Dojo 1.8, dgrid), которые показывают результаты запроса для разных наборов данных. Каждая вкладка является результатом одного набора данных. Различные наборы данных будут иметь различное количество полей, поэтому я динамически создаю каждую сетку и добавляю ее в ContentPane, который добавляется в TabContainer.

Моя текущая проблема заключается в установке ширины сеток при их построении. Наборы данных могут иметь от двух полей до более чем 100 полей, которые будут отображаться в сетке. Я установил ширину по умолчанию в CSS для сетки 600 пикселей, но сетка будет отображать только первые шесть полей набора данных. Если я установил ширину в «auto», она будет такой же широкой, как TabContainer, удалив полосу прокрутки и отрезав данные. Можно ли установить ширину для каждой сетки отдельно?

Это то, что результат выглядит

Это код для заполнения TabContainer

function buildColumns(feature) { 
    var attributes = feature.attributes; 
    var columns = []; 

    for (attribute in attributes) { 
     if (attribute != "Shape") { 
      var objects = {}; 
      objects.label = attribute; 
      objects.field = attribute; 
      columns.push(objects); 
     } 
    } 
    return columns; 
} 

function populateTC(results, evt) { 
    try { 
     if (dijit.byId('tabs').hasChildren) { 
      dijit.byId('tabs').destroyDescendants(); 
     } 

     if (results.length == 0) { 
      console.log('Nothing found.'); 
      return; 
     } 

     var combineResults = {}; 
     for (var i = 0, len = results.length; i < len; i++) { 
      var result = results[i]; 
      var feature = result.feature; 
      var lyrName = result.layerName.replace(' ', ''); 
      if (combineResults.hasOwnProperty(lyrName)) { 
       combineResults[lyrName].push(result); 
      } 
      else { 
       combineResults[lyrName] = [result]; 
      } 
     } 

     for (result in combineResults) { 
      var columns = buildColumns(combineResults[result][0].feature); 
      var features = []; 

      for (i = 0, len = combineResults[result].length; i < len; i++) { 
       features.push(combineResults[result][i].feature); 
      } 

      var data = array.map(features, function (feature) { 
       return lang.clone(feature.attributes); 
      }); 

      var dataGrid = new (declare([Grid, Selection]))({ 
       id: "dgrid_" + combineResults[result][0].layerId, 
       bufferRows: Infinity, 
       columns: columns, 
       "class": "resultsGrid" 
      }); 


      dataGrid.renderArray(data); 
      dataGrid.resize(); 

      dataGrid.on(".dgrid-row:click", gridSelect); 

      var cp = new ContentPane({ 
       id: result, 
       content: "<b>" + combineResults[result][0].layerName + "\b", 
       //content: dataGrid, 
       title: combineResults[result][0].layerId 
      }).placeAt(dijit.byId('tabs')); 

      cp.addChild(dataGrid); 

      cp.startup(); 
      cp.resize(); 
     } 
     tc.startup(); 
     tc.resize(); 
     map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); 
    } 
    catch (e) { console.log(e.message); } 
} 

Answer 1

я смог использовать AddCssRule динамически изменять размер сетки

var dataGrid = new (declare([Grid, Selection]))({ 
    id: "dgrid_" + combineResults[result][0].layerId, 
    bufferRows: Infinity, 
    columns: columns, 
    "class": "resultsGrid" 
}); 

dataGrid.renderArray(data); 

var gridWidth = "width: " + String(columns.length * 100) + "px"; 
dataGrid.addCssRule("#" + dataGrid.id, gridWidth); 
dataGrid.resize(); 
dataGrid.refresh(); 

Вот Fiddle, который показывает результат. Нажмите на цветной многоугольник, чтобы показать различные сетки (хотя содержимое иногда запирается в заголовок сетки). Кроме того, вкладки не отображаются правильно, но должны быть 0, 224 и 227 (если вы также нажали на точку).

Answer 2

Проблема не с шириной сетки, то ширина столбцов. Они подходят к контейнеру.

Если вы укажете столбец фиксированной ширины, вы получите желаемый эффект.

Вы должны быть в состоянии стиль .dgrid-cell или .dgrid-column-[index]

Я также имел необходимость большего контроля в зависимости от данных столбца. Вы можете управлять стилем, предоставляя столбцу свой собственный метод renderHeaderCell и renderCell. (Стиль относится к РОМ стилю)

renderHeaderCell: function(node) { 
    style.set(node, 'width', '50px'); 
} 

renderCell: function(object, value, node) { 
    style.set(node, 'width', '50px'); 
}