2016-05-10 5 views
2

dojoでコンテンツペインを作成するためのレイアウトモジュールの組み込み方法がわかりません。私は私のウィジェットの1つの中にいくつかのコンテンツをレイアウトしたい。カスタムテンプレートウィジェットにdijitレイアウトペインを追加するにはどうすればよいですか? - (Dojo 1.10)

彼らはこれらのモジュールを必要と

require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]); 

を持っている。しかし、私はこれを含めたいウィジェットがこの

define([ 
    "dojo/_base/declare", 
    "dojo/parser", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 
    "dojo/text!./home/templates/HomePage.html", 
    "xstyle/css!./home/css/HomePage.css", 
    "dijit/layout/LayoutContainer", 
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane" 
], function (
    declare, 
    parser, 
    _WidgetBase, 
    _TemplatedMixin, 
    _WidgetsInTemplateMixin, 
    template, 
    css, 
    lc, 
    bc, 
    cp 
) { 

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { 

     templateString: template, 

     postCreate: function() { 
      this.inherited(arguments); 

     }, 

     startup: function() { 
      this.inherited(arguments); 

     } 
    }); 
}); 

そしてHTMLがこの

のようなものであるウィジェットのようなものです道場tookit example

<div style="width: 100%; height: 100%;"> 
    <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%"> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">Leading pane</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Center pane</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div> 
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div> 
    </div> 

</div> 

しかし、私はこれらの依存関係を含んでいても動作しません私のカスタムテンプレートウィジェット内のレイアウトウィジェットを使用するために必要なモジュールを配置する

"dijit/layout/LayoutContainer", 
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane" 

?あるいは私は何か他のものを逃していますか

EDIT:私は

require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]); 
require(["dojo/parser", "dojo/ready"], function (parser, ready) { 
    ready(function() { 
     parser.parse(); 
    }); 
}); 
define([ 
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 
    "dojo/text!./home/templates/HomePage.html", 
    "xstyle/css!./home/css/HomePage.css", 
    "./home/HomeNavigationWidget" 
], function (
    declare, 
    _WidgetBase, 
    _TemplatedMixin, 
    _WidgetsInTemplateMixin, 
    template, 
    css, 
    HomeNavigationWidget 

) { 

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { 

     templateString: template 

    }); 
}); 

EDITを定義する上で必要と置くことによって、それは、このコードを使用して動作させることができました:私はレイアウトが働いていた理由は、後のため_WidgetsInTemplateMixinであったことがわかりました。これを追加すると、レイアウトウィジェットをテンプレート内で使用することができます。そして、定義の上にある2つのrequireステートメントを削除し、うまくいきました。 dojoConfigでは、parseOnLoadがfalseに設定されています。

答えて

2

カスタムウィジェットのテンプレート(Editor.html)にレイアウトペインを追加しようとしているようです。

このような場合は、あなたは、このようなウィジェットファイルにモジュールを単に必要とすることができます:あなたもdefineに渡された関数のパラメータとしてそれらを宣言する必要はありませんでしたどのように

define([ 
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dojomat/_AppAware", 
    "../_global/widget/NavigationWidget", 
    "dojo/text!./templates/Editor.html", 
    "dojo/text!./css/Editor.css", 
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane" 
], function (
    declare, 
    _WidgetBase, 
    _TemplatedMixin, 
    _AppAware, 
    NavigationWidget, 
    template, 
    css 
) { 
    return declare([_WidgetBase, _TemplatedMixin, _AppAware], { 
     // widget code 
    }); 
}); 

注意それらはコード内で使用されていないため、依存関係の配列にリストされているだけなので、テンプレートが生成されたときにそれらがロードされていることを確認します。また

は、dojo/parseモジュールがもはや必要とされるどのように気づかない - 例では、コードは、道場の設定オプション(parseOnLoad)を使用して、自動的にindex.htmlページに解析されたためです。しかし、あなたのコードでは、アプリケーションのメインエントリポイントで定義されているコードを解析する方法があると思います。

+0

私はあなたの提案を試しました、上記の私のオリジナルの編集済みの記事を見てください。何らかの理由でそれは私にとってはうまくいかないでしょう。 _WidgetsInTemplateMixinを追加するまで。 – sjs

関連する問題