dojo.les données.ItemFileReadStore + dojox.de la grille.DataGrid + 100% de la largeur et de la hauteur

Je veux un dojox.de la grille.DataGrid avec un dojo.les données.ItemFileReadStore comme la banque de données. Je veux qu'elle remplisse tout l'écran. Je ne veux pas spécifier les dimensions en pixels. Tous les exemples que j'ai vu les spécifier en pixels ou de l'utilisation des données CSV magasin. J'ai essayé d'utiliser les éléments HTML et javascript pour l'installation de la grille de données et de les stocker.

Quelqu'un a fait cela? Est-il d'un bug? Il semble comme ce que quelqu'un voudrait, mais peut-être qu'il n'est pas possible pour une raison quelconque. Des idées? Merci!

Modifier pour insérer le code:

<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>

Selon que j'utilise gridContainer ou gridContainer1, il ne montre pas ou affiche la grille respectivement.

Ce qui donne?

InformationsquelleAutor Sims | 2010-02-08
  1. 3

    Hé oui, tout à fait possible.
    1) mise en Page est de la responsabilité de la mise en page des widgets (ContentPane, StackContainer, BorderContainer, TabContainer...) La grille est en mesure de prendre part dans une mise en page, mais vous devriez vraiment le placer dans un contianer qui est conçu pour faire de mise en page.

    2) Programatic création peut être réalisé avec: 

        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();

    où

    MyFirstColumnHeader est le texte que vous voulez dans la première colonne d'en-tête

    someColumnInMyData est l'attribut de l'objet ou "colonne" dans les données à afficher

    gridPlaceholder est une div sur la page de la grille (juste ajouter une div vide à ContentPane et que le style de la ContentPane être width : 100%, hauteur : 100%

    uniqueIdOfEachItem est la propriété de chaque élément affiché que des marques comme unique, par exemple, de leur clé primaire ou l'ID de la propriété

    Cet exemple crée une lecture/écriture magasin et a une mise en page simple, mais le dojo docs devraient être en mesure d'aider avec des exemples plus complexes.

    • Salut Andy, merci pour l'explication. Juste pour confirmer: Il n'y a pas de largeur par défaut pour les colonnes? Si je les spécifier, via la "mise en page", puis je peux préciser mon élément conteneur à 100% de largeur et de 100% de haut(no pun intended). Maintenant j'ai un élément de conteneur, mais la chose étrange est que ce qui affecte la largeur semble être si je spécifie une largeur de la div qui définit le dojo.les données.ItemFileReadStore - pas le contenant. Ma grille de colonnes sont dynamiques. Le nombre et leur contenu sont déterminés par les données d'une base de données. Donc, si je précise la même largeur pour chaque, je pense que c'est très bien. Je vais faire un essai.
    • J'ai édité ma question à mon exemple de code. J'ai aussi essayé sans document.createElement('div') et dojo.byId("gridContainer").appendChild(la grille.domNode). Toujours le même problème. Le conteneur div avec un pourcentage dimensions ne montre rien. Alors que le div conteneur des dimensions en pixels montre tout. Aussi un autre truc que j'ai trouvé étrange, c'est que les éléments span peut être utilisé avec des données au format csv, les magasins et les mais pas avec json. Je suis à la spécification d'un 'url' pour mon magasin. Je ne suis pas vif sur les recréer via javascript.
    • Il semble que la largeur peut être de 100% - pas une valeur de pixel, mais la hauteur doit être d'une valeur de pixel.
    • C'est vraiment un CSS/HTML problème. L'élément parent de l'ContentPane doit avoir une valeur, même à 100%. De sorte que le corps de l'élément doit aussi avoir une valeur de 100%, ce qui crée beaucoup de marges et autres. Regarde comme je vais avoir à reconstruire la mise en page de mon application pour travailler avec ce. Merci pour votre aide Andy.
    • Ma seule page RIA utilise: <div class="app"></div> où le css a : .app { width:100%; height:100%; overflow:hidden; padding:0; margin:0; } Vous pouvez ajouter du rembourrage et des marges sur le contenu des éléments, mais le dessus est un assez standard page unique div conteneur. Dans le balisage, vous pouvez ajouter un ContainerPane et de définir son style à la largeur et la hauteur de 100% et ensuite lors de la création de la grille de faire: <div class="app"> <div dojoAttachPoint="gridPlaceholder"></div> </div>, et utiliser le code que j'ai mentionné.
    InformationsquelleAutor Andy