1

新しいdojodgridであるdojoグリッドで作業していますが、htmlマークアップファイルでidを呼び出すことでdgridを動作させていますが、グリッドが含まれ、アクセスできるようなウィジェットを作成する必要がありますdojotypeを使用してhtml経由でそれを行います。

私はこれに3日間ほど取り組んできましたが、作成したウィジェット内で宣言すると、何らかの理由でグリッドが表示されません。

以下は私のコードサンプルです：

require([
  "dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dojo/ready",
  "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dgrid/Grid", "dgrid/Keyboard",
  "dgrid/Selection","dojo/text!./templates/dumHTML.html", "dojo/domReady!"
], function(declare, domConstruct, parser, ready, _WidgetBase, _TemplatedMixin, Grid, Keyboard, Selection, template) {

  declare("Grid", [_WidgetBase, _TemplatedMixin], {

    templateString: template,
    widgetsInTemplate: true,

    postCreate: function() {
      var self = this;
      this.inherited(arguments);
      this._showGrid();
    },

    _showGrid: function() {

      //json data string
      var gridData =[
        {'id': '10', 'filename':'budget.pdf','icon':'pdf'},
        {'id': '20', 'filename':'thevampirediary.avi','icon':'xsl'},
        {'id': '30', 'filename':'budget2.xsl','icon':'xsl'},
        {'id': '40', 'filename':'budget3.doc','icon':'doc'},
        {'id': '50', 'filename':'thevampirediary.avi','icon':'xsl'}
      ];

      // Create a new constructor by mixing in the components
      var DGrid = declare([Grid, Keyboard, Selection]);

      var grid = new DGrid( {
        columns: {
          ID: {
            label: " ",
            field: "id",
            hidden: true,
            sortable: false,
            formatter: function(id) {
              return '<div style="visibility: hidden>'+id+' </div>';
            }
          },
          filename: {
            field: "filename",
            label: "File name",
            sortable: true,
            formatter: function(filename) {
              return '<div style="float:left ">'+filename+' </div>';
            }
          },
          icon: {
            field: "icon",
            label:" ",
            sortable: false,
            formatter: function(icon) {
              return '<img src="resources/' + icon + '.png" width="20px" hieght="20px"/>';
            }
          }
        },

        // for Selection; only select a single row at a time
        selectionMode: "single",

        // for Keyboard; allow only row-level keyboard navigation
        cellNavigation: true

      }, "grid");

      grid.renderArray(gridData);
    }

  });

  ready( function() {
    // Call the parser manually so it runs after our widget is defined,
    // and page has finished loading
    parser.parse();
  });
});
4

1 に答える 1

1

私はdgridの初心者で、同じ問題を抱えています。この記事を読んで解決しました。https://github.com/SitePen/dgrid/wiki/Working-with-Widgets 解決策は、Dgrid インスタンスに DijitRegistry を混在させることです。

これが私のコードです。初心者の参考になれば幸いです。ModuleWithGuideBarは私のカスタム ウィジェットです (TemplatedMixin、_WidgetsInTemplateMixin で宣言されています)。

define([
    "dojo/_base/declare",
    "dijit/registry",
    "common/widget/ModuleWithGuideBar",
    "dgrid/OnDemandGrid",
    "dgrid/Keyboard",
    "dgrid/Selection",
    "dgrid/extensions/DijitRegistry",
    "dojo/store/Memory",
    "dijit/layout/ContentPane"
], function (declare, registry, ModuleWithGuideBar, OnDemandGrid, Keyboard, Selection, DijitRegistry, Memory, ContentPane) {
    return declare("app.management.module.event", [ModuleWithGuideBar], {
        class:"module_event",
        _grid:null,
        postCreate:function () {
            this.inherited(arguments);

            var gridContainer = new ContentPane({region:'center'});
            //add to data-dojo-attach-point
            this.moduleContent.addChild(gridContainer);
            var memoryStore = new Memory({data:[
                { first:"Bob", last:"Barker", age:89 },
                { first:"Vanna", last:"White", age:55 },
                { first:"Pat", last:"Sajak", age:65 }
            ]});
            this._grid = new declare([OnDemandGrid, Keyboard, Selection, DijitRegistry])({
                columns:{
                    first:{ label:"first" },
                    last:{ label:"last" },
                    age:{ label:"age" }
                },
                store:memoryStore
            });
            gridContainer.addChild(this._grid);
        }
    });
});
于 2012-10-11T08:30:52.717 に答える