dojo.data.ItemFileReadStore + dojox.grid.DataGrid + 100% ширина и высота - PullRequest
Новая
       7

dojo.data.ItemFileReadStore + dojox.grid.DataGrid + 100% ширина и высота

0 голосов
/ 08 февраля 2010

Я хочу dojox.grid.DataGrid с dojo.data.ItemFileReadStore в качестве хранилища данных.Я хочу, чтобы он заполнил весь экран.Я не хочу указывать размеры в пикселях.Все примеры, которые я видел, указывают их в пикселях или используют хранилище данных CSV.Я пытался использовать элементы HTML и javascript для настройки сетки данных и хранилища.

Кто-нибудь делал это?Есть ли ошибка?Кажется, что кто-то хотел бы, но, возможно, по какой-то причине это невозможно.Есть идеи?Спасибо!

Изменить для вставки кода: 

<div id="gridContainer" style="width: 100%; height: 100%;"></div>

<div id="gridContainer1" style="width: 400px; height: 200px;"></div>


<script type="text/javascript">

    dojo.addOnLoad(function(){
        // our test data store for this example:
        var jsonStore = new dojo.data.ItemFileReadStore({
            url: '/mydata.json'
        });

        var layout = [{
            field: 'id',
            name: 'id',
            width: '20px'
        },
        {
            field: 'name',
            name: 'name',
            width: '50px'
        },
        {
            field: 'owner',
            name: 'owner',
            width: '50px'
        }];

        // create a new grid:
        var grid = new dojox.grid.DataGrid({
            query: {
            rowid: '*'
            },
            store: jsonStore,
            clientSort: true,
            rowSelector: '20px',
            structure: layout
        },
        document.createElement('div'));

        dojo.byId("gridContainer1").appendChild(grid.domNode);

        grid.startup();
    });
</script>

В зависимости от того, использую я gridContainer или gridContainer1, он не показывает или не показывает сетку соответственно.

Что дает?

1 Ответ

3 голосов
/ 08 февраля 2010

Да - вполне возможно. 1) Ответственность за макет страницы несут виджеты макета (ContentPane, StackContainer, BorderContainer, TabContainer ...) Сетка может принимать участие в макете, но вы должны действительно поместить ее в константу, предназначенную для макета.

2) Программное создание может быть достигнуто с помощью: 

    var layout = [
    {name : "MyFirstColumnHeader", field : 'someColumnNameInMyData', width : "180px;"},
    {name : "MySecondColumnHeader", field : 'someOtherColumnName', width : "180px;"}];

    var emptyData = {identifier : 'uniqueIdOfEachItem', label : 'displayName', items : []};
    var store = new dojo.data.ItemFileWriteStore({data : emptyData});
    var grid = new dojox.grid.DataGrid({ id : 'myGrid',
            query : {uniqueIdOfEachItem: '*'},
            store : store,
            structure : layout},  gridPlaceholder);
    grid.startup();

, где

MyFirstColumnHeader - текст, который вы хотели бы видеть в заголовке первого столбца

someColumnInMyData - это атрибут объекта или «столбец» в данных для отображения

gridPlaceholder - это div на странице для размещения сетки (просто добавьте пустой Content Div в ContentPane и сделайте стиль ContentPane равным width: 100%, height: 100%

uniqueIdOfEachItem - это свойство каждого отображаемого элемента, которое помечает их как уникальные, например, их первичный ключ или идентификатор свойства

Этот пример создает хранилище для чтения / записи и имеет простой макет, но документы dojo должны быть в состоянии помочь с более сложными примерами.

...