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

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

Моя текущая проблема заключается в установке ширины сеток при их построении. Наборы данных могут иметь от двух до более 100 полей для отображения в сетке. Я установил ширину по умолчанию в CSS для сетки 600 пикселей, но сетка будет отображать только первые шесть полей набора данных. Если я установлю ширину «авто», она будет равна ширине 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); }
}

javascript dojo dgrid
person kenbuja    schedule 17.06.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

Вы должны уметь стилизовать .dgrid-cell или .dgrid-column-[index]

У меня также была потребность в большем контроле в зависимости от данных столбца. Вы можете управлять стилем, предоставив столбцу собственный метод renderHeaderCell и renderCell. (стиль относится к dom-стилю)

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

renderCell:  function(object, value, node) {
    style.set(node, 'width', '50px');
}
person Kryptic    schedule 18.06.2013
comment
Установка ширины сетки не помогла. Я уже установил стиль .dgrid-cell на 100 пикселей и изменил его на 50 пикселей. У меня есть еще несколько столбцов, но ширина сетки по-прежнему составляет 600 пикселей. - person kenbuja; 18.06.2013
comment
Интересно, у меня просто нет стиля ширины в сетке и фиксированной ширины в .dgrid-cell, и он отображается правильно. Я покопаюсь еще немного, чтобы увидеть, делаю ли я что-то по-другому. - person Kryptic; 18.06.2013

arrow_upward
0
arrow_downward

Я смог использовать 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 (если вы также нажали на точку).

person kenbuja    schedule 25.07.2013